Flutter로 앱 만들기 - 10. MaterialApp의 위젯 정리

MaterialApp

Flutter 앱의 뼈대가 되는 위젯

Application의 제목이나 테마, 시작될 때 표시되는 위젯(home) 등을 설정할 수 있고 route와 navigater를 이용해 다른 맵으로 갈 수 도 있는 기능을 하는 Widget이다.

Scaffold

화면을 사용할 수 있게 해주는 Widget이다.

상단, 하단, 중단을 나눠서 사용할 수도 있고 다양한 영역에 Widget을 포함 시킬 수 있다.

AppBar

화면의 상단에 위치

title이나 Toggle 메뉴 등을 넣을 수 있다.

Body

앱의 콘텐츠를 표시

Center, Column, Row 등 다양한 위젯을 포함

 

FloatingActionButton

화면 하단 우측에 위치한 버튼

새 항목을 추가하는 등의 액션 버튼

 

BottomNavigationBar

화면 하단에 위치

여러 화면 간 이동을 쉽게 하는 버튼을 제공

 

Drawer

화면 왼쪽 슬라이드할 때 나타나는 Navigation Drawer

앱의 다양한 섹션으로 이동할 수 있는 링크 포함

 

사용 예시:

import 'package:flutter/material.dart';

void main(){
  runApp(scafTest());
}

class scafTest extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Scaffold Test',
      home: Scaffold(
        appBar:AppBar(
          title: Text('Scaffold Test'),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {
                print('검색버튼 눌림');
              },
            ),
            IconButton(
              icon: Icon(Icons.more_vert),
              onPressed: () {
                print('더보기 눌림');
                },
              ),
            ],
          ),
        body: Center(
          child: Text('Hello, Scaffold'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            print('버튼이 클릭되었습니다.');
            },
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'HOME',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.business),
              label: 'BUSINESS',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.school),
              label: 'SCHOOL',
            ),
          ],
          currentIndex: 0,
          selectedItemColor: Colors.amber[800],
          onTap: (index) {
            print('Tab $index selected');
          },
        ),
        drawer: Drawer(
          child: ListView(
            children: <Widget>[
              DrawerHeader(
                child: Text('Drawer Header'),
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
              ),
              ListTile(
                title: Text('Item 1'),
                onTap: () {
                  print('Item 1 tapped');
                }
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

결과: