'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

Solution 1:^[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

Solution 2:^[2]

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(...

Solution 3:^[3]

You need to wrap everything in a SingleChildScrollView and set the reverse to true.

SingleChildScrollView(
   reverse: true,
   child: Container(),
);

Just that worked for me!

Solution 4:^[4]

I had a similar problem. I try all solution, but didn't work. Finally I removed

<item name="android:windowFullscreen">true</item>

from my styles.xml file in android folder, and fix the problem.

Solution 5:^[5]

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.

Solution 6:^[6]

Set resizeToAvoidBottomInset to false inside your Scaffold Widget.

Note that resizeToAvoidBottomPadding will be deprecated.

Scaffold( resizeToAvoidBottomInset: false, ...)

Solution 7:^[7]

Too add to the commonly accepted answers here which is

body: SingleChildScrollView(
          reverse: true,
          child: Container(
              child: Padding(
            padding: EdgeInsets.only(bottom: bottom),
            child: Stack(
              fit: StackFit.loose,
              children: <Widget>[

I added a thing to the bottom inset to prevent it from going too high.

    var bottom = MediaQuery.of(context).viewInsets.bottom;
bottom = max(min(bottom, 80), 0);

Solution 8:^[8]

I use form elements in modal_bottom_sheet plugin. I solved it by just adding the following code to SingleChildScrollView.

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

Solution 9:^[9]

What worked for me was combining the docs with tips over here. It uses, LayoutBuilder, SingleChildScrollView, Padding (with bottom hack) and finally, ConstrainedBox (to use Expanded). By combining these It works with Expanded widgets inside Columns.

The docs (from where LayoutBuilder comes): https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

Structure

 return Scaffold(
      resizeToAvoidBottomInset: false,
      resizeToAvoidBottomPadding: false,`

body: SafeArea(
        child: Container(
          child: LayoutBuilder(builder:
              (BuildContext context, BoxConstraints viewportConstraints) {
            return SingleChildScrollView(
              reverse: true,
              child: Padding(
                padding: EdgeInsets.only(bottom: bottom),
                child: ConstrainedBox(
                  constraints: BoxConstraints(
                      minHeight: viewportConstraints.maxHeight,
                      maxHeight: viewportConstraints.maxHeight),
                  child: Column(

Solution 10:^[10]

SingleChildScrollView does solve the problem while the resizeToAvoidBottomInset is set to true, while setting it to false would be a not recommended solution. Let me explain why:

When user presses the TextField, usually a virtual keyboard will popup and takes up a large portion of the bottom space on the screen. In such case, problem would occur, if the TextField is near said bottom, it will be covered by the keyboard (resizeToAvoid... set to false), and user will be unable to see what they've typed in; if there are other widgets below the TextField (when resizeToAvoid is true, e.g. buttons in the same Column with TextField), there will be overflow because there is no space for them to show on the remaining viewport.

Speaking from a user's perspective, what we want is:

TextField who gets focus is always visible.
No bottom overflow and bugged graphics.

However, such description is not technical, it does not tell us how exactly do we implement it. What we actually want is, make the whole layout scrollable, and allow Scaffold to resize. When the viewport resizes, anything below the focused TextField scrolls away to the invisible bottom, and the TextField itself snaps to the keyboard.That's why SingleChildScrollView + resize = true is what we want.

Solution 11:^[11]

In my case, there was were important to use only small padding, otherwise when open the keyboard it makes a big mess.

Padding(padding: EdgeInsets.only(bottom: 20)

Check my solution:

child: Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,
    body: Container(
      color: Colors.black,
       child: SingleChildScrollView(
         reverse: true,
          child: Padding(
           padding: EdgeInsets.only(bottom: 20),
            child: Container(
              child: ReservationCard(
                ),
                  ),
                   ),
                    ),
                     )

Solution 12:^[12]

To have a centered content first on build method I added this:

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

and return this:

return GestureDetector(
      onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
      child: Scaffold(
        resizeToAvoidBottomInset: false,
        body: Stack(
          fit: StackFit.expand,
          children: [
            ///Content
            Align(
              alignment: Alignment.center,
              child: SingleChildScrollView(
                reverse: true,
                child: Padding(
                  padding: EdgeInsets.only(bottom: bottom),
                  child: Column(
                    children: [
                      MyContent()
                    ],
                  ),
                ),
              ),
            ),
            ///Button
            Align(
              alignment: Alignment.bottomCenter,
              child: MyBottomButton()
            )
          ],
        ),
      ),
    );

And it works very well with keyboard flow

Solution 13:^[13]

For Android, check for windowSoftInputMode. (AndroidManifest.xml)

android:windowSoftInputMode="adjustResize"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Mahesh Jamdade
Solution 2	Chris
Solution 3	allentiology
Solution 4	Guillermo De La Cruz
Solution 5	Damiano Magrini
Solution 6	Jun
Solution 7	David van Dugteren
Solution 8	serkanayaz
Solution 9	Boken
Solution 10	Linkfting
Solution 11	Arvis Iljins
Solution 12	Ãlvaro AgÃ¼ero
Solution 13	Lauro Oliveira

'Flutter TextFormField hidden by keyboard

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]