FlutterFlowならサイドメニューもあっという間に作れます。今回はDrawerを使ったサイドメニューの作り方を解説します。
手順
Drawerの設置
- ホーム画面でEndDrawerを追加します。

- 以下のような形でサイドメニューが追加されました。EndDrawerだと以下の動画のように右から出てきます。
Drawerだと左側から出てきます。 - 横幅もWidthを変えれば自由に変更できます。
これでほぼ完了です。ハンバーガーボタン(?)み右上に自動的に設置されています。
メニューの作成
- あとはDrawer内に適当にメニューを追加していってください。
- 右上にicon buttonで×を置いてそこを押すとDrawerを閉じるようにしておきます。
- 以下のようにClose Drawersをアクションで設定すると、Drawerを閉じることが出来ます。


動作確認
はい、こんな感じで動きます。
補足とか
- 作成したDrawerをテンプレートにすることで他のページでも使いまわせます。ただ、2024/5時点ではコンポーネントにできなかったので、一か所で修正したらすべてのページに反映することはできませんでした。
やり方知っている人がいれば教えてください。 - 別のやり方としてコンポーネントを使ってサイドメニューを表示するやり方もあります。こちらだと、ベースとなるコンポーネントを修正するとすべて変更できます。
別途、こちらも紹介しますね。
まとめ
サイドメニューもあっという間に作れます。ほんと便利な機能が揃っているFlutterFlowですね!