Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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:

enter image description here

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:

enter image description here

enter image description here

like image 447
xpetta Avatar asked Dec 07 '25 10:12

xpetta


2 Answers

check this

  Container(
      child: Column(
        children: [Expanded(
          child: Container(),
        ),
        // this will be you container
        Container()
        ],
      ),
    ),
like image 115
Besufkad Menji Avatar answered Dec 08 '25 23:12

Besufkad Menji


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")

                ],
              ),

            )))
like image 45
AddWeb Solution Pvt Ltd Avatar answered Dec 08 '25 23:12

AddWeb Solution Pvt Ltd



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!