![見出し画像](https://assets.st-note.com/production/uploads/images/132826626/rectangle_large_type_2_e0c888c3533c3fb1000bac88f406f8d1.png?width=800)
Flutter | 画面下から上がってくるダイアログ BottomSheet
Bottom Sheetとは?
FlutterのBottom Sheetは、画面の下から上に向かって現れるポップアップで、追加の情報や作業を表示するために使用されます。
通常、画面全体を覆わず、現在の画面の一部だけを覆います。ユーザーに一時的な作業や選択肢を提供するのに便利です。
showModalBottomSheet 使用例
例として、FloatingActionButtonを利用します。
FloatingActionButtonは主要なアクションを実行するために使用され、ユーザーがよく使用する機能に素早いアクセスを提供します。
このボタンが押されると、showModalBottomSheetを呼び出してユーザーに追加のオプションを提供するように実装してみましょう。
コード解説
FloatingActionButtonを押すと、_RenderFloatingActionButtonクラスのonPressedコールバックが呼び出されます。
showModalBottomSheet関数が呼び出され、BottomSheetが画面に表示されます。
![](https://assets.st-note.com/img/1709291568656-gDJQsMprwY.png?width=800)
BottomSheetを下にドラッグして下げるか、BottomSheetの外側をタップすると、シートが消えます。
締めくくり
FlutterでFloatingActionButtonとshowModalBottomSheetを使用して簡単にBottom Sheetを作成しました。これを活用して、ユーザーに直感的なインターフェースを提供して選択肢や一時的な作業に効果的に使用できます。
この記事が気に入ったらサポートをしてみませんか?