showModalBottomSheet の使い方

showModalBottomSheet の使い方

Flutter でモーダルを表示させるための関数です。

このエントリーをはてなブックマークに追加

Modal Bottom Sheetは画面の下から出てきて、ユーザに何かアクションを促します。この時にアプリの他の部分を触るとModal Bottom Sheetは閉じてしまいます。

例えば、画像をアップロードする時にカメラを起動するかカメラロールから選択するかをユーザに選ばせる時に使います。

Widgetを返り値にできるので、選択だけではなくユーザに何か入力を促すこともできます。

使い方

FloatingActionButtonをタップするとカメラとカメラロールのどちらかを選択させるようにするには次のように書きます。

showModalBottomSheet<void>(context: context, builder: (BuildContext context) {
  return Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      ListTile(
        leading: Icon(Icons.photo_library),
        title: Text(Strings.of(context).gallery),
        onTap: onTapGallery,
      ),
      ListTile(
        leading: Icon(Icons.camera_alt),
        title: Text(Strings.of(context).camera),
        onTap: onTapCamera,
      ),
    ],
  );
});

onTapGalleryonTapCameraで写真を選ぶときはimage_pickerを使うと良いでしょう。

Flutter 公式ドキュメント

showModalBottomSheet<T> function

このエントリーをはてなブックマークに追加