Flutter - Widget 정리

Flutter widgets

1. Scaffold
   • 뼈대(건물 지을 때 아시바)
   • 속성
     • appBar: 페이지 젤 위에
     • body: 페이지 body
     • drawer: 왼쪽 -> 오른쪽으로 슬라이드할 경우 나타나는 sidebar
     • endDrawer: 오른쪽 -> 왼쪽으로 슬라이드할 경우 나타나는 sidebar
     • bottomSheet: 바텀시트
     • bottomNavigationBar: 최하단 NavigationBar

   home:
       Scaffold(
   		appBar: AppBar(title:
   			Text('Text Widget in Appbar Widtget',),
   			centerTitle: true, //Appbar 가운데 정렬
   		),
   		body:SingleChildScrollView(...), // Scrollable 화면
   		...
   	)

   ---

2. Padding
   • Padding 기능 / 패딩
   • child 안에 있는 widget들을 감싸고 있음
   • 패딩 영역 정의
   • cont 종류
     • EdgeInsets.all(int) : 상하좌우 동일한 값으로 패딩
     • EdgeInsets.only(top: , bottom: , left: , right: ) : 각각 패딩 값 세팅
     • EdgeInsets.symmetric(vertical: , horizontal: ) : 수직, 수평 세팅

   	Padding(
   		padding: const EdgeInsets.all(10.0),
   		child: Image.network("{IMG URL}", width: 81,),
   	),

---

3. Column
   • 영역 내에서 수직으로 위젯들을 나열함

   Column(
   	children: [
   		TextField(
           	decoration: InputDecoration(labelText: 'Label text(Hint Text)'),
   		),
   		TextField(
   			decoration: InputDecoration(labelText: 'Label text(password)'),
   			obscureText: true,
   		), //password 필드에 * 처리
   		Container(
   			width: double.infinity, //양옆으로 최대
   			margin: const EdgeInsets.only(top: 16),
   			child: ElevatedButton( ... ),
   		), //Container
   	], // children
   ) // Column

---

4. Appbar
   • 화면 맨 위의 앱바
   • 속성
     • backgroundColor: 배경색
     • title: 텍스트
     • centerTitle: 텍스트 가운데정렬 여부
     • elevation: AppBar 밑 그림자 크기
     • leading: 맨 왼쪽 이미지 or 버튼
     • action: 맨 오른쪽 이미지 or 버튼

   appBar: AppBar(title:
   	Text('Text Widget in Appbar Widtget',
       	style: TextStyle(fontSize: 28),
       ),
   	centerTitle: true,
       automaticallyImplyLeading: true,
   	leading:
       	ElevatedButton(
           	onPressed: (){},
   			child:
   				Text('TT'),
   				style: ButtonStyle(backgroundColor: MaterialStateProperty.all<Color>(Colors.white24)),),
   ),

---

special thanks to neo.

---

참고
https://velog.io/@philemon/%ED%94%8C%EB%9F%AC%ED%84%B0-%EC%9C%84%EC%A0%AF-%EC%A0%95%EB%A6%AC-Safearea-Scaffold