[Flutter]画面(screen)の下(bottom)からシート(sheet)を表示(show)するには？

どうも、ちょげ(@chogetarou)です。

画面の下からシートを表示する方法を紹介します。

方法

画面の下からシートを表示するには、showBottomSheetを使います。

まず、画面の下からシートを表示したいタイミングで、showBottomSheetを呼び出します。

次に、showBottomSheetの第１引数「context」に「context」、第２引数「builder」に「(BuildContext context){}」を指定します。

//ボタンのタップで呼び出す場合
ElevatedButton(
  onPressed: () {

    showBottomSheet(
      context: context,
      builder: (BuildContext context) {},
    );

  },
  child: Text('Show'),
),

最後に、builderに指定した関数で、シートとして表示したいウェジェットをreturnします。

ElevatedButton(
  onPressed: () {
    showBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Widget();
      },
    );
  },
  child: Text('Show'),
),

これで画面の下からシートを表示することが出来ます。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showBottomSheet(
              context: context,
              builder: (BuildContext context) {
                return Container(
                  child: Text('Bottom Sheet'),
                  height: 500,
                  alignment: Alignment.center,
                  width: double.infinity,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey,
                        blurRadius: 20,
                      )
                    ],
                  ),
                );
              },
            );
          },
          child: Text('Show'),
        ),
      ),
    );
  }