Flutter TextFormField hidden by keyboard

问题

NOTE: Im using Navigator.of(context).push to push ModalRoute,

Hi I have page with ModalRoute with TextFormField in the body, but when keyboard show up, the input is being hide by keyboard, how to fix this?

return Container(
      child: ListView(
          children: <Widget>[
            //other widget
            SizedBox(height: _qtyAnimation.value),
            Row(
              children: <Widget>[
                Expanded(
                  child: Text(
                    "Jumlah",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                ),
                SizedBox(
                  width: 145.0,
                  child: TextFormField(
                    focusNode: _qtyFocusNode,
                    controller: qty,
                    keyboardType: TextInputType.number,
                    textAlign: TextAlign.center,
                    decoration: InputDecoration(
                      contentPadding: EdgeInsets.all(0.0),
                      prefixIcon: IconButton(
                        icon: Icon(Icons.remove),
                        onPressed: () {},
                      ),
                      border: OutlineInputBorder(
                        borderSide:
                            BorderSide(color: Colors.grey, width: 0.1),
                      ),
                      suffixIcon: IconButton(
                        icon: Icon(Icons.add),
                        onPressed: () {},
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ],
    );

thats my code, i try with focusnode and more, still same result please help me

回答1:

thanks solve my problem with this padding on bottom of textfield

    Padding(
             padding: EdgeInsets.only(
             bottom: MediaQuery.of(context).viewInsets.bottom));

and mare reverse list

回答2:

There are few methods for this (as of Dec 3^rd 2018):

You can read this for a better solution: When i select a Textfield the keyboard moves over it.

Inside Scaffold() add: resizeToAvoidBottomPadding: false,.

You can also wrap your TextWidget with SingleChildScrollView(). This will allow you to scroll whenever the keyboard is shown.

回答3:

This worked for me...

First add this

final bottom = MediaQuery.of(context).viewInsets.bottom;

Then use a SingleChildScrollView() to wrap around the main widget (whatever you're using, e.g. Column, ListView, etc) like this...

You need "reverse: true"

Widget build{
return Scaffold(
body: SingleChildScrollView(
reverse: true;
child: Container(...

You also need these two lines of code for the Scaffold as well..

return Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,
body: SingleChildScrollView(...

and finally, reference the 'bottom' for your EdgeInsets..

body: SingleChildScrollView(
reverse: true,
child: Padding(
padding: EdgeInsets.only(bottom: bottom),
child: Container(...

来源：https://stackoverflow.com/questions/53586892/flutter-textformfield-hidden-by-keyboard

标签

dart

Flutter

flutter-layout