1. 머리글

Flutter에서 자주 사용하는 Widget과 매개변수(쉽게말해 옵션)을 정리해보자.
이번에는 앱의 페이지를 구성하는 SafeArea와 Scaffold의 body를 제외한 Widget들을 정리한다.

2. SafeArea

WidgetTree를 구성할때, 스마트폰 화면의 노치나 OS의 상단바등이 차지하는 영역을 계산해 페이지의 컨텐츠가 화면에 알맞게 배치되게하는 위젯이다.

SafeArea(
 child: ,
),

3. Scaffold

scaf·fold
1. 교수대, 처형대2. (건축 공사장의) 비계
뜻 그대로 Widget을 구성하는 기초적인 틀을 의미한다.

Scaffold(
  appBar: , // 페이지의 가장 상단 appbar부분에 표혈될 Wiget. 
            // (주로 AppBar를 사용한다.) <PreferredSizeWidget>
  body: ,   // 페이지의 중단 body부분에 표현될 Widget. 
            // (주로 Container, Row, Column를 사용한다.) <Widget>
  drawer: , // 왼쪽 -> 오른쪽으로 슬라이드할 경우 나타나는 Widget(SideBar). <Widget>
  endDrawer: ,    // 오른쪽 -> 왼쪽으로 슬라이드할 경우 나타나는 Widget(SideBar). <Widget>
  bottomSheet: ,  // body하단에 배치될 Widget. <Widget>
  bottomNavigationBar: ,  // 페이지의 가장 하단에 배치될 NavigationBar <Widget>
);

4. AppBar

Scaffold에 포함되는 widget
앱의 상단바를 구성한다.

AppBar(
  title: ,           // 표현할 텍스트 <Widget>
  elevation: ,       // AppBar의 하단에 표현될 그림자의 크기 <double>
  backgroundColor: , // 배경색 <Color>
  
  automaticallyImplyLeading: ,  // AppBar에 자동적으로 설정된 버튼의 표시 유무
                                // (ex. pop버튼) <bool>
  leading: ,                    // 가장 왼쪽에 표현될 버튼이나 icon <Widget>
  actions: [],                  // 가장 오른쪽에 표현될 버튼이나 icon <Widget>[]
),

5. drawer, endDrawer

Scaffold의 가장자리에서 수평으로 슬라이드하면 나타나는 머티리얼 디자인 패널.
주로, 앱의 탐색 링크나 사용자의 정보를 간단하게 표시할때 사용한다.

Drawer(
  elevation: , // Drawer의 우측에 표현될 그림자의 크기 <double>
  child: ,     // Drawer에 표현될 Widget. (주로 ListView를 사용한다.) <Widget>
),

6. bottomNavigationBar

BottomNavigationBar(
  // NavigationBar를 클릭했을때 나타낼 애니메이션종류 <BottomNavigationBarType>
  type: ,
  // NavigationBar의 배경색 <color>
  backgroundColor: ,
  // NavigationBar의 그림자 크기 <double>
  elevation: ,
        
  // 선택된 아이템의 색깔 <color>
  selectedItemColor: ,
  // 선택된 아이템의 Icon Theme. <IconThemeData>
  selectedIconTheme: ,
  // 선택된 아이템의 폰트사이즈 <double>
  selectedFontSize: ,
  
  // 선택 안된 아이템의 색깔 <color>
  unselectedItemColor: ,
  // 선택 안된 아이템의 폰트사이즈 <double>
  unselectedFontSize: ,
        
  // 현재 선택된 Index
  currentIndex: pageIdx,
        
  // 아이템을 클릭할 경우, 실행되는 익명함수 <ValueChanged<int>>
  onTap: (int index) { },
  
  // BottomNavigationBar에 배치할 Item의 목록 <BottomNavigationBarItem>[]
  items: [
  
    // 배치될 Item. <BottomNavigationBarItem>
    BottomNavigationBarItem(
    
      // Item에 표현될 Text <String>
      label: ,
      // Item에 표현될 Icon <Icon>
      icon: ,
      // Item에 표현될 배경색 <color>
      backgroundColor: ,
    ),
  ],
),