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

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

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


当前回答

@Mohit Suthar,

找到了一个最好的解决方案,匹配父宽以及高度如下

new Expanded(
          child: new Container(
              padding: EdgeInsets.all(16.0),
              margin: EdgeInsets.all(16.0),
              decoration: new BoxDecoration(
                  color: Colors.white,
                  borderRadius:
                      const BorderRadius.all(const Radius.circular(8.0)),
                  border: new Border.all(color: Colors.black, width: 1.0)),
              child: new Text("TejaDroid")),
        ), 

在这里,您可以检查扩展控制器获得完整的宽度和高度。

其他回答

你可以用MaterialButton来做

MaterialButton(
     padding: EdgeInsets.all(12.0),
     minWidth: double.infinity,
     onPressed: () {},
    child: Text("Btn"),
)

最简单的方法是使用一个包装在容器中的FlatButton,默认情况下,按钮接受其父的大小,并为容器分配所需的宽度。

            Container(
                  color: Colors.transparent,
                  width: MediaQuery.of(context).size.width,
                  height: 60,
                  child: FlatButton(
                    shape: new RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(30.0),
                    ),
                    onPressed: () {},
                    color: Colors.red[300],
                    child: Text(
                      "Button",
                      style: TextStyle(
                        color: Colors.black,
                        fontFamily: 'Raleway',
                        fontSize: 22.0,
                      ),
                    ),
                  ),
                )

输出:

您可以设置fixedSize。将ButtonStyle的宽度设置为一个非常大的数字,如double.maxFinite。如果你不想指定高度,你也可以使用Size.fromWidth()构造函数:

ElevatedButton(
  child: const Text('Button'),
  style: ElevatedButton.styleFrom(
    fixedSize: const Size.fromWidth(double.maxFinite),
  ),
),

现场演示

更新:

在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(...),
)

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

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