[Flutter]AppBarにサイドメニューを追加するには？

Flutter

2021.10.11

どうも、ちょげ(@chogetarou)です。

AppBarにサイドメニューを追加するには、どうしたらいいのでしょうか？

方法
まとめ

方法

AppBarにサイドメニューを追加するには、Drawerを使います。

Drawerを使うには、Scaffoldの引数「drawer」に、Drawerウェジェットを配置します。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(),
      appBar: AppBar(
        title: Text(
          "Title",
        ),
      ),
      body: Center(),
    );
  }

そして、Drawerにメニューを表示するには、Drawerの引数「child」を使います。

「child」にListViewやColumnを指定すれば、メニューを作ることが出来ます。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: ListView(
          children: [
            ListTile(
              title: Text('メニュー１'),
            ),
            Divider(),
            ListTile(
              title: Text('メニュー2'),
            ),
            Divider(),
            ListTile(
              title: Text('メニュー3'),
            )
          ],
        ),
      ),
      appBar: AppBar(
        title: Text(
          "Title",
        ),
      ),
      body: Center(),
    );
  }