[Flutter]ModalBottomSheet(モーダルボトムシート)のTextField(テキストフィールド)をキーボード(keyboard)で上(top)に移動(move)するには？

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

ModalBottomSheet内で使うTextFieldを、キーボードを表示したときに上に移動させる方法を紹介します。

方法

TextFieldをキーボードで上に押し上げるには、PaddingとMediaQueryを使います。

まず、 TextFieldをPaddingのchildに指定します。

そして、Paddingの引数「padding」に、「EgdeInsets.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: TextField(),
    );
  },
);

これでキーボードを表示したときにTextFieldを押し上げることが出来ます。

以下は、使用例です。

使用例

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