web-dev-qa-db-ja.com

テキストフィールドを持つキーボードと一緒にボトムシートを移動するにはどうすればいいですか？

テキストフィールドがあり、オートフォーカスが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,
    ),]);
dartflutterflutter-layout
15
Manjunath Rao

異なるソリューションを組み合わせた後、私はこれを得ました：

フルスクリーンにしたくない場合Paddingを使用したくない場合

  showModalBottomSheet(
      context: context,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      enableDrag: true,
      isDismissible: true,
      useRootNavigator: true,
      builder: (BuildContext ctx) {
        return Scaffold( // use CupertinoPageScaffold for iOS
          backgroundColor: Colors.transparent,
          resizeToAvoidBottomInset: true, // important
          body: SingleChildScrollView(
            child: Form(
              child: Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    TextFormField(),
                    TextFormField(),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );

on Flutter（チャネルマスター、v1.15.3-pre.37、Mac OS X 10.15.2 19C57、ロケールen-US）

0
tewshi

これを試して

私の解決策は

  • _isScrollControlled: true,_を使用します
  • パディングを追加padding: EdgeInsets.only( bottom: MediaQuery.of(context).viewInsets.bottom)
  • レイアウトをSingleChildScrollViewで囲みます

サンプルコード

_Future<void> future = showModalBottomSheet(
    context: context,
    isDismissible: true,
    isScrollControlled: true,
    backgroundColor: Colors.white.withOpacity(0.2),
    builder: (context) => SingleChildScrollView(
          child: GestureDetector(
              child: Padding(
            padding: EdgeInsets.only(
                bottom: MediaQuery.of(context).viewInsets.bottom),
            child: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              child: Column(
                children: <Widget>[
                 // add your widget here
                ],
              ),
            ),
          )),
        ));
_
0
Nilesh Rathod

FormをScaffoldウィジェットでラップしてから、TextFormFieldをSingleChildScrollViewでラップします。


 return Container(
          height: screenHeight * .66,
          child: Scaffold(
             body: Form(
               key: _form,
               child: SingleChildScrollView(
                 child:TextFormField()
               )
              )
             )
           )
0
MFC creations