[ Flutter ] Scaffold에 대해 알아보자.

 

참고사이트

∙ 코딩애플의 flutter-basic-layout-design

 

내가 좋아하는 개발자 유튜버

 

 

 

🐜 Scaffold

우리가 쓰는 앱의 디자인은 크게 상단, 중단, 하단부로 이루어져있다.

 

 

이걸 쉽게 구성하고 싶으면 Scaffold() 위젯을 사용하면 된다.

 

👷🏻 구조

MaterialApp(
  home: Scaffold(
    appBar: 				// 상단에 넣을 위젯,
    body:					// 중단에 넣을 위젯,
    bottomNavigationBar:	// 하단에 넣을 위젯,
  )
);

 

Scaffold() 위젯은 3개의 파라미터(appBar, body, bottomNavigationBar)를 통해 상/중/하로 나뉘게 해준다.

appBar(상단), bottomNavigationBar(하단)은 필수가 아니고 body(중단)은 필수이다.

 

💻 Code

class _MyHomePageState extends State<MyHomePage> {
  var _index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("상단"),
      ),
      body: Center(child: Text('중단')),
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: _index,
          onTap: (value) {
            setState(() {
              _index = value;
            });
          },
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'home'),
            BottomNavigationBarItem(
                icon: Icon(Icons.account_circle_rounded), label: 'myPage'),
            BottomNavigationBarItem(icon: Icon(Icons.menu), label: 'menu'),
          ]),
    );
  }
}

 

코드를 실행하면 다음과 같은 화면이 출력된다.