Flutter TextFormField hidden by keyboard

Question

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

You can use FocusNode to do that: https://stackoverflow.com/questions/50736571/when-i-select-a-textfield-the-keyboard-moves-over-it — Blasanka, Dec 03 '18 at 05:43
Possible duplicate of [How to hide on screen keyboard?](https://stackoverflow.com/questions/50736571/when-i-select-a-textfield-the-keyboard-moves-over-it) — Blasanka, Dec 03 '18 at 05:44
My solution [here at this thread](https://stackoverflow.com/a/68857184/8138591) solves this problem. It's very short and simple, no animation required. — Son Nguyen, Aug 20 '21 at 05:10

score 90 · Accepted Answer · edited Jul 22 '19 at 02:53

90

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

edited Jul 22 '19 at 02:53

Mahesh Jamdade

17,235
8
110
131

answered Dec 04 '18 at 04:32

RIFAL

3,207
4
17
29

Great solution! :) – madlick71 Feb 03 '21 at 13:37
Great solution indeed! Thx. – Rodolfo Gonçalves Mar 23 '21 at 00:11

score 67 · Answer 2 · answered Oct 02 '19 at 21:59

67

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

answered Oct 02 '19 at 21:59

Chris

1,720
16
35

1

`padding: EdgeInsets.only(bottom: bottom)` throw an error: bottom must be a constant... how do you fix this? – Fabio Magarelli Jan 20 '20 at 18:40
1

Fabio you add`'final bottom = MediaQuery.of(context).viewInsets.bottom;` after `Widget _body(WriteReviewModel model) {` – Haris Feb 02 '20 at 02:27
This is the only thing that worked for me when composing a expanded multiline textfield in the bottom o a column, with ConstrainedBox and SingleChildScrollView. – jeanadam Feb 20 '20 at 02:38
1

On applying the above solution: The TextFormField which is already above the keyboard on gaining the focus it moves upwards and is not visible in the screen. Ideally it should stays there only only the below screen TextFormField should scroll up – Chinmay Mourya Jul 18 '22 at 11:47

score 20 · Answer 3 · answered Dec 22 '20 at 10:24

20

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

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

Just that worked for me!

answered Dec 22 '20 at 10:24

allentiology

904
8
7

7

This is the simplest solution if your content does not scroll by default (without the keyboard showing up). Indeed if your content is larger than the screen height, it will always be scrolled to the bottom, even without keyboard. That may not be what you want. – Yann39 Jan 17 '21 at 11:24

score 12 · Answer 4 · answered May 18 '20 at 20:21

12

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.

answered May 18 '20 at 20:21

Guillermo De La Cruz

439
5
8

For me this is working in debug build, but in release build keyboard just coming up and hiding immediately, please confirm if this is the case for anyone? – Vamsi May 20 '20 at 08:22
1

No problem, it works fine both in debug and release. You must have another additional configuration that causes this. Try in clean project. – Guillermo De La Cruz May 20 '20 at 20:04

score 10 · Answer 5 · edited Jul 17 '19 at 01:52

10

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.

edited Jul 17 '19 at 01:52

Damiano Magrini

460
8
17

answered Dec 03 '18 at 05:51

Blasanka

21,001
12
102
104

1

not work for me, my textfield is inside row and sizebox – RIFAL Dec 03 '18 at 08:02
1

https://www.didierboelens.com/2018/04/hint-4-ensure-a-textfield-or-textformfield-is-visible-in-the-viewport-when-has-the-focus/ – Blasanka Dec 03 '18 at 15:01

score 4 · Answer 6 · answered Feb 11 '20 at 07:26

4

Set resizeToAvoidBottomInset to false inside your Scaffold Widget.

Note that resizeToAvoidBottomPadding will be deprecated.

Scaffold( resizeToAvoidBottomInset: false, ...)

answered Feb 11 '20 at 07:26

Jun

160
6

It took me way too long to learn about `resizeToAvoidBottomInset`. Every time I used a flex layout, my keyboards would break. It was awful. – Lewis Feb 11 '20 at 07:51

score 4 · Answer 7 · answered Nov 25 '20 at 09:06

4

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)

answered Nov 25 '20 at 09:06

serkanayaz

745
6
20

This did not change the issue for me – Petro Feb 01 '21 at 20:20

score 4 · Answer 8 · answered May 04 '21 at 07:01

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);

score 2 · Answer 9 · edited Mar 03 '20 at 06:56

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(

Hmm this case worked just out of the box on beta channel for me — Nickolay Savchenko, Mar 04 '20 at 18:00

score 1 · Answer 10 · answered Sep 03 '21 at 08:29

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.

score 1 · Answer 11 · answered Mar 30 '22 at 23:08

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

score 1 · Answer 12 · answered Feb 22 '23 at 18:10

1

It's simple, forget about those complicated answers. You just need to use the scrollPadding method that's available in TextFormField:

TextFormField(
      scrollPadding: const EdgeInsets.only(bottom: 200),
),

answered Feb 22 '23 at 18:10

Antomur

41
5

this is perfect – alexpfx Mar 19 '23 at 17:53

score 0 · Answer 13 · answered Mar 10 '21 at 05:51

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(
                ),
                  ),
                   ),
                    ),
                     )

score -1 · Answer 14 · answered Aug 25 '21 at 22:35

-1

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

android:windowSoftInputMode="adjustResize"

answered Aug 25 '21 at 22:35

Lauro Oliveira

2,362
1
18
12

Flutter TextFormField hidden by keyboard

14 Answers14

Linked

Related