【FlutterFlow】メニューを画面下からスマートに表示させる：Bottom Sheet
どうも、こんにちは～。FlutterFlowの使い方を身に付けて、かっこいいクールなアプリ？を作れるようになろう！ということで、ブログを書いております。
今回は、Bottom Sheetのご紹介でございます。「Bottom Sheetって何よ？」と思う方もいると思います（3日前の私です！）。ざっくり言えば、Bottom Sheetとは、スマホ画面の下からニョキっと出てくぐる小窓のことです。
いや、こういうの使ってみたいですね～。どんな目的で使うのか、どう設定するのか、興味深々でございます。公式資料を参考にしますよ。
ということで、BottomSheet、行ってましょう！
BottomSheetって何だろう？
まずは、Bottom Sheetって何のために使うの？を考えましょう。
端的に言えば、「別のページを作らずに、ユーザーに何かしらのアクションを促し、実行させる」ためです。別のページを作らず、ページを移動させないことがミソですね。
ユーザがワイプなどのアクション一つで表示・非表示できたりします。
Bottom Sheetのテンプレートが充実！
では、早速そのアクションをつけてみよう！と思ったらウイジェットがないですね。ウィジェットを追加しなくては！？
いや、BottomSheetって複数のウィジェットでできているはずだから、コンポーネントですね。コンポーネントを追加しましょう！
サイドメニューでコンポーネントを選び新規追加を押します。
ブランクのコンポーネントからスタートしてもいいです。ところが、Bottom Sheetsというテンプレートのカテゴリーがあるじゃないですか～。これを利用しませんか？
いっぱいあるぞ。目移りするな～。
まあ、学習用ということで、トップに現れる下の２つのテンプレートから、コンポーネントを作っておきます。
はい、２つコンポーネントを追加できました～。
これでアクション追加する下準備はOKですね。
Bottom Sheetのサイズを変えたい
ここで、ちょっとしたTipsです。このボトムシートのサイズを変えたくなりますね。
上のようにハンドルで設定変更できます。便利やね。Ctrl +Zで元に戻せなかったので、設定値は事前に確認してからの方がいいですよ…。
はい、本日はここまで～。今回は、Bottom Sheetとは何かを紹介し、そしてBottom Sheetコンポーネントを追加してみました～。でも、肝心・かなめは、アクションですよね。次回にアクションをやりましょう。
では～。
この記事が気に入ったらサポートをしてみませんか？