如果创建了小部件，如何将宽度或高度设置为屏幕比例？

Question

如果创建了小部件，如何将宽度或高度设置为屏幕比例？

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        child: Image.network("http://a1.att.hudong.com/60/38/01200000194369136323385641912.jpg"),
        width: 500,
        height: 500,
        decoration: BoxDecoration(
          color: Colors.yellow,
        ),
      ),
    );
  }
}

[您看到我的上部代码，我想将width:Center_height设置为1:2，我该如何实现？我的意思是中心上铺满了屏幕页面Container's height : Center's height = 1:2。

Answer 1

而不是直接传递价值，尝试使用MediaQuery类。范例

height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,

MediaQuery类将返回当前设备的高度/宽度，您可以直接相应地使用它，也可以像这样使用它，

width: MediaQuery.of(context).size.width / 2,

这里，小部件将占据当前屏幕中可用宽度的一半。

Answer 2

使用媒体查询height和Width

height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,

并且像这样实现

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        child: Image.network("http://a1.att.hudong.com/60/38/01200000194369136323385641912.jpg"),
        width: width,
        height: height,
        decoration: BoxDecoration(
          color: Colors.yellow,
        ),
      ),
    );
  }
}