【Flutter】 showModalBottomSheetの高さを比率で指定する

はじめに

showModalBottomSheetはデフォルトで50%くらいの高さで表示されます。

それを👇のように80%の高さで表示させます！

前提

画面サイズに対する比率で高さを指定するには👆の記事を参考にsize_config.dartを作成しておいてください

showModalBottomSheetを用意

import '../../widgets/comment/view_comments.dart';

// 省略

         Padding(
              padding: EdgeInsets.symmetric(vertical: 20),
              child: Center(
                child: IconButton(
                  icon: Icon(
                    Icons.comment,
                    size: 40,
                  ),
                  onPressed: () => showModalBottomSheet(
                    isScrollControlled: true,
                    shape: RoundedRectangleBorder(
                        borderRadius:
                            BorderRadius.vertical(top: Radius.circular(20))),
                    context: context,
                     // showModalBottomSheetで表示される中身
                    builder: (context) => ViewComments(),
                  ),
                ),
              ),
            ),

showModalBottomSheetの中身

view_comments.dart

import '../../config/size_config.dart';

class ViewComments extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Container(
       // 80%の高さで表示させる
      height: SizeConfig.blockSizeVertical * 80,
       // 省略
   );
 }
}

最後に

showModalBottomSheetの高さを変更する方法は👇のDraggableScrollableSheetを使う場合が一般的かもしれません。

しかしながら、DraggableScrollableSheetを使うと角を丸くしたりmodal外をタップでdismissさせたりと言った処理が効かなくなり、ちょっと一工夫が必要になるっぽいのでめんどくさくてやめました・・・w

DraggableScrollableSheetを使う場合は👇が参考になるかと！