Flutter 위젯
1.글자 넣고 싶다.
-Text(‘’)
- style: 텍스트 스타일 설정 (크기, 색상, 굵기 등)
- textAlign: 텍스트 정렬 (left, right, center 등)
- maxLines: 최대 줄 수 제한
- overflow: 넘치는 텍스트 처리 (예: TextOverflow.ellipsis)
2.아이콘 넣고싶다.
-Icon(Icons.아이콘 이름)
- color: 아이콘 색상
- size: 아이콘 크기
3.이미지 넣고 싶다.
-Image.asset(‘경로’)
새로운 assets 폴더 만들어서 이미지 파일 삽입해줘야함
또 pubspec.yamal에 들어가서 경로 설정해줘야함
(위 하나 주석 풀고 - assets/ 기입)
- fit: 이미지 비율 및 맞춤 (BoxFit.cover, contain, fill 등)
- width, height: 이미지 크기 지정
4.네모박스 넣고싶다.
-Container()
-SizedBox()
단 상세설정 없을 시 그냥 투명색이므로 안 보임
Width:, height:, color: colors, black로 설정해줘야함
단 이렇게 할 시 전체화면으로 제공 됌.
그렇기에 Center()등 위치를 잡고 그 안에 child:(자식)를 생성해 지정해줘야함.
5.화면을 기준으로 상중하를 나누고싶다.
-Scaffold()
appbar: AppBar(), //최상단
body: ~~(), //중간 영역
floatingActionButton: 동작 버튼
drawer: 사이드 메뉴
bottomNavigationBar: BottomAppBar(), //하단 영역
6.여러 위젯 가로로 배치하고싶다.
-Row( children: [] ),
children: 삽입하면 여러 위젯 기입가능.
7.여러 위젯 세로로 배치하고 싶다.
-Column( children: [] ),
children: 삽입하면 여러 위젯 기입가능.
8.Row,Column
-mainAxisAlignment: MainAxisAlignment.~~,
-crossAxisAlignment: CrossAxisAilgnment.~~, //반대축 정렬
(center, start, end, spacebetween, spaceEvenly, spaceAround)
-SingleChildScrollView: overflow를 방지하고 스크롤 가능하게 만듬
9.Row,Column의 박스 크기 가 맘에 안들때.
-Container 사용( 전구 모양 클릭) 단 Container는 무거움
Width:, height:, child:만 사용하는 건 SizedBox로 대체
10.박스에 여백주는 법.
-margin,padding 사용
뒤에 꼭 EdgeInsets.all(값) 또는 EdgeInsets.fromLTRB 사용
11.박스에 꾸미기
-decoration: Boxdecoration(), 사용
12.박스 위치 정렬
-Center, Align( alignment: Alignment. ~~ , ),
13.박스를 가로로 꽉차게하고싶다.
-width: double.infinity, //무한히 폭을 준다.
14.타이포그라피
-Text(‘권태윤’, style: TextStyle(~~),),
15.버튼 넣고 싶을때
-TextButton( child: , onPressed: (){}, )
-IconButton( icon: , onPressed: (){}, )
_ElevatedButton( child: , onPressed: (){}, ) //색깔이 채워진 버튼
16.AppBar(),구조
-title: //왼쪽제목
-leading: //왼쪽에넣을 아이콘
(둘 같이 사용 가능)
-actions: [] //우측아이콘들
-backgroundColor: //배경색 지정
17.레이아웃 혼자서도 잘짜는 법
-예시 디자인 준비
-예시 화면에 네모그리기
-바깥 네모부터 하나하나 위젯으로(큰 틀부터 잡기)
-마무리 디자인(마진,패딩 등등)
18.두개의 박스를 사용하는데 각각 폭을 지정하려면?
-Flexible 사용
Flexible(child: Container(color: Colors.blue), flex: 3 ),
Flexible(child: Container(color: Colors.red), flex: 7 ),
-Flexible이 귀찮다면 Expanded 사용
flex: 1 가진 것과 같음
Expanded(child:Container(color:Colors.blue)),
19.커스템 위젯 생성
-stless+tap 클릭 후 나오는 값 class 옆, const 옆에
축약 단어 기입 및 return에 기존 코드 삽입
20.class
-커스텀 위젯은 무조건 class로
-class는 변수랑 함수를 보관하는 통
-그 외 더 짧게 변수나 함수를 이용해서 축약할 수 있음
(흔히 변경하지않는 ui는 변수로 지정하는게 좋음)
-아무거나 커스텀 위젯화 해놓으면 안됌
(재사용 많은 ui나 큰페이지들 위주로 해놓기)
21.스크롤 기능
-Listview() 이용
22.StatelessWidget (상태 없음)
- 한 번 생성되면 UI가 바뀌지 않는 위젯
- 예: 텍스트, 아이콘, 로고 등
23.StatefulWidget (상태 있음)
- 사용자의 동작에 따라 UI가 바뀌는 위젯
- 내부적으로 상태(State)를 저장하고 setState()를 통해 UI를 갱신함
- 예: 버튼 클릭 횟수 증가, 입력 필드, 토글 등
24.MaterialApp
MaterialApp은 Flutter 앱의 루트(최상위) 위젯
앱 전체의 테마, 라우팅(페이지 이동), 타이틀, 폰트 등을 설정할 수 있는 핵심 컨테이너
- Material Design 스타일을 적용할 수 있게 해주는 틀!
- 보통 앱당 하나만 존재
25.GestureDetector
사용자의 터치, 제스처(탭, 더블탭, 스와이프 등) 를 감지하여 반응하는 위젯
모든 시각적 요소를 클릭 가능하게 만들고 싶을 때 사용!
- onTap: 탭(클릭) 이벤트
- onDoubleTap: 더블탭 이벤트
- onLongPress: 길게 누르기
- 그 외 onPanUpdate (드래그 중 움직임 감지)
- onVerticalDragStart, onHorizontalDragUpdate
- (방향별 스와이프 제스처) 등 대부분의 사용자 제스처를 처리할 수 있는 속성들이 존재
- child : 이벤트 대상이 될 위젯
26.TextField
- textInputAction : 키보드의 액션 버튼(오른쪽 아래 버튼)의 형태와 동작을 결정
- expands
- maxLines
- onChanged
- onSubmitted
27.TextEditingController
- TextField의 입력 값을 직접 제어하거나 읽을 수 있도록 하는 객체
- 입력 초기값 설정, 실시간 값 추적, clear 등 다양한 작업 가능
- 더이상 사용되지 않을 때 dispose 해줘야함
- → StatefulWidget 내에서만 선언해줘야 안전(메모리 누수 안됨)
28.페이지 이동
-새로운 페이지로 이동
- Navigator.push() 함수 사용
-뒤로가기
- Navigator.pop() 함수 사용