编辑文本字段时键盘隐藏文本字段（颤动）

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

Answer 1

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

Answer 2

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

    );

Answer 3

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