[Flutter] Drawer 메뉴 만들기

 

drawer 위젯

 

필요할 때만 접근하기 위한 정보들은 Drawer 라는 공간에 위치시킨다.

이 공간에는 계정정보 등을 시현할 수도 있고, 특정 페이지로의 네이게이션이 가능하도록 정보를 추가할 수 있다. 

 

https://docs.flutter.dev/cookbook/design/drawer

Add a drawer to a screen

구현

Drawer (DrawerHeader, ExpansionTile & ListTile) 구성

Drawer 도 네비게이션 스택에 추가된다. 그러므로 Drawer 를 닫을 때, Navigator.pop(context) 을 사용한다.

Expansion 위젯은 아래 링크를 참조하길 바란다.

2023.12.26 - [Flutter (플러터)] - [Flutter] 목록 펼치기 (서브 카테고리 만들기)

[Flutter] 목록 펼치기 (서브 카테고리 만들기)

 

...
	Scaffold(
        appBar: AppBar(),
        body: Container(),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              DrawerHeader(
                margin: EdgeInsets.zero,
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
                child: Text('Drawer Header'),
              ),
              ExpansionTile(
                title: Text('ABC Category'),
                leading: Icon(Icons.abc),
                childrenPadding: EdgeInsets.only(left: 56),
                children: [
                  ListTile(
                      leading: Icon(Icons.airplay),
                      title: Text('A'),
                      onTap: () {
                        // close the drawer
                        Navigator.pop(context);
                      }),
                  Divider(height: 1),
                  ListTile(title: Text('B'), onTap: () {}),
                  Divider(height: 1),
                  ListTile(title: Text('C'), onTap: () {}),
                ],
              ),
            ],
          ),
        ),
      ),
  ...

 

Drawer 의 자식위젯으로 ListView 대신 Column 이 사용될 수 있지만 차이점이 있다.

ListView 는 화면보다 컨텐츠가 클 경우, 스크롤 할 수 있다.

Column 은 화면보다 컨텐츠가 클 경우, 오버플로우가 발생한다. (이를 해결하기 위해서는 다른 방법을 추가해줘야 함.)

Column 사용시 오버플로우