2023. 9. 15. 10:57ㆍFrontEnd & Mobile/Flutter
https://api.flutter.dev/flutter/material/Scaffold-class.html
Scaffold class - material library - Dart API
Implements the basic Material Design visual layout structure. This class provides APIs for showing drawers and bottom sheets. To display a persistent bottom sheet, obtain the ScaffoldState for the current BuildContext via Scaffold.of and use the ScaffoldSt
api.flutter.dev
Scaffold란?
플러터 API 문서를 확인해보면 Scaffold에 대해서 다음과 같이 설명하고 있습니다.
Implements the basic material design visual layout structure
=기본적인 material design의 시각적인 레이아웃 구조를 실행한다
라고 해석할 수 있는데요
이때 구글에서 자주 쓰이는 디자인 양식이나 아이콘들을 material design이라고 부릅니다
따라서 Scaffold Widget은 앱 화면을 구성하기 위한 뼈대라고 생각하시면 됩니다
Scaffold 사용 방법
Scaffold를 생성할 때 생성자 parameter에 Widget을 넘겨줌으로써 하나씩 추가를 하면 됩니다
class Scaffold extends StatefulWidget {
const Scaffold({
Key key,
this.appBar,
this.body,
this.floatingActionButton,
this.floatingActionButtonLocation,
this.floatingActionButtonAnimator,
this.persistentFooterButtons,
this.drawer,
this.endDrawer,
this.bottomNavigationBar,
this.bottomSheet,
this.backgroundColor,
this.resizeToAvoidBottomPadding,
this.resizeToAvoidBottomInset,
this.primary = true,
this.drawerDragStartBehavior = DragStartBehavior.start,
this.extendBody = false,
this.drawerScrimColor,
this.drawerEdgeDragWidth,
예제1 | appBar
appBar는 어플리케이션 최상단에 위치하고 있는 bar를 말합니다
아래와 같이 Scaffold 생성자에 appBar를 전달하면 간단히 생성이 됩니다
예제2 | body
appBar 밑의 영역을 body라고 부릅니다. body는 하나의 Widget만 가질 수 있으며 아래와 같이 간단하게 사용할 수 있습니다
'FrontEnd & Mobile > Flutter' 카테고리의 다른 글
[Flutter] Flutter와 Firebase를 이용한 넷플릭스 클론 코딩 (0) | 2023.11.26 |
---|---|
[Flutter] EdgeInsets (0) | 2023.09.18 |
[Flutter] @override (0) | 2023.09.15 |
[Flutter] MaterialApp (0) | 2023.09.15 |