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

「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」の作成ができました。

ListViewについてはこちら
ListTileについてはこちら