Flutter Keyboard makes textfield hide

Question

I'm new to flutter. I've added a form with a text field and when I clicked the textfield and keyboard comes, the textfield goes up.

This is my code :

Widget build(BuildContext context) {

MediaQueryData mediaQuery = MediaQuery.of(context);
return new Scaffold(
  body:  new Container(
      color: Colors.purple,
      constraints: new BoxConstraints.expand(),
      padding: EdgeInsets.only(top: 10.0,left: 10.0,right: 10.0, bottom: mediaQuery.viewInsets.bottom, ),
      child: SingleChildScrollView(
        child: Container(
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  SizedBox(height: 12.0),
                  Text(
                    'What is your Business Name?',
                    style: TextStyle(fontSize: 24.0),
                  ),
                  AppForm(),
                ],
              ),
            padding: EdgeInsets.only(left: 10.0,right: 10.0, bottom: mediaQuery.viewInsets.bottom),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(30.0)),
              color: Colors.white,
                ),
              )
          )
      ),
    );
  }

This is the result without opening the keyboard: Image without keyboard

This is the image after opening the keyboard: Image after opening the keyboard

---

Here is my flutter doctor output.

Doctor summary (to see all details, run flutter doctor -v): [√] Flutter 
(Channel beta, v0.5.1, on Microsoft Windows [Version 10.0.17134.165], locale 
en-US) [√] Android toolchain - develop for Android devices (Android SDK 
28.0.0) [√] Android Studio (version 3.1) [!] VS Code, 64-bit edition (version 
1.25.1) [!] Connected devices ! No devices available ! Doctor found issues in 
2 categories.

any idea how to fix this?

Answer 1

Scaffold(
    resizeToAvoidBottomInset: true,
    // ...
    appBar: AppBar(
      // ...
    ),
)

Fixed problem textfield was hidden by keyboard

Answer 2

This answer is not specific the question above but may be useful to those who are still having issues with the keyboard covering the selected text field, no matter what they do. I got to this page while trying to resolve such an issue.

Prior to the problem I had been making some changes to try and improve my splash screen on app startup. As per someone's recommendation, I had included the following line in the <resources><style> section of the styles.xml file in the android/app/src/main/res/values folder

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

This had the unexpected effect of stopping any fields scrolling up in the main app when the keyboard is displayed. This might be obvious to some, but it wasn't to me.

Hope this info helps someone.

Answer 3

This was the case with me . You are definitely wrapping a scaffold inside another scaffold . there should be only one scaffold widget inside your flutter app i.e the main layout . Simple remove all the ancestor scaffolds you have and keep only one scaffold . dont wrap a scaffold into another scaffold .inspite of that you can wrap a scaffold inside a container .

Make sure in your main.dart file you are not doing this :-

✖✖

return Scaffold(
body : YourNewFileName(),
);

Inspite of the above code do this:- ✔✔

return YourNewFileName();

Answer 4

You can simply wrap the widget you want to never be hidden by the keyboard inside a padding, like follow :

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

Answer 5

resizeToAvoidBottomPadding is Deprecated use instead resizeToAvoidBottomInset: true

Answer 6

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

Removing above line from

android/app/src/main/res/values/styles.xml

made my app fixed to input field auto scroll upwards to come in view able on keyboards opens

thanks @GrahamD

Answer 7

You should add SingleChildScroolView into your Scaffold and add reverse: true into your SingleChildScroolView

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

Answer 8

If you use ScreenUtilInit package then maybe setting useInheritedMediaQuery: true in the constructor of ScreenUtilInit will help you. It helped me :)

Answer 9

Just cut and paste your body code in this -

SingleChildScrollView(
        child: Stack(
          children: <Widget>[
              // your body code 
           ],
         ),
       ),

had the same issue got the answer here

Answer 10

If you are using Scaffold than wrap the body with SingleChildScrollView

for Example like this:

...
return Scaffold(
body: SingleChildScrollView(
    child: Column(
      children: <Widget>[
        TextField(),
        TextField(),
        TextField(),
      ],
    ),
  ),
);
...

this was really a lifesaver for me. Now the scaffold will become scrollable.

Answer 11

resizeToAvoidBottomInset is true by default.

return Scaffold(
      resizeToAvoidBottomInset: false,
   );

I set it to false and it worked fine

Answer 12

Consider using scroll padding on the Textfield

