xpetta
Reputation: 718
How to stick the container to the bottom of the screen in Flutter
I have this registration form setup within a container, I want this container to stick to the bottom of the screen. I tried wrapping it with the Positioned widget and setting its bottom to zero, but it does not work.
Container(
margin: EdgeInsets.only(top: kSpacingUnit * 1.0),
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: kBoxShadow,
),
padding: EdgeInsets.fromLTRB(
0.1 * SizingInfo.screenWidth,
0.1 * SizingInfo.screenWidth,
0.1 * SizingInfo.screenWidth,
0.00 * SizingInfo.screenWidth,
),
child: Form(
key: _formKey,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 0.1 * SizingInfo.screenWidth),
Padding(
padding: EdgeInsets.fromLTRB(
0.01 * SizingInfo.screenWidth,
0.00 * SizingInfo.screenWidth,
0.01 * SizingInfo.screenWidth,
0.00 * SizingInfo.screenWidth,
),
child: TextFormField(
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (value.isEmpty) {
return 'Email Address cannot be left empty';
}
if (!value.contains('@') || !value.contains('.')) {
return 'Enter a valid Email Address';
}
return null;
},
onChanged: (value) {
setState(() => _email = value.trim());
},
decoration: InputDecoration(
prefixIcon: Icon(Icons.mail_outline),
labelText: 'Email Address',
labelStyle: TextStyle(
fontSize: 16.0,
color: Colors.black54,
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.black54),
),
),
style: TextStyle(
fontSize: 16.0,
color: Colors.black54,
),
onTap: null,
),
),
SizedBox(height: 0.01 * SizingInfo.screenWidth),
Padding(
padding: EdgeInsets.fromLTRB(
0.01 * SizingInfo.screenWidth,
0.00 * SizingInfo.screenWidth,
0.01 * SizingInfo.screenWidth,
0.00 * SizingInfo.screenWidth,
),
child: TextFormField(
obscureText: true,
validator: (value) {
if (value.isEmpty) {
return 'Password cannot be left empty';
}
if (value.length < 6) {
return 'Password needs to be at least 6 characters long';
}
return null;
},
onChanged: (value) {
setState(() => _password = value);
},
decoration: InputDecoration(
prefixIcon: Icon(Icons.lock_outline),
labelText: 'Password',
labelStyle: TextStyle(
fontSize: 16.0,
color: Colors.black54,
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.black54),
),
suffixIcon: Icon(
Icons.remove_red_eye,
color: Colors.grey.shade400,
),
),
style: TextStyle(
fontSize: 16.0,
color: Colors.black54,
),
),
),
SizedBox(height: 0.01 * SizingInfo.screenWidth),
Padding(
padding: EdgeInsets.fromLTRB(
0.01 * SizingInfo.screenWidth,
0.01 * SizingInfo.screenWidth,
0.01 * SizingInfo.screenWidth,
0.00 * SizingInfo.screenWidth,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
'Forgot Password ?',
style: TextStyle(
color: Colors.black54,
fontSize: 12.0,
fontWeight: FontWeight.w400),
),
],
),
),
SizedBox(height: 0.05 * SizingInfo.screenWidth),
GestureDetector(
onTap: () {
if (_formKey.currentState.validate()) {
final _signInResponse =
_auth.signInWithEmail(this._email, this._password);
if (_signInResponse != null) {
Navigator.pushReplacementNamed(context, '/');
}
}
},
child: LoginButton(
buttonTitle: 'Sign In',
textColor: Colors.white,
iconPath: Icons.lock_outline,
iconColor: Colors.white,
),
),
SizedBox(height: 0.02 * SizingInfo.screenWidth),
Padding(
padding: EdgeInsets.fromLTRB(
0.01 * SizingInfo.screenWidth,
0.00 * SizingInfo.screenWidth,
0.01 * SizingInfo.screenWidth,
0.05 * SizingInfo.screenWidth,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
'Need an account?',
style: TextStyle(
color: Colors.black54,
fontSize: 14,
fontWeight: FontWeight.w400,
),
),
SizedBox(width: 0.01 * SizingInfo.screenWidth),
GestureDetector(
onTap: () => Navigator.pushReplacementNamed(
context, '/signup'),
child: Text(
'Sign Up',
style: TextStyle(
color: Color(0xFF528DF9),
fontSize: 14.0,
fontWeight: FontWeight.w500),
),
),
],
),
),
SizedBox(height: 0.05 * SizingInfo.screenWidth),
Padding(
padding: EdgeInsets.symmetric(
horizontal: 0.01 * SizingInfo.screenWidth),
child: Row(
children: <Widget>[
Expanded(
child: Container(
child: Divider(
height: 0.0,
thickness: 0.5,
color: Colors.black54,
),
),
),
Text(
' Sign In With ',
style: TextStyle(
color: Colors.black54,
fontSize: 16.0,
),
),
Expanded(
child: Container(
child: Divider(
height: 0.0,
thickness: 0.5,
color: Colors.grey.shade500,
),
),
),
],
),
),
SizedBox(height: 0.075 * SizingInfo.screenWidth),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleButton(
onTap: () => print("Google"),
imagePath: 'assets/images/google.png',
),
SizedBox(width: 0.1 * SizingInfo.screenWidth),
CircleButton(
onTap: () => print("Facebook"),
imagePath: 'assets/images/facebook.png',
),
],
),
SizedBox(height: kSpacingUnit * 5.0),
],
),
),
),
),
This is how the screen looks:
Could anyone please help with fixing this issue. Thank you so much in advance!
UPDATE:
After applying the solution suggested by @Besufkd, the container has stuck to the bottom but some unwanted white space is appearing below the Google and Facebook buttons as shown in the below screens, could you please help me with fixing this issue:
Upvotes: 3
Views: 6380
Answers (2)
AddWeb Solution Pvt Ltd
Reputation: 21681
new Expanded(
child: new Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 50,
width: 100,
color: Colors.blue,
child: new Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new Text("Hello")
],
),
)))
Upvotes: 2
Besufkad Menji
Reputation: 1588
check this
Container(
child: Column(
children: [Expanded(
child: Container(),
),
// this will be you container
Container()
],
),
),
Upvotes: 4
Related Questions
- How to show a Container fixed at bottom of screen without using bottom navigation bar in Flutter?
- How to place a container on top of other container properly in flutter
- Widget not going to bottom of screen in Flutter?
- How to make the bottom and top height in flutter
- how to but container at the bottom of page
- Placing button at the bottom of container in flutter
- how to add a fixed to bottom container to a sliver flutter
- Flutter position Widget between bottom of screen and safe area
- Container not going to bottom of screen in flutter?
- Flutter how to make a row to stick at the bottom