【Flutter】ハンバーガーメニューを実装してみた

Flutterでハンバーガーメニューを表示させるのにはどうするんだろう？
と思って調べてみたら、特にパッケージを使うことなく、簡単に実装できそうだったので、やってみました。

実装後の動作

この記事でゴールとする実装の動作動画です。

表示結果

実装手順

以下、実装手順です。

1. ハンバーガーメニュー表示

ハンバーガーメニューを表示させるには、scaffoldのdrawerプロパティにDrawerウィジェットを渡すだけで、基本的な機能は実装できます。

サンプルコード

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: const Text('Sample'),
  ),
  drawer: const Drawer(), // ここを追加
  body: Container(),
);
}

このコードだけで、AppBarにハンバーガーメニューを表示させるアイコンと、押下時にハンバーガーメニューが表示されます。

表示結果

2. ハンバーガーメニューの中身実装

ListViewで実装させています。

サンプルコード

final menuList = ['Top', 'UserData', 'Access', 'Setting'];

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: const Text('Sample'),
  ),
  drawer: Drawer(
    child: ListView(
      children: [
        const DrawerHeader(
          child: Center(
            child: Text(
              'DrawerHeader',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 20,
              ),
            ),
          ),
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
        ),
        const Divider(
          thickness: 1.0,
          color: Colors.black,
        ),
        ...menuList.map(
          (e) => listTile(e),
        )
      ],
    ),
  ),
  body: Container(),
);
}

// コンポーネント

Widget listTile(String title) {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 12.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                title,
                style: const TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 28.0,
                ),
              ),
              IconButton(
                onPressed: () {},
                icon: const Icon(Icons.arrow_circle_right),
              )
            ],
          ),
        ),
        const Divider(
          thickness: 1.0,
          color: Colors.black,
        ),
      ],
    );
  }

表示結果

以上。
簡単なのでやってみてください。