return Scaffold(
  appBar: AppBar(
    title: Text("Demo SoftKeyboard"),
  ),
  body: SingleChildScrollView(
    child: Column(
      children: [
          TextField(
            scrollPadding: EdgeInsets.only(bottom:40), // THIS SHOULD SOLVE YOUR PROBLEM
        ),                
      ],
    ),
  ),
);

Answer 13

I also faced with this issue. This's my solution:

1/ Wrap the Column Widget (content of Dialog) inside the Padding Widget with property padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom,)

2/ Wrap all widgets above inside SingleChildScrollView

Below is full code for my Dialog:

Future<T?> showDialogLikeBorrowBook<T>(
 BuildContext context, {
 bool barrierDismissible = true,
 required String labelDialog,
 required String labelMainButton,
 required Widget contentDialog,
 required Function() onTap,
 }) async {
       return await showGeneralDialog(
       context: context,
       barrierLabel: "barrierLabel",
       barrierDismissible: barrierDismissible,
       barrierColor: Colors.black.withOpacity(0.4),
       transitionDuration: const Duration(milliseconds: 300),
       transitionBuilder: (_, anim1, __, child) {
              return ScaleTransition(
              scale: Tween<double>(
              begin: 0.0,
              end: 1.0,
              ).animate(
                  CurvedAnimation(
                  parent: anim1,
                  curve: Curves.fastOutSlowIn,
                  ),
                 ),
            child: child,
          );
         },
    pageBuilder: (_, __, ___) {
       return Material(
       type: MaterialType.transparency,
       child: Align(
       alignment: Alignment.center,
       child: Padding(
       padding: EdgeInsets.symmetric(horizontal: R.dimens.mediumSpacing1)
            .copyWith(
          top: MediaQuery.of(context).viewPadding.top, // This attribute used to make sure the Dialog widget always show below the AppBar/StatusBar 
                                                       //if the Dialog widget has size with height large more normal size when the keyboard be shown
        ),
         child: GestureDetector(
           onTap: () {
            FocusScope.of(context).requestFocus(FocusNode()); // Wrap Dialog widget inside Gesture Detector to every time the user tap outside the TextField widget but still inside scope of Dialog widget,
                                                              //the FocusNode of TextField will be unfocus 
          },
           child: Container(
             constraints: const BoxConstraints(maxWidth: double.infinity),
             decoration: BoxDecoration(
               borderRadius:
                   BorderRadius.all(Radius.circular(R.dimens.smallRadius)),
               color: Colors.white,
             ),
            padding: EdgeInsets.all(R.dimens.mediumSpacing),
              child: _ShowContentDialog(
               labelDialog: labelDialog,
               labelMainButton: labelMainButton,
               contentDialog: contentDialog,
               onTap: onTap,
               ),
             ),
           ),
         ),
       ),
     );
   },
 );
}

class _ShowContentDialog extends StatelessWidget {
 const _ShowContentDialog();

@override
Widget build(BuildContext context) {
 return SingleChildScrollView(
   physics: BouncingScrollPhysics(),
   child: Padding(
     padding: EdgeInsets.only(
       bottom: MediaQuery.of(context).viewInsets.bottom, // This attribute will auto scale size of Column widget when the keyboard showed
     ),
     child: Column(
       mainAxisSize: MainAxisSize.min,
       children: [
           _renderLabelDialog(),
           ... something widget,
           CustomTextField(
              labelTextField: "Ghi chú",
              hintText: "Nhập ghi chú",
              textInputType: TextInputType.text,
              maxLines: 4,
              textController: _editNoteController,
             ),
           _renderButton(context),
           ],
         ),
       ),
     );
   }
 }

Dialog without the keyboard

Dialog with the keyboard when touch on the TextField widget

Answer 14

Wrap the entire widget in a Scaffold, then all other widgets contained in a SingleChildScrollView.

Answer 15

The fix for me was similar to GrahamD's answer.

I was declaring my own theme using a parent that had .Fullscreen, for example:

<style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar.Fullscreen">
    <item name="android:windowBackground">@android:color/white</item>
</style>

I've raised an issue with the Flutter team because it should be possible to use a Fullscreen theme and have normal Chat app behaviour.

Answer 16

I resolved the above issue by adding a Stack() as the body of my Scaffold(), this allows the TextField() object to slide up above the soft keyboard. Initially I used SingleChildScrollView() for the body which resulted in the TextField() objects being obscured by the soft keyboard.

Solution that worked for me:

