将“容器”与“按钮”在屏幕底部的列中对齐

Question

我的代码：

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,
                ),
        ],
      )
    ],
  ),
);

当前看起来像这样：

我的目标是：

我认为在最后一栏中添加以下内容将解决此问题：

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

什么是正确的方法？

Answer 1

将其添加到包含按钮的列中，尝试使用Web API，以便您可以轻松克服此类问题

LayoutBuilder