Overview.
옆의 네비게이터를 나오게 할 수 있는 Drawer 를 알아보자
- Drawer 이란?
- DrawHeader
0. 문서
https://docs.flutter.dev/cookbook/design/drawer
https://api.flutter.dev/flutter/material/DrawerHeader-class.html
1. Drawer 이란?
머티리얼 디자인을 사용하는 앱에는 탭과 서랍이라는 두 가지 기본 탐색 옵션이 있습니다. 탭을 지탱할 공간이 부족한 경우 서랍이 편리한 대안을 제공합니다.
Flutter에서는 Drawer위젯을 a와 함께 사용하여 ScaffoldMaterial Design 서랍이 있는 레이아웃을 만듭니다. 이 레시피는 다음 단계를 사용합니다.
서랍이라고 하네요.
첫째.
Scaffold 의 drawer 의 부분에 Drawer 위젯에 child 부분에 작성이 가능합니다.
[ 만약 drawer 가 아닌 endDrawer 라면 오른쪽에 배치됩니다. ]
Scaffold(
appBar: AppBar(
title: const Text('AppBar with hamburger button'),
),
drawer: Drawer(
child: // Populate the Drawer in the next step.
),
);
둘째. Listview
Drawer 위젯 안에는 대개 ListView 를 넣고 그안에 DrawHeader 가 들어가는 형식을 주로 사용하나 보네요.
Drawer(
// Add a ListView to the drawer. This ensures the user can scroll
// through the options in the drawer if there isn't enough vertical
// space to fit everything.
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text('Drawer Header'),
),
ListTile(
title: const Text('Item 1'),
onTap: () {
// Update the state of the app.
// ...
},
),
ListTile(
title: const Text('Item 2'),
onTap: () {
// Update the state of the app.
// ...
},
),
],
),
);
2. DrawHeader
DrawHeader 는 뭐 말그대로 헤더 부분입니다. 데코레이션이 가능하겠네요!
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text('Drawer Header'),
),
그렇게 전제적으로 확인해 봅시다.
Drawer(
// Add a ListView to the drawer. This ensures the user can scroll
// through the options in the drawer if there isn't enough vertical
// space to fit everything.
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text('Drawer Header'),
),
ListTile(
title: const Text('Item 1'),
onTap: () {
// Update the state of the app.
// ...
},
),
ListTile(
title: const Text('Item 2'),
onTap: () {
// Update the state of the app.
// ...
},
),
],
),
);
onTap에서는 여러가지 실행할 수 있겠네요.
'flutter & dart' 카테고리의 다른 글
flutter & dart - Key (중요) , 이니셜라이저를 사용하는 이유 (0) | 2024.04.02 |
---|---|
flutter & dart - 아코디언 같은 ExpantionPanelList (0) | 2024.04.02 |
flutter & dart - Draggable , DragTarget (0) | 2024.04.01 |
flutter & dart - Divider 와 Spacer (0) | 2024.04.01 |
flutter & dart - Dismissible ( 스와이프 위젯 ) (0) | 2024.04.01 |