今回はBottom Sheetを使ったサイドメニューの作り方について説明します。Drawerを使ったサイドメニューの作り方も説明していますのでこちらのブログも参照ください。
ゴールイメージ
以下の動画のようにメニューボタンを押すとサイドメニューが表示されるようにします。
（サイドメニューといいつつ、下から出てきて画面全体を覆っていますが、、）
コンポーネントでサイドメニューを作ることでどのページにも導入しやすいようにします。
実装手順
コンポーネントの作成
- Add Page, Component or Flowからコンポーネントを追加します。
- いい感じのコンポーネントを選びます。”Side Nav”というサイドバーに最適なものもあります（私はどうもうまく動かなかったのでここでは別のコンポーネントを使っています）。
- コンポーネントを好みの内容に修正します。
右上に×のアイコンを配置し、アクションでBottom Sheet Dismissを設定するのをお勧めします。サイドバーが表示された際に×を押すとサイドバーが閉じます。
画面上へのサイドバーの設置
- 以下のようにAppBarにIconButtonを設置します。Iconはメニューマークにしておきます。
- メニューマークを押した際のアクションは先ほど作成したコンポーネント「Sidemenu」を開くようにしています。
はい、これで完成です。必要なページにコンポーネント化したサイドメニューを設置できます。
さらに楽な方法はメニューボタンをコンポーネント化して各ページに配置すればもっと楽にサイドメニューを各ページに配置できます。ちょっと見にくいですが、サイドメニューを表示するアクションまで含めてコンポーネント化しています。
まとめ
今回はBottom Sheetを使ったサイドメニューの実装方法を説明しました。頻繁に利用するものはコンポーネント化することで再利用が可能になります。
うまく使って爆速開発しましょう。
株式会社Spovisorではノーコード・ローコードツールを使ったシステム開発、アプリ開発を実施しています。
要件定義から伴走して支援し、安価・スピーディー・柔軟な開発を行います。無料でご相談もお受けしております。