Home > OS >  Flutter - Keyboard Hides TextField
Flutter - Keyboard Hides TextField

Time:06-08

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.

CodePudding user response:

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

CodePudding user response:

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.

  • Related