Flutter - Keyboard Hides TextField

Question

I have a page with the below code, proplem is repeated one which is when I click on text field, keyboards open and covers the text filed.

I searched a lot and tride many solutions, like: resizeToAvoidBottomInset: true, adding the singlechildscrollview on the below code, I also tried adding padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),

nothing is working at all!

Can anyone help me with an idea or the correct widget tree to solve this?

Scaffold(
    resizeToAvoidBottomInset: true,
    appBar: AppBar(),
    body: Padding(
      padding: EdgeInsets.fromLTRB(8.w, 8.h, 8.w, 8.h),
      child: SingleChildScrollView(
          child: Column(
childern: [
.
.
.
Container(
 padding: EdgeInsets.only(
                                bottom: MediaQuery.of(context)
                                    .viewInsets
                                    .bottom),
child: textField()
)
.
.
.
]
),
),
),

Edit: Answer:

giving my problem solution just in case anyone faced it. months ago I implemented a package called screenutilinit to make the app responsive to different sizes, one of the commands I used in the main page was this line:

MaterialApp(useInheritedMediaQuery: true, ..) when I removed it everything worked fine.

I hope it help others.

Does this answer your question? [Flutter Keyboard makes textfield hide](https://stackoverflow.com/questions/51335483/flutter-keyboard-makes-textfield-hide) — AmateurCoder, Jun 07 '22 at 14:18
No, I tried this is all but nothing work, I found the problem in my code, in the main pge I was using this line MaterialApp(useInheritedMediaQuery: true, ..) while implementing a package called screenutilinit. when I removed it everything worked fine. — Mark Nugromentry, Jun 07 '22 at 17:29

score 2 · Accepted Answer · answered Jun 07 '22 at 14:50

2

If you have added singleChildScrollView it will automatically move upwards when the keyboard is open. It wouldn't need the padding again.

Scaffold(
        resizeToAvoidBottomInset: true,
        appBar: AppBar(),
        body: Padding(
            padding: EdgeInsets.all(20),
            child: SingleChildScrollView(
              child: Column(children: [
                SizedBox(
                  height: 500,
                ),
                Container(child: TextField())
              ]),
            )));

answered Jun 07 '22 at 14:50

Kaushik Chandru

15,510
2
12
30

1

thanks, I was using the same exactly but didn't work, finally new my problem, in the main page I was using this command MaterialApp(useInheritedMediaQuery: true, ..) while implementing a package called screenutilinit. when I removed it everything worked fine. – Mark Nugromentry Jun 07 '22 at 17:31
1

@SherifSaidElahl man you just save my life! I was facing the same issue but i have also useInheritedMediaQuery as true, dont know why and now is working like a champ! Thx for your comment :) – Jocgomez Oct 20 '22 at 16:06
Welcome Joc, glad it worked with you! – Mark Nugromentry Oct 23 '22 at 13:19

score 1 · Answer 2 · answered Jun 07 '22 at 17:33

giving my problem solution just in case anyone faced it. months ago I implemented a package called screenutilinit to make the app responsive to different sizes, one of the commands I used in the main page was this line:

MaterialApp(useInheritedMediaQuery: true, ..) when I removed it everything worked fine.

I hope it help others.

Flutter - Keyboard Hides TextField

2 Answers2