【Flutter】showModalBottomSheetでiOS風のUIを実現する

はじめに

Flutterにはマテリアルデザインのボトムシート(画面下端から上端にスライドして表示されるシート)を簡単に実装するshowModalBottomSheetというメソッドが用意してあります。

本記事ではshowModalBottomSheetを使用して、シートの角の丸いiOS風UIにカスタムする方法を解説したいと思います。

目標

showModalBottomSheetとボトムシートをカスタムし、iOS風のUIを実現する。

実装

サンプルを実際に動かした様子は次のとおりです。
画面中央の青いボタンを押下すると、画面下部からシートが出現します。

サンプルコードは次の通りになります。順番に解説していきます。

サンプルコード

class _MyHomePageState extends State<MyHomePage> {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Center(
       child: GestureDetector(
         onTap: () async {
           await showModalBottomSheet<void>(
               context: context,
               backgroundColor: Colors.transparent,
               isScrollControlled: true,
               enableDrag: true,
               barrierColor: Colors.black.withOpacity(0.5),
               builder: (context) {
                 return _BottomSheet();
               });
         },
         child: Container(
           padding: EdgeInsets.all(5),
           decoration: BoxDecoration(
               color: Colors.blue, borderRadius: BorderRadius.circular(4)),
           child: Text(
             'showModalBottomSheet',
             style: TextStyle(color: Colors.white),
           ),
         ),
       ),
     ),
   );
 }
}

class _BottomSheet extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return Container(
     height: double.infinity,
     decoration: BoxDecoration(
       color: Colors.white,
       borderRadius: BorderRadius.only(
         topLeft: Radius.circular(10),
         topRight: Radius.circular(10),
       ),
     ),
     margin: EdgeInsets.only(top: 80),
     child: Center(
       child: Text('modal bottom sheet'),
     ),
   );
 }
}

showModalBottomSheetの実行

ボトムシートを表示したい動作のコールバックに、showModalBottomSheetを設定します。
showModalBottomSheetはシートが閉じられる際に受け渡される、任意のresultの型を指定することができます。
今回のサンプルでは特にシートから結果が帰らないのでvoidとしています。
またこのケースではawaitする必要もありません。
詳しくはshowModalBottomSheetについての公式ドキュメントをご覧ください。

showModalBottomSheetのパラメータ

showModalBottomSheetでは多くのパラメータを設定できます。
そのうち、サンプルで使用しているものについて解説します。

• context
  BuildContextです。必須の引数となります。
  contextについてはここでは多くを解説しませんが、大雑把に表現すると、ツリーのどこにそのウィジェットが配置されるべきかの情報をもつオブジェクトという理解で良いかと思います。

• builder
  必須の引数です。
  showModalBottomSheetによって表示するウィジェットのビルダーになります。

• backgroundColor
  シート表示時、画面上で、builderのコールバックが返却するウィジェット以外の領域を塗りつぶす色の指定になります。
  今回シート外の領域は透明であって欲しいのでColors.transparentを指定します。
  注意したいのが次に説明するbarrierColorとの違いで、backgroundColorが指定するのはあくまでshowModalBottomSheetによって表示される一枚のウィジェットのbuilderによって生成されるウィジェット以外の領域ということです。
  barrierColorが指定するのはshowModalBottomSheetによって表示されるウィジェットの外側の領域のカラーになります。
  詳しくは下に示す図をご覧ください。スワイプでシートを押し下げた様子を示しています。黄色の部分がbackgroundColorになります。

• barrierColor
  showModalBottomSheetによって表示されるウィジェットの外側の領域のカラーです。
  通常のUIでは下の画面が見えるよう、透過がかけられたカラーになるかと思います。

• isScrollControlled
  シートがスクローラブルなウィジェットの時、シートをスクロールのためのドラッグ可能にする設定値です。
  シートの中でListViewウィジェットなどを使用しているときtrueに設定します。

• enableDrag
  表示したシートを指でスワイプ操作できるかどうかのbool値です。

ボトムシート

シートとして表示したいウィジェットをbuilderのコールバック内で返却します。
任意のウィジェットで構いませんが、サンプルのようにするとiOS風のシート上端の角が丸いシートが実現できます。
topとのマージンは、画面上端とシート間の隙間の大きさとなります。
decorationで上端の角のみBorderRadiusを指定することで、シート上端の角に丸みを持たせています。
サンプルでは対処しておりませんが、必要に応じて、SafeAreaの対応を行った方が良いかと思います。

おわりに

本記事ではshowModalBottomSheetの基本的な使用法をご紹介しました。
次回はshowModalBottomSheetでresultが返って来るケースの利用法を解説したいと思います。