如何在Flutter中将容器固定在屏幕底部

Question

我有一个在容器中设置的注册表单，我希望这个容器能够固定在屏幕底部。我尝试使用Positioned小部件将其包装并将其底部设置为零，但它不起作用。

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

这是屏幕的显示方式： 请问有人能帮忙解决这个问题吗？非常感谢！

更新：

应用了@Besufkd建议的解决方案后，容器已经固定在底部，但是在Google和Facebook按钮下面出现了一些不必要的白色空间，如下所示。请问能否帮我解决这个问题：

- xpetta

---

所以您不需要底部蓝色容器，相反，它应该在下方显示Fb和Google图标。 - undefined

蓝色是 Scaffold 的背景。 - undefined

https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html - undefined

Answer 1

请检查这个

  Container(
      child: Column(
        children: [Expanded(
          child: Container(),
        ),
        // this will be you container
        Container()
        ],
      ),
    ),

- Besufkad Menji

---

感谢 @Besufkad，容器已经固定在底部，但是在FB和Google按钮下面还有很多空间。我想要去掉那个空白区域。 - undefined

SizedBox(height: kSpacingUnit * 5.0), 从底部删除这部分内容。 - undefined

感谢 @Besufkad。我已将其移除并附上更新后的屏幕截图，但仍然存在空白处。 - undefined

هœ¨SingleChildScrollViewه†…çڑ„هˆ—ن¸­و·»هٹ mainAxisAlignment: MainAxisAlignment.end - undefined

抱歉 @Besufkad，这并没有帮助。我不确定是从哪个小部件渲染出了这个空白空间。 - undefined

Answer 2

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

                ],
              ),

            )))

- AddWeb Solution Pvt Ltd