【Flutter】ドロワーメニューの作り方【初心者向け】

本記事では、Flutterでドロワーメニューを作成する方法について説明します。

参考：Flutter公式 Add a Drawer to a screen

ドロワーメニューとは？

ハンバーガーメニューとも呼ばれるメニューの一種で、画像のように画面の左右から表示されるようなものです。ドロワーは「引き出し」を意味し、引き出しのようにメニューが表示されるからこのように呼ばれていると思われます。

ドロワーの使い方

Scaffoldを作成する

Scaffoldは、Android StudioでFlutterアプリのプロジェクトを作成すると自動生成されているものになります。マテリアルデザインのUIコンポーネントを構成する足場となるものです（翻訳そのままですが）。

ドロワー（drawer） を追加する

タイトルの通りですが、drawerを定義します。

Scaffold(
  drawer: Drawer(
    child: // ドロワーメニューの中身は次のステップで作成します
  ),
);

ドロワーメニューに項目を追加する

ドロワーメニュー自体は作成できたので、次は項目（メニューの中身）を作成します。今回はListViewを使って項目を表示する形になります。代わりにColumnを使うことも可能ですが、ListViewのほうがスクロールが自動で生成されたりするため便利です。

項目がタップされた際のイベントを検出し、アプリの画面を更新するなどを行うなどしましょう。この際、ドロワーメニューが閉じられるようにすることも忘れないようにしましょう。

Drawer(
  child: ListView(
    // ListViewからパディングを除く
    padding: EdgeInsets.zero,
    children: [
      const DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
        child: Text('ドロワーのヘッダー'),
      ),
      ListTile(
        title: const Text('アイテム1'),
        onTap: () {
          // アイテム1がタップされた際に呼ばれる
          Navigator.pop(context); // ドロワーメニューを閉じる
        },
      ),
      ListTile(
        title: const Text('アイテム 2'),
        onTap: () {
          // アイテム2がタップされた際に呼ばれる
          Navigator.pop(context); // ドロワーメニューを閉じる
       },
      ),
    ],
  ),
);

実際の見た目

公式にあるDartPadのサンプルを動かしてみると実際の見た目を確認できます。

画像のようにメニューが表示され、アイテムをクリックするとメニューが閉じられるようになります。