[Flutter] Scaffold Widget

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

Scaffold class - material library - Dart API

 

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만 가질 수 있으며 아래와 같이 간단하게 사용할 수 있습니다