首页 > 解决方案 > 删除行首不需要的填充

问题描述

我的Row容器中的左侧包含填充(我认为)。我想与Column. 在过去的两个小时里,我一直在玩填充,并找出如何消除填充......

登录应该从左边垂直对齐,上面有按钮

@override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Container(
        height: MediaQuery.of(context).size.height,
        child: Stack(
          alignment: Alignment.topCenter,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/img/signin.png'),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              padding: EdgeInsets.only(top: 100),
              child: Opacity(
                opacity: _showProgressIndicator ? 1 : 0,
                child: CircularProgressIndicator(),
              ),
            ),
            Container(
//                height: MediaQuery.of(context).size.height - 180,
                padding:
                EdgeInsets.only(top: 20, left: 10, right: 10, bottom: 60),
                child: Form(
                  key: formKey,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    verticalDirection: VerticalDirection.up,
                    children: [
                      Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            new FlatButton(
                              padding: EdgeInsets.zero,

                              child: new Text('SIGN IN',
                                  style: Theme.of(context).textTheme.body1),
                              onPressed: () {
                                Navigator.push(
                                    context, SignInPage(widget.onSignedIn));
                              },

                            ),
                            Opacity(
                                opacity: _showMessage ? 1 : 0,
                                child: Text('CONSIDER GOOGLE', style:Theme.of(context).textTheme.body1)),
                            new FlatButton(
                              padding: new EdgeInsets.all(0.0),
                              child: new Text(
                                'SIGN UP WITH EMAIL',
                                style: Theme.of(context).textTheme.body1,
                              ),
                              onPressed: () {
                                Navigator.push(
                                    context, SignUpPage(widget.onSignedIn));
                              },
                            ),
                          ]),
                      new Container(
                        // padding: EdgeInsets.all(10),
                        child: new Column(
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: <Widget>[
                            new RaisedButton(
                              color: Colors.blue[800],
                             padding: EdgeInsets.all(20),
                              shape: RoundedRectangleBorder(
                                  borderRadius:
                                  BorderRadius.all(Radius.circular(4))),
                              child: new Text('CONNECT WITH FACEBOOK',
                                  style: new TextStyle(
                                      fontSize: 16,
                                      letterSpacing: 0.5,
                                      color: Colors.white)),
                              onPressed: loginWithFb,
                            ),
                            new SizedBox(height: 20),
                            new RaisedButton(
                              color: Colors.red,
                              padding: EdgeInsets.all(20),
                              shape: RoundedRectangleBorder(
                                  borderRadius:
                                  BorderRadius.all(Radius.circular(4))),
                              child: new Text('CONNECT WITH GOOGLE',
                                  style: new TextStyle(
                                      fontSize: 16,
                                      letterSpacing: 0.5,
                                      color: Colors.white)),
                              onPressed: loginWithGoogle,
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ))
          ],
        ),
      ),
    );
  }

在此处输入图像描述

标签: flutter

解决方案


ButtonTheme如果我理解正确你的意思,我可以通过更改默认值来解决这个问题,因为你说:

登录应该从左边垂直对齐,上面有按钮

你不是说从左边水平,如果是这样的话试试这个:

用和 new包裹Flatbutton在 Theme 中,然后用你自己的改变 padding 和 minWidth (当我只改变 padding 或 width 时它不起作用)。这会从 ButtonTheme 示例中删除默认值:ThemeDataButtonTheme

Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Theme(
        data: ThemeData(buttonTheme: ButtonThemeData(minWidth: 20.0,padding: EdgeInsets.all(0.0))),
        child: new FlatButton(
          child: new Text('SIGN IN',
              style: Theme.of(context).textTheme.body1),
          onPressed: () {
          },

        ),
      ),
      Opacity(
          opacity: true ? 1 : 0,
          child: Text('CONSIDER GOOGLE', style:Theme.of(context).textTheme.body1)),
      new FlatButton(
        padding: new EdgeInsets.all(0.0),
        child: new Text(
          "SIGN UP WITH EMAIL ",
          style: Theme.of(context).textTheme.body1,
        ),
        onPressed: () {

        },
      ),
    ]),

结果:

纽扣


推荐阅读