CODEWITHSUNDEEP
androidiosmobileflutter
Nirodya Gamage
Nirodya Gamage

Reputation: 804

Flutter Keyboard makes textfield hide

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?

Upvotes: 66

Views: 111554

Answers (25)

Rabin Acharya
Rabin Acharya

Reputation: 78

If the textfield gets hidden by the opening of keyboard, Here is the simplest solution of all .


class LoginScreen extends StatelessWidget {
  const LoginScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Column(
        children: [
          Text("Login User"),
          SizedBox(
            height: 48,
          ),
          Focus(
            child: TextField(
              decoration: InputDecoration(hintText: "Enter your email"),
            ),
          )
        ],
      ),
    );
  }
}

You can simply wrap the TextField with Focus Widget it will solve the textfield hidden issue for better.

Upvotes: 0

Mohanraj muthukumaran
Mohanraj muthukumaran

Reputation: 1

The below should work

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

One thing to note is if you have Scaffold or any kind of Scaffold like AutoTabsScaffold on the parent widget you should this prop resizeToAvoidBottomInset: true, to all of the Scaffold.

Upvotes: 0

Polarcode
Polarcode

Reputation: 514

Had the same problem today and using resizeToAvoidBottomInset: true and SingleChildScrollView solved my problem.

return Scaffold(
  appBar: AppBar(
    title: Text("TitleBar"),
  ),
  resizeToAvoidBottomInset: true,
  body: SingleChildScrollView(
    child: ... some widgets here...
    ,
  ),
);

Upvotes: 2

SKT
SKT

Reputation: 1851

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

Upvotes: 2

songoku1610
songoku1610

Reputation: 1744

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

Fixed problem textfield was hidden by keyboard

Upvotes: 56

Olawale Ajepe
Olawale Ajepe

Reputation: 66

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

Upvotes: 1

Nghien Nghien
Nghien Nghien

Reputation: 297

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 without the keyboard

Dialog with the keyboard when touch on the TextField widget

Dialog with the keyboard when touch on the TextField widget

Upvotes: 4

Oleg Yablokov
Oleg Yablokov

Reputation: 835

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

Upvotes: 15

Chlo&#233;
Chlo&#233;

Reputation: 1129

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.

Upvotes: 0

Timur
Timur

Reputation: 1343

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

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

Upvotes: 12

Hector Pinedo Giron
Hector Pinedo Giron

Reputation: 69

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

Upvotes: 5

vovahost
vovahost

Reputation: 36049

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

before and after keyboard is shown

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,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Upvotes: 0

Nelvin Nakoro
Nelvin Nakoro

Reputation: 69

resizeToAvoidBottomInset is true by default.

return Scaffold(
      resizeToAvoidBottomInset: false,
   );

I set it to false and it worked fine

Upvotes: 3

Mehdi
Mehdi

Reputation: 1

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

      ],

Upvotes: 0

Somal Chakraborty
Somal Chakraborty

Reputation: 31

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,

Upvotes: 0

Iaroslav Siniugin
Iaroslav Siniugin

Reputation: 1046

resizeToAvoidBottomPadding is Deprecated use instead resizeToAvoidBottomInset: true

Upvotes: 15

Rahul sharma
Rahul sharma

Reputation: 1574

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. 
             ]
          )

Upvotes: -1

Inchy
Inchy

Reputation: 9

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>[]

Upvotes: 0

Javeed Ishaq
Javeed Ishaq

Reputation: 7105

<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

enter image description here

Upvotes: 12

Michael McCormick
Michael McCormick

Reputation: 442

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.

Upvotes: 0

SKJ
SKJ

Reputation: 283

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.

Upvotes: 5

The Billionaire Guy
The Billionaire Guy

Reputation: 3552

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

Upvotes: 7

ezzou
ezzou

Reputation: 2654

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

Upvotes: 27

GrahamD
GrahamD

Reputation: 3175

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.

Upvotes: 30

Aman Malhotra
Aman Malhotra

Reputation: 3196

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

Upvotes: 25

Related Questions