Drawer

Drawer

DrawerHeader, Drawer

DrawerHeader 는 Material design에서 Drawer의 맨 위 공간으로 사용자의 정보등을 표시하는 용도로 사용하는 경우를 흔히 볼 수 있다.

Drawer 에는 DrawerHeader, ListTile, Divider, Card, AboutListTile 등을 배치해 꾸며보았다.

	class _MyHomePageState extends State<MyHomePage> {
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
	title: Text('Flutter Demo Home Page'),
	),
	body: Container(),
	drawer: Drawer(
	child: ListView(
	padding: EdgeInsets.zero,
	children: <Widget>[
	DrawerHeader(
	child: Text('Drawer Header'),
	decoration: BoxDecoration(
	color: Colors.blue,
	),
	),
	ListTile(
	title: Text('Item 1'),
	leading: FlutterLogo(),
	selected: true,
	),
	ListTile(
	title: Text('one-line with trailing widget'),
	trailing: Icon(Icons.more_vert),
	),
	ListTile(
	title: Text('one-line with leading widget'),
	leading: Icon(Icons.thumb_up),
	),
	Divider(
	color: Colors.blue,
	),
	Card(
	child: ListTile(
	title: Text('One-line ListTile'),
	),
	),
	Card(
	child: ListTile(
	title: Text('two-line ListTile'),
	subtitle: Text('subtitle line'),
	leading: Icon(Icons.thumbs_up_down),
	trailing: Icon(Icons.more_vert),
	),
	),
	Divider(
	color: Colors.blue,
	),
	AboutListTile(
	applicationName: 'Drawer Demo',
	applicationIcon: FlutterLogo(),
	applicationVersion: '1.0',
	applicationLegalese: 'Free',
	),
	Container(
	color: Colors.lightBlue[200],
	height: 50.0,
	child: FlatButton(
	child: Text('Close Drawer'),
	onPressed: () {
	Navigator.pop(context);
	},
	),
	),
	],
	),
	),
	);
	}
	}

view raw drawer.dart hosted with ❤ by GitHub

Tap actions

Dialog 를 삽입해서 Tap 기능을 동작시켜 보았다.

	class _MyHomePageState extends State<MyHomePage> {
	AlertDialog _dialog(String title) {
	return AlertDialog(
	title: Text(title),
	actions: <Widget>[
	FlatButton(
	child: Text('back'),
	onPressed: () {
	Navigator.pop(context);
	},
	),
	],
	);
	}
	// ...
	}

view raw drawer_dialog.dart hosted with ❤ by GitHub

onTap, onLongPress

	ListTile(
	title: Text('Item 1'),
	leading: FlutterLogo(),
	onTap: () {
	showDialog(
	context: context,
	builder: (BuildContext context) {
	return _dialog('Tapped Item 1');
	}
	);
	},
	onLongPress: () {
	showDialog(
	context: context,
	builder: (BuildContext context) {
	return _dialog('LongPress');
	}
	);
	},
	selected: true,
	),

view raw drawer_ontap.dart hosted with ❤ by GitHub

GestureDetector

	ListTile(
	title: Text('one-line with leading widget'),
	leading: GestureDetector(
	onTap: () {
	showDialog(
	context: context,
	builder: (BuildContext context) {
	return _dialog('Tapped leading');
	}
	);
	},
	child: Icon(Icons.thumb_up),
	),
	),

view raw drawer_ontap2.dart hosted with ❤ by GitHub

endDrawer

오른쪽에서 열리는 Drawer.

	@override
	Widget build(BuildContext context) {
	return Scaffold(
	// ...
	endDrawer: Drawer(
	child: Center(child: Text('This is endDrawer')),
	),
	);
	}

view raw enddrawer.dart hosted with ❤ by GitHub

Demo

Reference

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

https://api.flutter.dev/flutter/material/Drawer-class.html

https://api.flutter.dev/flutter/material/DrawerHeader-class.html