[Flutter] 6. Drawer서랍 메뉴 만들기

앱에 내비게이션 메뉴를 추가하는 일반적인 방법은 서랍(Drawer)을 이용하는 것입니다. 앱에 서랍을 만들면서 Flutter와 더 친해져 보도록 합시다.

 

이번 포스트는 다음 내용을 다루고 있습니다.

1. scaffold에서 Drawer 사용하기
2. MenuDrawer 클래스 만들기

---

 

Scaffold에서 Drawer 사용하기

지금까지 진행된 앱은 아래와 같이 인트로 화면이 하나만 있는 상태입니다. 이 화면에 메뉴로 서랍(Drawer)을 추가해 보도록 하겠습니다.

Flutter에서는 Scaffold안에서 Drawer를 사용할 수 있습니다. Scaffold에는 Drawer을 사용하는 drawer 속성이 있습니다. Drawer는 ListView와 같은 단일자식(child)을 가질 수 있습니다. 일반적으로 서랍에는 앱 이름이나 로고 또는 배경 이미지를 포함할 수 있는 헤더가 있습니다. 이 헤더를 DrawerHeader라고 부릅니다. Listview는 가로 또는 세로로 스크롤이 가능한 목록입니다.

 

코드에서 작성해보도록 하겠습니다.

앱의 모든 화면에서 탐색 메뉴를 호출하고 싶기 때문에 Drawer전용으로 새 파일을 만들겠습니다.

프로젝트의 lib폴더 하위에 shared라는 폴더를 만들었고, 그리고 shared폴더에서 menu_drawer.dart라는 파일을 생성하였습니다.

 

Drawer 클래스 만들기

menu_dart.dart에서 메뉴서랍을 호출할 수 있는 stateless위젯을 만들어 보겠습니다.

build메소드에서 Drawer를 리턴하는 MenuDrawer클래스를 만들었습니다.  child에는 ListView를 설정하였습니다. ListView의 하위 매개변수로 ListView에 포함하려는 위젯 목을 반환하는 buildMenuItems 메서드를 호출하도록 하였습니다.

 

이제 buildMenuItems 메서드를 만들어 보겠습니다.

buildMenuItems메소드의 역할은 Drawer에서 포함하려고 하는 위젯의 리스트를 만들어 반환하는 역할하게 됩니다. menuTitles 배열에서는 메뉴의 텍스트들을 선언해 주었습니다. 메소드의 리턴 값은 menuItems이고 Widget을 갖는 배열입니다.

17번째 라인에서 menuItems리스트의 첫 번째 아이템으로 DrawerHeader를 add해 주고 있습니다. DrawerHeader는 child로 Text위젯을 가지고 있고, decoration으로 indigo색상(앱 테마와 같은 색)을 넣어주었습니다.

25번째 라인부터 menuTitles 배열의 길이만큼 반복문을 돌면서, menuItems에 ListTile위젯을 만들어 넣어주고 있습니다. ListTile위젯은 텍스트와 아이콘 포함할 수 있는 고정 높이의 위젯입니다. ListTile의 title 매개변수에 Text위젯을 넣어주었으며, 이 Text위젯에 MenuTitles의 각 값들을 element로 넣어주었습니다. onTap은 아직 사용하지 않지만 다른 화면으로 이동하는 코드를 나중에 넣어줄 계획입니다.

 

결과적으로 menuItems 배열에는 하나의 DrawerHeader 위젯과 4개의 ListTile위젯을 가지게 되고 이 배열이 리턴되어, 아래 코드와 같이 Drawer안의 스크롤이 가능한 위젯 목록인 ListView의 children 매개변수로 할당이 됩니다.

이제 이 서랍메뉴를 유저에게 보여줘야 합니다. 아직은 유일하게 스크린을 담당하고 있는 IntroScreen클래스에서 Scaffold의 drawer 매개변수를 설정 하겠습니다.

스캐폴드의 drawer 매개변수에서 MenuDrawer 클래스의 인스턴스를 호출하였습니다.

 

앱을 실행해 보겠습니다.

Drawer 메뉴 추가

---

여기까지 수고하셨습니다.

다음 포스트에서는 앱에 내비게이션을 추가해 보도록 하겠습니다.

간단한 튜토리얼이지만 전체 소스코드를 원하시는 분은 댓글로 말씀해주세요.