Align a Container with button, in a Column to bottom of screen

Question

My code:

return Scaffold(
  drawer: Drawer(),
  backgroundColor: Color(0xFFF6F4F2),
  body: Column(
    children: <Widget>[
      Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image.asset(
              'images/emblem.png',
              height: 80,
            ),
            SizedBox(
              width: 20,
            ),
            Text(
              'Connect',
              style: TextStyle(color: Colors.white, fontSize: 40),
            ),
          ],
        ),
        height: 120,
        width: 1000,
        decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: _colors,
              stops: _stops,
            ),
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(100),
              bottomRight: Radius.circular(100),
            )),
      ),
      Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          AltButton(
            label: 'Contacts',
            icon: FontAwesomeIcons.phone,
            routeString: ContactsScreen.id,
          ),
          AltButton(
            label: 'CGHS Codes',
            icon: FontAwesomeIcons.calculator,
            routeString: CGHSCodesScreen.id,
          ),
          Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              InkWell(
                onTap: () {},
                child: Container(
                  margin: EdgeInsets.only(left: 20, right: 20, top: 10),
                  padding: EdgeInsets.all(20),
                  decoration: BoxDecoration(
                    color: Color(0xFFFFFFFF),
                    borderRadius: BorderRadius.circular(25),
                    boxShadow: [
                      new BoxShadow(
                        spreadRadius: 1,
                        offset: Offset.fromDirection(
                          120,
                          5,
                        ),
                        color: Colors.green[300],
                        blurRadius: 10.0,
                      ),
                    ],
                  ),
                  child: Row(
                    children: <Widget>[
                      Container(
                        decoration: BoxDecoration(
                          color: Colors.grey[300],
                          borderRadius: BorderRadius.circular(10),
                        ),
                        padding: EdgeInsets.all(10),
                        child: InkWell(
                          child: FaIcon(
                            FontAwesomeIcons.signInAlt,
                            color: Color(0xFF237158),
                            size: 20,
                          ),
                          radius: 30,
                          splashColor: Colors.lightGreen,
                          hoverColor: Colors.lightGreen[50],
                        ),
                      ),
                      SizedBox(
                        width: 15,
                      ),
                      Text(
                        'Login',
                        style: TextStyle(
                            fontSize: 25, color: Colors.green[700]),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
          _loggedIn
              ? Container()
              : AltButton(
                  label: 'Login',
                  icon: FontAwesomeIcons.user,
                  routeString: LoginScreen.id,
                ),
        ],
      )
    ],
  ),
);

It currently looks like this:

What I'm aiming for is:

I thought adding the following in the last Column would fix it:

mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,

Whats's the proper way to do this?

Answer 1

add this in place of your Column containing buttons, try to use LayoutBuilder so you can easily overcome problems like this

            LayoutBuilder(
              builder: (_, constraints) {
                return Container(
                  width: constraints.maxWidth,
                  height: constraints.maxHeight,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Container(                                
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: <Widget>[
                            //your first 2 button
                          ],
                        ),
                      ),
                      Container(
                        child: //your bottom button,
                      ),
                    ],
                  ),
                );
              },
            ),