[Flutter]キーボードでModalBottomSheetを上に移動させるには？

Flutter

2021.11.06

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

キーボードを開いたときにModalBottomSheetが上に移動するようにする方法を紹介します。

方法

キーボードを開いたときにModalBottomSheetが上に移動するようにするには、PaddingとMediaQueryを使います。

まず、モーダルシートとして表示するウェジェットを、Paddingのchildに指定します。

次に、Paddigの引数「padding」にEdgeInsets.only(bottom : MediaQuery.of(context).viewInsets.bottom)を指定します。

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(
        bottom: MediaQuery.of(context).viewInsets.bottom,
      ),
      child: BottomSheet(),
     );
  },
);

これでキーボードの表示でウェジェットが上に行くようになります。

最後に、showModalBottomSheetの引数「isScrollControlled」に「true」を指定します。

showModalBottomSheet(
  isScrollControlled: true,
  context: context,
  builder: (BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(
        bottom: MediaQuery.of(context).viewInsets.bottom,
      ),
      child: BottomSheet(),
    );
  },
);

これでModalBottomSheet自体が上に移動するようになります。

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
              isScrollControlled: true,
              context: context,
              builder: (BuildContext context) {
                return Padding(
                  padding: EdgeInsets.only(
                    bottom: MediaQuery.of(context).viewInsets.bottom,
                  ),
                  child: Container(
                    height: 500,
                    width: double.infinity,
                    color: Colors.white,
                    child: TextField(
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                      ),
                    ),
                    alignment: Alignment.center,
                  ),
                );
              },
            );
          },
          child: Text('Show'),
        ),
      ),
    );
  }