Flutter | 画面下から上がってくるダイアログ BottomSheet

Bottom Sheetとは？

FlutterのBottom Sheetは、画面の下から上に向かって現れるポップアップで、追加の情報や作業を表示するために使用されます。
通常、画面全体を覆わず、現在の画面の一部だけを覆います。ユーザーに一時的な作業や選択肢を提供するのに便利です。

showModalBottomSheet 使用例

例として、FloatingActionButtonを利用します。
FloatingActionButtonは主要なアクションを実行するために使用され、ユーザーがよく使用する機能に素早いアクセスを提供します。
このボタンが押されると、showModalBottomSheetを呼び出してユーザーに追加のオプションを提供するように実装してみましょう。

コード解説

1. FloatingActionButtonを押すと、_RenderFloatingActionButtonクラスのonPressedコールバックが呼び出されます。

2. showModalBottomSheet関数が呼び出され、BottomSheetが画面に表示されます。

BottomSheetを下にドラッグして下げるか、BottomSheetの外側をタップすると、シートが消えます。

締めくくり

FlutterでFloatingActionButtonとshowModalBottomSheetを使用して簡単にBottom Sheetを作成しました。これを活用して、ユーザーに直感的なインターフェースを提供して選択肢や一時的な作業に効果的に使用できます。