Flutter 下から選択ボタン表示(showModalBottomSheet)

今回は下から出てくる画像のようなボタン(showModalBottomSheet)を作成していきます。

記述コード

void bottomSheet(BuildContext context) {
  showModalBottomSheet<void>(
      context: context,
      builder: (BuildContext context) {
        return SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ListTile(
                leading: const Icon(Icons.photo),
                title: const Text('写真'),
                onTap: () {},
              ),
              ListTile(
                  leading: const Icon(Icons.camera),
                  title: const Text('カメラ'),
                  onTap: () {}
              ),
            ],
          ),
        );
      });
}

SingleChildScrollViewで選択肢が増加した場合スクロールできるようにしています。
leadingでアイコン部分の選択、titleでListTile に表示するテキストを書いています。
onTapでは今回は空欄ですが、タップ時の動きを追加することが可能です。

記事には書いていませんが、showModalBottomSheetはthenで書く方式とasync,awaitを使った方式とがあるようです。




お疲れ様でした。
ここまでご覧頂きありがとうございます。