skip to Main Content

I have this screen, but the white part I would like to expand it to the bottom limit of the user’s screen, but I am not getting it, it has a part in blue as shown in the image.

Page that is in error

Remembering that I would like to make this page responsive regardless of the user’s screen size, it has to go to the end

This is my code:

Scaffold(
      backgroundColor: Colors.blue,
      body: CustomScrollView(
        slivers: [
          SliverFillRemaining(
            hasScrollBody: false,
            child: Column(
              children: [
                Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Padding(
                      padding: EdgeInsets.only(top: 26.h, bottom: 160.h),
                      child: Container(),
                    ),
                    Container(
                      padding: EdgeInsets.symmetric(horizontal: 24.w),
                      alignment: Alignment.topCenter,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(8.r),
                          topRight: Radius.circular(8.r),
                        ),
                        color: Colors.white,
                      ),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          SizedBox(height: 32.h),
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text('Thanks for returning',
                                  style: TextStyle(
                                    fontSize: 16.sp,
                                    color: Colors.blueGrey,
                                    fontWeight: FontWeight.w900,
                                  )),
                              SizedBox(
                                height: 8.h,
                              ),
                              Text(
                                'Enter your password to login into your account: ',
                                softWrap: true,
                                style: TextStyle(
                                  fontSize: 22.sp,
                                  color: Colors.black,
                                  fontWeight: FontWeight.w400,
                                ),
                              ),
                            ],
                          ),
                          SizedBox(height: 24.h),
                          Form(
                            key: _userCredentialsForm,
                            autovalidateMode:
                                AutovalidateMode.onUserInteraction,
                            child: Column(
                              children: [
                                PSInputText(
                                  controller: _passwordController,
                                  inputColor: Colors.blue,
                                  title: 'Password',
                                  hintText: AuthStrings.password,
                                  keyboardType: TextInputType.number,
                                  maxLength: 6,
                                  isObscureText: true,
                                  textInputAction: TextInputAction.done,
                                  inputFormatters: [
                                    FilteringTextInputFormatter.digitsOnly,
                                  ],
                                  onChanged: (value) {},
                                ),
                              ],
                            ),
                          ),
                          Column(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Padding(
                                padding: EdgeInsets.only(top: 10.h),
                                child: PSPrimaryTextButton(
                                  fontSize: 14,
                                  text: 'Forgot password',
                                  onPressed: () => controller.add(
                                    ForgotPasswordEvent(),
                                  ),
                                ),
                              ),
                              SizedBox(height: 40.h),
                              SizedBox(
                                height: 40.h,
                                child: PSLoginButton(
                                  text: 'Log in',
                                  onPressed: () {},
                                ),
                              ),
                            ],
                          ),
                          Padding(
                            padding: EdgeInsets.only(bottom: 8.h, top: 32.h),
                            child: FutureBuilder(
                              initialData: '-',
                              future: AppConfig.appVersion,
                              builder: (ctx, appVersion) =>
                                  Text('App Version ${appVersion.data}',
                                      style: TextStyles.fontSize12(
                                        color: Colors.black,
                                      )),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );

I already tried to use the expand inside column, i also tried to use positioned.fill.

But they all give layout errors, the only solution was to place a sized box to lower the container to the end with its children, but this is not the behavior I would like, since it has a scroll for the user!

2

Answers


  1. I think you want to put the Login button to bottom of the page. You can increase the padding of forgot password button according to the screen height.

    Padding(
                                padding: EdgeInsets.only(top: MediaQuery.of(context).size.height - 450,),
                                child: PSPrimaryTextButton(
                                  fontSize: 14,
                                  text: 'Forgot password',
                                  onPressed: () => controller.add(
                                    ForgotPasswordEvent(),
                                  ),
                                ),
                              ),
    

    In this code block I add padding with substracting 450 from height of device.

    Expanded won’t work because we have unlimited height. It can’t help us.

    Login or Signup to reply.
  2. enter image description here

    You can remove the first column and replace it with Align

    Align(
      alignment: Alignment.bottomCenter,
      child:  Column(
         ....
      ),
    ),
    

    Here is a gist of the change
    https://dartpad.dev/?id=66d3ec6382c544939750609d558d63f8

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search