기존 안드로이드나 애플의 햄버거 메뉴를 만들때는 많은 코드가 필요했는데 Flutter는 너무 간단히 구현이 됩니다.
Flutter에서 Drawer는 Scaffold Widget 에서 제공을 하는 기본적인 것입니다.
Flutter 사이트에서 Drawer를 설명해 놓은 링크는 아래와 같습니다.
https://flutter.dev/docs/cookbook/design/drawer
drawer에는 상단의 header와 ListView 로 구성이 되어있습니다.
drawer: ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
Container(
height: 200.0,
child: DrawerHeader(
child: Text(
'Sample App',
style: TextStyle(fontSize: 30),
),
decoration: BoxDecoration(
color: Colors.blue,
),
),
),
ListTile(
leading: Icon(
Icons.favorite,
color: Colors.deepOrange,
),
title: Text('즐겨찾기'),
onTap: () {
print('즐겨찾기 click');
},
),
Divider(
height: 10,
),
ListTile(
leading: Icon(
Icons.add_alert_sharp,
color: Colors.blue,
),
title: Text('공지사항'),
onTap: () {
print('공지사항 click');
},
),
Divider(
height: 10,
),
ListTile(
leading: Icon(Icons.app_settings_alt_outlined),
title: Text('환경설정'),
onTap: () {
print('환경설정 click');
},
)
],
),
),
),
간단하게 햄버거 메뉴를 붙여보았습니다.
도움이 되시길 바랍니다.
Flutter 최고의 Package GetX 한글 메뉴얼 (0) | 2021.04.27 |
---|---|
flutter String to double 함수 (0) | 2021.04.27 |
Flutter Appbar 검색버튼 붙이기 (0) | 2021.04.21 |
Flutter 상단 메뉴 버튼 붙이기 (0) | 2021.04.15 |
Flutter 기존 project 에 web 추가 (0) | 2021.03.29 |