[解決済み] テキストフィールド(オートフォーカスがtrue)を持つボトムシートをキーボードで移動させるには？

質問

テキストフィールドを持つボトムシートを作り、オートフォーカスをtrueに設定してキーボードがポップアップするようにしようとしています。しかし、ボトムシートはキーボードに重なってしまいます。ボトムシートをキーボードの上に移動させる方法はありますか？

Padding(
  padding:
      EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
  child: Column(children: <Widget>[
    TextField(
      autofocus: true,
      decoration: InputDecoration(hintText: 'Title'),
    ),
    TextField(
      decoration: InputDecoration(hintText: 'Details!'),
      keyboardType: TextInputType.multiline,
      maxLines: 4,
    ),
    TextField(
      decoration: InputDecoration(hintText: 'Additional details!'),
      keyboardType: TextInputType.multiline,
      maxLines: 4,
    ),]);

どのように解決するのですか？

追加 isScrollControlled = true に BottomSheetDialog に変更することで、下のシートが必要な高さいっぱいになり、より確実に TextField がキーボードで覆われないようにするためです。

キーボードのパディングを MediaQuery.of(context).viewInsets.bottom

ノート

もし、あなたの BottomSheetModel が Column を追加することを確認します。 mainAxisSize: MainAxisSize.min, を追加しないと、シートが画面全体を覆ってしまいます。

例

 showModalBottomSheet(
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(25.0))),
    backgroundColor: Colors.black,
    context: context,
    isScrollControlled: true,
    builder: (context) => Padding(
      padding: const EdgeInsets.symmetric(horizontal:18 ),
      child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 12.0),
                child: Text('Enter your address',
                    style: TextStyles.textBody2),
              ),
              SizedBox(
                height: 8.0,
              ),
              Padding(
                padding: EdgeInsets.only(
                    bottom: MediaQuery.of(context).viewInsets.bottom),
                child: TextField(
                  decoration: InputDecoration(
                    hintText: 'adddrss'
                  ),
                  autofocus: true,
                  controller: _newMediaLinkAddressController,
                ),
              ),

              SizedBox(height: 10),
            ],
          ),
    ));

ご注意ください。

shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(25.0))),

必須ではありません。ただ、丸みを帯びた底面のシートを作っているだけです。

padding: MediaQuery.of(context).viewInsets

アップデイト Flutter 2.2がまた変更を壊してしまった！" キーボードがbottomsheetに重ならないように、もう一度bottom paddingを与える必要があります。