Drawer
Drawer
「Drawer」はAndroidアプリでよく見るUIで、左からドロワーを表示し、メニューなどを配置するのに利用します。
今回は「Drawer」について解説していきます。
class _MainPageState extends State<MainPage> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Drawer'),
),
drawer: Drawer(
child: ListView(
children: <Widget>[
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
title: Text("Item 1"),
trailing: Icon(Icons.arrow_forward),
),
ListTile(
title: Text("Item 2"),
trailing: Icon(Icons.arrow_forward),
),
],
),
),
);
}
}
「Drawer」を使うときは「AppBar」のdrawerで作成します。
子要素として「ListView」を持つようにします。
必ずしも「ListView」でなければいけない訳ではないですが、通常のドロワー形式でメニューを作る場合は「ListView」で対応できるかと思います。
drawer: Drawer(
child: ListView(
),
),あとは通常の「ListView」の使い方と代わりはありません。
ただ、「DrawerHeader」を使うことでヘッダー要素を作ることが可能です。
child: ListView(
children: <Widget>[
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
title: Text("Item 1"),
trailing: Icon(Icons.arrow_forward),
),
ListTile(
title: Text("Item 2"),
trailing: Icon(Icons.arrow_forward),
),
],
),このようにして簡単に「Drawer」の作成ができました。
