Flutter resizeToAvoidBottomPadding block the whole Screen

Question

I have multiple textFields and button at the end of screen , when I set resizeToAvoidBottomPadding=false it block the whole screen and SingleChildScrollView cannot be scrolled anymore ,I just only want to deal with the button to make it behind the keyboard not over it

@override
Widget build(BuildContext context) {
  return Scaffold(
    resizeToAvoidBottomPadding: false,
    body: body(context),
  );
}

Widget body(BuildContext context) {
  return Stack(
    children: <Widget>[
      SafeArea(
          child: NotificationListener<OverscrollIndicatorNotification>(
              onNotification: (OverscrollIndicatorNotification overscroll) {
                overscroll.disallowGlow();
                return false;
              },
              child: Container(
                height: double.infinity,
                child: SingleChildScrollView(
                    padding: EdgeInsets.only(
                      left: 7 *
                          (SizeConfig.isMobilePortrait
                              ? SizeConfig.widthMultiplier
                              : SizeConfig.heightMultiplier),
                      top: 20 *
                          (SizeConfig.isMobilePortrait
                              ? SizeConfig.heightMultiplier
                              : SizeConfig.widthMultiplier),
                    ),
                    physics: AlwaysScrollableScrollPhysics(),
                    child: Form(
                      autovalidate: false,
                      key: _formKey,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Container(
                              margin: EdgeInsets.symmetric(
                                  vertical: 2 *
                                      (SizeConfig.isMobilePortrait
                                          ? SizeConfig.widthMultiplier
                                          : SizeConfig.heightMultiplier)),
                              child: registerText(context)),
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: <Widget>[
                              Container(
                                  constraints: BoxConstraints(
                                      maxWidth: 85 *
                                          (SizeConfig.isMobilePortrait
                                              ? SizeConfig.widthMultiplier
                                              : SizeConfig.heightMultiplier)),
                                  child: firstNameField(context)),
                              Container(
                                  constraints: BoxConstraints(
                                      maxWidth: 85 *
                                          (SizeConfig.isMobilePortrait
                                              ? SizeConfig.widthMultiplier
                                              : SizeConfig.heightMultiplier)),
                                  child: lastNameField(context)),
                              Container(
                                  constraints: BoxConstraints(
                                      maxWidth: 85 *
                                          (SizeConfig.isMobilePortrait
                                              ? SizeConfig.widthMultiplier
                                              : SizeConfig.heightMultiplier)),
                                  child: emailField(context)),
                              Container(
                                  constraints: BoxConstraints(
                                      maxWidth: 85 *
                                          (SizeConfig.isMobilePortrait
                                              ? SizeConfig.widthMultiplier
                                              : SizeConfig.heightMultiplier)),
                                  child: phoneNumberField(context)),
                              Container(
                                  constraints: BoxConstraints(
                                      maxWidth: 85 *
                                          (SizeConfig.isMobilePortrait
                                              ? SizeConfig.widthMultiplier
                                              : SizeConfig.heightMultiplier)),
                                  child: passwordField(context)),
                              Container(
                                  constraints: BoxConstraints(
                                      maxWidth: 85 *
                                          (SizeConfig.isMobilePortrait
                                              ? SizeConfig.widthMultiplier
                                              : SizeConfig.heightMultiplier)),
                                  child: confirmPasswordField(context)),
                              Container(
                                  padding: EdgeInsets.only(
                                      top: 2 *
                                          (SizeConfig.isMobilePortrait
                                              ? SizeConfig.heightMultiplier
                                              : SizeConfig.widthMultiplier)),
                                  constraints: BoxConstraints(
                                      minWidth: 80 *
                                          (SizeConfig.isMobilePortrait
                                              ? SizeConfig.widthMultiplier
                                              : SizeConfig.heightMultiplier)),
                                  child: registerButton(context)),
                              // Container(child: registerButton(context))
                            ],
                          ),
                        ],
                      ),
                    )),
              ))),
      Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          backToLogin(context),
        ],
      )
    ],
  );
}

void · Accepted Answer · 2020-05-08T23:50:13.227

10

resizeToAvoidBottomPadding=true id deprecated.

Instead use : resizeToAvoidBottomInset

I hope this helps

UPDATED

Check this link, it should help : This will fix the issue

edited May 08 '20 at 23:50

answered May 08 '20 at 23:23

void

12,787
3
28
42

1

Set it to false, not to true @MohamedAlaa – void May 08 '20 at 23:27
1

Any luck ? @MohamedAlaa – void May 08 '20 at 23:29
Unfortunately , no it isn't – Mohamed Alaa May 08 '20 at 23:34
Any luck @MohamedAlaa – void May 09 '20 at 00:01

score 2 · Answer 2 · answered May 09 '20 at 00:00

Try the following structure (modify the code to your needs):

SafeArea(
  child: Scaffold(
    body: ListView(
      padding: EdgeInsets.all(8.0),
      children: [
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Form(
        autovalidate: false,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextField(), // replace it with your custom components
            TextField(),
            TextField(),
            TextField(),
            TextField(),
            TextField(),
            TextField(),
            TextField(),
            TextField(),
            TextField(),
            TextField(),
            TextField(),
            TextField(),
            TextField(),
            TextField(),
            SizedBox(height: 8.0), // if you need to
            FlatButton(onPressed: (){}, child: Text('back'),), 
          ],
        ),),),
      ],
    ),

  ),
);

use SizedBox between each field or padding Replace the textField with your custom components also the button below.

Thank you Omar for your effort this seem similar like my issue <3 — Mohamed Alaa, May 09 '20 at 00:06

Flutter resizeToAvoidBottomPadding block the whole Screen

2 Answers2