FlutterFlowならサイドメニューもあっという間に作れます。今回はDrawerを使ったサイドメニューの作り方を解説します。
手順
Drawerの設置
- ホーム画面でEndDrawerを追加します。
- 以下のような形でサイドメニューが追加されました。EndDrawerだと以下の動画のように右から出てきます。
Drawerだと左側から出てきます。 - 横幅もWidthを変えれば自由に変更できます。
これでほぼ完了です。ハンバーガーボタン（？）み右上に自動的に設置されています。
メニューの作成
- あとはDrawer内に適当にメニューを追加していってください。
- 右上にicon buttonで×を置いてそこを押すとDrawerを閉じるようにしておきます。
- 以下のようにClose Drawersをアクションで設定すると、Drawerを閉じることが出来ます。
動作確認
はい、こんな感じで動きます。
補足とか
- 作成したDrawerをテンプレートにすることで他のページでも使いまわせます。ただ、2024/5時点ではコンポーネントにできなかったので、一か所で修正したらすべてのページに反映することはできませんでした。
やり方知っている人がいれば教えてください。 - 別のやり方としてコンポーネントを使ってサイドメニューを表示するやり方もあります。こちらだと、ベースとなるコンポーネントを修正するとすべて変更できます。
別途、こちらも紹介しますね。
まとめ
サイドメニューもあっという間に作れます。ほんと便利な機能が揃っているFlutterFlowですね！
株式会社Spovisorではノーコード・ローコードツールを使ったシステム開発、アプリ開発を実施しています。
要件定義から伴走して支援し、安価・スピーディー・柔軟な開発を行います。無料でご相談もお受けしております。