728x90

Flutter 6

[Flutter, 플러터 걸음마] 커스텀 위젯 stless (stateless widget), 변수(var), ListView

Q. 코드가 너무 길고 복잡하다. 보기도 싫다. 이걸 한 단어로 축약할 순 없을까? A. 커스텀 위젯을 ㅆㅂ 1.stless 를 입력하고 tap 키를 누르면 아래 커스텀 위젯이 뿅나온다. class extends StatelessWidget { const ({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const Placeholder(); } } 이후 할일은 딱 두개다. 1)class 옆에 불러올 커스텀 위젯 '이름'을 정해주고 (단 대문자 시작!) 이번엔 Special로 해봤다. 2) 그리고 return const 옆에 축약할 코드를 넣어주면 완성! 사용법은 원하는 위치에 이름() 을 넣어주면 된다..

카테고리 없음 2023.03.15

[Flutter, 플러터 걸음마] Flexible, Expanded / Row, Column 간격 조절

Q. 한 Row에 또는 한 Column에 3개의 박스가 배열되어 있다. 이때 각 박스의 간격을 조절하는 방법은? A. 1)각각 width를 준다. (Column은 height) *Container ( ) 위젯에 width: 파라미터 삽입 Row( children: [ Container ( width: 10 ), Container ( width: 10 ), Container ( width: 10 )] 2)Flexible로 폭을 원하는 비율(2:3:5) 만큼 준다. *Flexible ( ) 위젯에 child 파라미터로 Container 묶고 flex: 파라미터 삽입 Row ( children: [ Flexible( child: Container( ), flex: 2), Flexible( child: Cont..

카테고리 없음 2023.03.08

[Flutter, 플러터 걸음마] 앱바(AppBar), 버튼, 레이아웃 꾸미기

1. 텍스트 스타일 1) 컬러 *Text ( ) 위젯에 ‘텍스트’ 적고 , style: 파라미터에 TextStyle( ) 위젯 넣고 그 안에 color: Colors.@@ Text('ddddd', style: TextStyle( color: )) -Colors.컬러명 -Color(0xffaaaaaa) 헥스컬러코드 코드 왼쪽에 피커가 생김 누르면 컬러 선택 위젯이 나옴 2)폰트 사이즈 Text('ddddd', style: TextStyle(fontsize: 00)) 3)자간 Text('ddddd', style: TextStyle(letterspacing : 00)) 4)글자두께 Text('ddddd', style: TextStyle(fontweight : Fontweight.w100)) 등등 TextSty..

카테고리 없음 2023.03.06

[Flutter, 플러터 걸음마] 박스 스타일

1.기본 용어 margin 은 바깥쪽 여백 padding 은 안쪽 여백 디자이너, 개발자들과 대화할 때도 자주 사용하는데 정확한 의미는 이제야 알았다; 2.박스 스타일 꾸밀 때 decoration 박스 스타일 줄 때 다 이 안으로 decoration : BoxDecoration( ) -border 박스 테두리 -shape -borderRadius 테두리 둥글게 **Container 에 컬러 값 주었는데 BoxDecoration 위젯을 넣으면 겹쳐서 에러. BoxDecoration 으로 스타일 관리할거면 Container 에 컬러값 제거. 3.박스 정렬, 위치 선택 Align(alignment : Alignment.something) -child 로 위치 정할 Container 나 Sizebox가 묶여있어..

카테고리 없음 2023.03.06

[Flutter, 플러터 걸음마] 가로 세로 배치, 레이아웃 만들기

1.UI를 쉽게 만들도록 도와주는 위젯 1)MaterialApp() -구글 스타일 -구글이 제공하는 인터페이스, 컴포넌트, 위젯들 사용할 수 있음 +또는 내가 커스터마이징할 때도 메테리얼앱 2)Cupertino어쩌구() -애플스타일 2.레이아웃 만들기 1)Scaffold() 위젯은 앱을 상,중,하로 나눠준다. return MaterialApp( home: Scaffold( appBar: AppBar(), body: Container(), bottomNavigationBar: BottomAppBar() -appBar: 상단 -body: 중단 -bottomNavigationBar: 하단 2)여러가지 요소를 '가로'로 배치: Row( children: [ ] ) return MaterialApp( home: ..

카테고리 없음 2023.03.05

[Flutter, 플러터 걸음마] 기본 위젯 4가지

1.위젯이라는 개념을 알아야 함. 1-1.위젯이란? 일종의 자판기. 음료를 사먹기 위해 편의점을 가거나 인터넷으로 주문하지 않고 누르면 바로 나오는 자판기. 즉, 특정 기능을 중간 경로 없이 바로 실행할 수 있게 하는 것. 플러터에선 대문자로 시작하고 () 괄호가 있으면 위젯이다. Container( ) 등 위젯 안에는 위젯에서 사용가능한 파라미터들이 있다. 위젯 ( 파라미터: ) 2.기본 위젯 4가지 텍스트, 아이콘, 사진, 박스 1)텍스트 return MaterialApp( home: Text('안녕하세요') ); 2)아이콘 return MaterialApp( home: Icon(Icons.ac_unit) ); -home: Icon( ) 여기까지는 내가 아이콘을 넣을거다. 이고 -home: Icon(..

카테고리 없음 2023.03.04
728x90