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.
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
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.
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.
You can remove the first column and replace it with Align
Here is a gist of the change
https://dartpad.dev/?id=66d3ec6382c544939750609d558d63f8