如何在Flutter中将容器粘贴到屏幕底部

问题描述 投票:0回答:3

我在一个容器中设置了这个注册表单,我希望这个容器粘在屏幕底部。我尝试用 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按钮下方出现了一些不需要的空白,如下图所示,您能帮我解决这个问题吗:

flutter dart flutter-layout
3个回答
4
投票

检查这个

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

2
投票

新扩展(

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

                ],
              ),

            )))

0
投票

抱歉,这不是一个答案,而是一个问题。 我只是想问你是如何在更新部分(第一个屏幕截图)上得到它的。 就像小部件周围的框一样。 预先感谢

© www.soinside.com 2019 - 2024. All rights reserved.