child: Scaffold(
          resizeToAvoidBottomInset: true,
          body: Stack(
            children: <Widget>[]

Answer 17

As per the flutter updates(2021), "resizeToAvoidBottomInset:true" gives a yellow-black strip error when keyboard appears.

This is how I fixed the above issue:

1. Inside build() method, check if keyboard is open, bool keyboardIsOpen = MediaQuery.of(context).viewInsets.bottom != 0;
2. Set resizeToAvoidBottomInset:true inside Scaffold
3. Wrap your widget with a SizedBox() and set height like this: height: keyboardIsOpen ? MediaQuery.of(context).size.height * 0.2 : MediaQuery.of(context).size.width * 0.6,

Answer 18

In Flutter, to prevent from this problem - Flutter Keyboard makes TextField hidden – we can do an easy job. We have to Wrap the TextFields with SingleChildScrollView as a widget for body argument in Scaffold. Only use SingleChildScrollView in that place. If you did not do so, it would not work well. For instance:

Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text("App"),
  ),
  body: SingleChildScrollView(
    child: Column(
      // mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Container(
          width: double.infinity,
          child: Card(
            color: Colors.blue,
            elevation: 5,
            child: Text()
          ),
        ),
        TextField(),
        TextField(),

      ],

Also, there is another way do this. In the above code, you can replace Column with ListView Widget like the below code:

Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text("App"),
  ),
  body: Container(
    height: 300,
    child: ListView(
      children: [
        Container(
          width: double.infinity,
          child: Card(
            color: Colors.blue,
            elevation: 5,
            child: Text(),
          ),
        ),
        TextField(),
        TextField(),

      ],

    

Answer 19

Here's a complete example which dynamically updates the padding:

import 'dart:ui';
import 'package:flutter/material.dart';

class KeyboardPaddingTest extends StatefulWidget {
  const KeyboardPaddingTest({Key? key}) : super(key: key);

  @override
  _KeyboardPaddingTestState createState() => _KeyboardPaddingTestState();
}

class _KeyboardPaddingTestState extends State<KeyboardPaddingTest> {
  EdgeInsets _viewInsets = EdgeInsets.zero;
  SingletonFlutterWindow? window;
  final _textFieldController = TextEditingController();

  @override
  void initState() {
    super.initState();
    window = WidgetsBinding.instance?.window;
    window?.onMetricsChanged = () {
      setState(() {
        final window = this.window;
        if (window != null) {
          _viewInsets = EdgeInsets.fromWindowPadding(
            window.viewInsets,
            window.devicePixelRatio,
          ).add(EdgeInsets.fromWindowPadding(
            window.padding,
            window.devicePixelRatio,
          )) as EdgeInsets;
        }
      });
    };
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.greenAccent[100],
      alignment: Alignment.bottomCenter,
      child: Padding(
        padding: EdgeInsets.only(bottom: _viewInsets.bottom),
        child: Column(
          children: [
            Expanded(
              child: Center(
                child: Container(
                  width: 200.0,
                  color: Colors.lightBlueAccent[100],
                  child: TextField(
                    controller: _textFieldController,
                    decoration: const InputDecoration(
                      border: InputBorder.none,
                      hintText: 'Tap to show keyboard',
                    ),
                  ),
                ),
              ),
            ),
            const Text(
              'Testing Keyboard',
              style: TextStyle(
                fontSize: 24.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 20

Be careful to do not remove those two lines from AndroidManifest.xml

android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize"

I did this mistake, all my SingleChildScrollView were not working and the keyboard was hidding the textfield of all my form.

Answer 21

If your content is scrollable but you are not using Scaffold like the other answers mentioned this is the solution I have used

SizedBox(height: (MediaQuery.of(context).viewInsets.bottom != 0) ? 200 : 16)

You can change the 200 and 16 value to some other convenient value as per your needs

Answer 22

I had same problem i also used SingleChildScrollView but that doesn't solved my problem.

My problem was accruing in this code.

   Stack(
      childern:[
           SingleChildScrollView(),// In scollView i have textFeild when keyboard opens doneButton hide the textFeild.
           doneButtonWidget()//this button align with the bottom of the screen. 
   ]
)

To Solve the problem i follow this and it solved my problem.

    Column(
       childern:[
            Expaned(  
                child:SingleChildScrollView(),// In scollView i have textFeild when keyboard opens doneButton hide the textFeild.
               flex:1
              ),
              doneButtonWidget()//this button align with the bottom of the screen. 
             ]
          )