Flutter 기본 개념 - MaterialApp, Scaffold, State, Container, widget, child/children, context
Y
yeji Kim
MaterialApp
•
title, theme, home 옵션 지정 가능.
◦
home - 가장 처음 낭는
◦
theme (ThemeData)
▪
colorScheme, textTheme 등
▪
Color
▪
textTheme - bodyText2가 기본 텍스트 스타일로 적용
Scaffold
const Scaffold(
{Key? key,
PreferredSizeWidget? appBar,
Widget? body,
Widget? floatingActionButton,
FloatingActionButtonLocation? floatingActionButtonLocation,
FloatingActionButtonAnimator? floatingActionButtonAnimator,
List<Widget>? persistentFooterButtons,
AlignmentDirectional persistentFooterAlignment = AlignmentDirectional.centerEnd,
Widget? drawer,
DrawerCallback? onDrawerChanged,
Widget? endDrawer,
DrawerCallback? onEndDrawerChanged,
Widget? bottomNavigationBar,
Widget? bottomSheet,
Color? backgroundColor,
bool? resizeToAvoidBottomInset,
bool primary = true,
DragStartBehavior drawerDragStartBehavior = DragStartBehavior.start,
bool extendBody = false,
bool extendBodyBehindAppBar = false,
Color? drawerScrimColor,
double? drawerEdgeDragWidth,
bool drawerEnableOpenDragGesture = true,
bool endDrawerEnableOpenDragGesture = true,
String? restorationId}
)•
Scaffold - 구성된 앱에서 디자인적 부분에서의 뼈대
•
AppBar - 맨 위 상단 수평 바
◦
backgroundColor
•
BottomAppBar - bottomNavigationBar를 이용한 맨 하단 수평 바
◦
items (BottomNavigationBarItem), selectedItemColor, backgroundColor
•
Drawer (drawer) - 보통 좌측에 나타나는 수직 바
•
BottomSheet
◦
ScaffoldState.showBottomSheet, showModalBottomSheet
•
SnackBar
◦
ScaffoldMessengerState.showSnackBar
•
MaterialBanner - 화면 상단 쪽 Appbar 아래 나타나는 배너. 자동으로 사라지진 않음
◦
ScaffoldMessengerState.showMaterialBanner
•
ScaffoldState
•
Body - AppBar 밑의 영역. 하나의 widget만 가질 수 있음.
•
Floating Action Button - 항상 표시되는 원형 아이콘 버튼. 일반적으로 화면 하단 맨 오른쪽에 위치.
◦
child를 추가할 수 있음.
•
SafeArea - notch가 생겨서 가려지는 부분을 제외하여 안전하게 뷰를 보여줌.
State
•
공식 문서 정의
◦
위젯이 빌드될 때 동기적으로 읽을 수 있는 정보
◦
위젯의 생명 주기가 끝나기 전까지 변경될 수 있는 정보
•
App state
◦
앱 전반에 걸쳐 사용되는 data. 여러 위젯에서 쓰임.
◦
로그인 정보, 유저 설정, 장바구니 등
•
Widget state
Container
•
자식 위젯을 한 개 포함.
•
크기 (width/height), padding, margin, decoration(borderRadius, color 등), boxShadow, border 등 다양한 속성 지정 가능
•
children이 없으면 가능한 가장 넓은 영역을 차지함. children을 가지면 children의 크기가 됨.
BuildContext, context
•
Context - 현재 위젯의 위젯 트리상의 위치에 대한 변수.
•
of - 현재 위젯의 위쪽 방향으로 가장 가까운 위젯 찾는 함수.
◦
Something.of(context)- 위로 거슬러 올라가면서 가장 가까운 Something을 찾아 반환하라 라고 이해하면 된다.
final sizeX = MediaQuery.of(context).size.width;
final sizeY = MediaQuery.of(context).size.height;
Subscribe to '아무튼-작업일지'
Subscribe to my site to be the first to receive notifications and emails about the latest updates, including new posts.
Join Slashpage and subscribe to '아무튼-작업일지'!
Join Slashpage and subscribe to '아무튼-작업일지'!
Subscribe
