Keyboard hide textfield when editing textfield( flutter)

Question

While editing my textfield the keyboard hide half the screen. I want to make the screen push up with the keyboard so I can see all the field. How do I do it?

Here my widget form, I have already tried SingleScrollView but the problem is my view turned all white

class SignUpFormState extends State<_SignUpForm> {
  final _signUpFormKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Consumer<LoginModel>(
        builder: (context, loginModel, child) => Expanded(
              child: Padding(
                padding: EdgeInsets.only(left: 16.0, right: 16.0),
                child: Card(
                  child: Form(
                      key: _signUpFormKey,
                      child: Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 16.0),
                        child: Column(
                          children: <Widget>[
                            Container( height: 16.0,),
                            Text(),
                            Spacer(flex: 3, ),
                            Padding(),
                            Padding(),
                            Padding(),
                            Padding(),
                            Spacer( flex: 4,),
                            Row(),
                          ],
                        ),
                      )),
                ),
              ),
            ));
  }
}

Please use SingleChildScrollView() widget like this: https://stackoverflow.com/a/60521914/12932518 — Mateen, Mar 04 '20 at 09:01
Does this answer your question? [Overflow Error in Flutter when keyboard open](https://stackoverflow.com/questions/55312583/overflow-error-in-flutter-when-keyboard-open) — Kirill Matrosov, Mar 04 '20 at 10:00

pungjunghyeon · Accepted Answer · 2020-03-04T09:37:21.943

2

Use SingleChildView likes this.

class SomeWidgetState extends State<SomeWidget> {
  @override
  Widget build(BuildContext context) {
    //If you use Scaffold in parent widget, use Container instead of Scaffold.
    return Scaffold(
      body: SingleChildScrollView(
        child: Column([Your Login Form Widget])
    )
  }
}

edited Mar 04 '20 at 09:37

answered Mar 04 '20 at 09:29

pungjunghyeon

69
5

If I used SingleChildScrollView widget, all my content turned white. I don't know why. Have you ever faced with this problem ?? – Hoang Trung Nguyen Mar 04 '20 at 11:47
For that problem, I need more information. Could you upload your Column widget code please. – pungjunghyeon Mar 05 '20 at 02:01
I user Spacers in my column widget. I think those are the problem. – Hoang Trung Nguyen Mar 05 '20 at 03:21

score 0 · Answer 2 · edited Apr 01 '20 at 08:57

0

Use Scaffold as the root and add resizeToAvoidBottomPadding: false, just before the end of scaffold bracket. You'll be good to go.

example:

return Scaffold(
      body: Column(
        .....


      ),


 resizeToAvoidBottomPadding: false, //this line here

    );

edited Apr 01 '20 at 08:57

sfung3

2,227
1
9
30

answered Apr 01 '20 at 08:22

Fahad Hussain

185
1
3
15

Newaj · Answer 3 · 2020-03-04T09:09:17.943

-1

Use Scaffold widget as the root of the screen. Problem will be solved.

For example :

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: ListView(  // or Column
      // contents
    )
  );
}

edited Mar 04 '20 at 09:09

answered Mar 04 '20 at 09:02

Newaj

3,992
4
32
50

Without Scaffold, this screen is not visible. means, he is already using Scaffold. He need to wrap body in SingleChildScrollView() – Mateen Mar 04 '20 at 09:03
I meant root of this screen. – Newaj Mar 04 '20 at 09:05
@AR , See, the problem is - TextField goes under keyboard. Using Scaffold, can solve this. I hope you'll reconsider your downvote. – Newaj Mar 04 '20 at 09:15
Screen designed by the user is static right now, that screen width and height will be different in different mobile. So he needed flexibility to scroll if contents are more than current screen size. Issue on Keyboard opening, anything you are entering your textfield should appear on screen. So if it isn't appearing it will gives error. by using SingleChildScrollView(), it will gives you flexibility to scroll up a little so textfield will viewable. @AR you have to consider your downvote – Mateen Mar 04 '20 at 09:16

Keyboard hide textfield when editing textfield( flutter)

3 Answers3