Flutter 기본 개념 - MaterialApp, Scaffold, State, Container, widget, child/children, context - 공부 내용

공부 내용

Flutter 기본 개념 - MaterialApp, Scaffold, State, Container, widget, child/children, context

yeji Kim

Jul 11, 20243m

참고 자료 MaterialApp Scaffold State Container BuildContext, context

참고 자료

이 코드를 실행해보면 까만 바탕에 좌측 상단에 hello라고 뜨게 됩니다. 앱이긴 한데... 뭔가 디자인적으로 굉장히 별로죠 그 이유는 우리가 일일이 디자인적인 요소들을 처리해주지 않았기 때문입니다. 그런데 디자인적으로 모든 것을 처리하는게 굉장히 어렵습니다. 요소들도 매우 많구요 그래서 플러터에서는 기본적인 앱에서 디자인적인 뼈대를 구성하는 위젯을 만들어놓았습니다. 그게 바로 Scaffold 위젯입니다. 플러터 API문서를 확인해보면 Scaffold에 대해서 다음과 같이 설명하고 있습니다. (https://api.flutter.dev/flutter/material/Scaffold-class.html) Implements the basic material design visual layout struct..

papabee.tistory.com

https://api.flutter.dev/flutter/material/Scaffold-class.html

flutter ThemeData - 앱의 테마를 지정해보자.

앱은 여러 화면들로 구성이 되어있는 경우가 많습니다. 화면들마다 색상을 구성해준다면 굉장히 불편하겠죠? 그렇기에 원하는 값으로 설정이 가능한 ThemeData를 사용하는 게 정신건강에 무척이나 좋을듯하네요 😁 class _MyHomeState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Theme Data'), centerTitle: true, ), body: Center( child: Text('Body Text'), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), ), )..

dajoonee.tistory.com

[Flutter] State(상태)를 밥아저씨가 설명하는 것처럼 쉽게 알아보기

State는 Flutter의 코어개념이라 생각한다. 우선 얕게 알아보자.

velog.io

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 '아무튼-작업일지'

Welcome to '아무튼-작업일지'!
By subscribing to my site, you'll be the first to receive notifications and emails about the latest updates, including new posts.
Join SlashPage and subscribe to '아무튼-작업일지'!