我想知道如何设置一个宽度,以匹配父布局宽度

new Container(
  width: 200.0,
  padding: const EdgeInsets.only(top: 16.0),
  child: new RaisedButton(
    child: new Text(
      "Submit",
      style: new TextStyle(
        color: Colors.white,
      )
    ),
    colorBrightness: Brightness.dark,
    onPressed: () {
      _loginAttempt(context);
    },
    color: Colors.blue,
  ),
),

我知道一点点关于扩展小部件,但扩展扩展视图到两个方向,我不知道如何做到这一点。


当前回答

对于match_parent,您可以使用

SizedBox(
  width: double.infinity, // match_parent
  child: RaisedButton(...)
)

对于任何可以使用的特定值

SizedBox(
  width: 100, // specific value
  child: RaisedButton(...)
)

其他回答

经过一番研究,我找到了一些解决方案,感谢@Günter Zöchbauer,

我用了列而不是容器和

将属性设置为列CrossAxisAlignment。拉伸填充匹配按钮的父元素

    new Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                new RaisedButton(
                  child: new Text(
                      "Submit",
                      style: new TextStyle(
                        color: Colors.white,
                      )
                  ),
                  colorBrightness: Brightness.dark,
                  onPressed: () {
                    _loginAttempt(context);
                  },
                  color: Colors.blue,
                ),
              ],
            ),

更新:

在Flutter 2.0中,RaisedButton已弃用,并被ElevatedButton取代。你可以像这样使用minimumSize:

ElevatedButton(
        style: ElevatedButton.styleFrom(
          minimumSize: Size.fromHeight(40), // fromHeight use double.infinity as width and 40 is the height
        ),
        onPressed: () {},
        child: Text('Text Of Button'),
      )

颤振小于2.0的旧答案:

正确的解决方案是使用sizebox。扩展小部件,它强制其子部件与其父部件的大小相匹配。

SizedBox.expand(
  child: RaisedButton(...),
)

有很多选择,允许或多或少的定制:

SizedBox(
  width: double.infinity,
  // height: double.infinity,
  child: RaisedButton(...),
)

或者使用ConstrainedBox

ConstrainedBox(
    constraints: const BoxConstraints(minWidth: double.infinity),
    child: RaisedButton(...),
)
         OutlineButton(
              onPressed: () {
                logInButtonPressed(context);
              },
              child: Container(
                width: MediaQuery.of(context).size.width / 2,
                child: Text(
                  “Log in”,
                  textAlign: TextAlign.center,
                ),
              ),
            )

这样的东西对我很有用。

这在一个自包含的小部件中为我工作。

  Widget signinButton() {
    return ButtonTheme(
      minWidth: double.infinity,
      child: new FlatButton(
        onPressed: () {},
        color: Colors.green[400],
        textColor: Colors.white,
        child: Text('Flat Button'),
      ),
    );
  }

// It can then be used in a class that contains a widget tree.

在上面给定的代码中给出match-parent宽度或高度的最简单方法。

...
width: double.infinity,
height: double.infinity,
...