在颤动中，我希望容器内的图标占据容器的最大尺寸

Question

Widget build(BuildContext context) {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Flexible(
            flex: 1,
            child: Container(
              color: Colors.blueAccent
            ),
          ),
          Flexible(
            flex: 4,
            child: Container(
              color: Colors.deepOrangeAccent,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                //mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Icon(Icons.image),
                ],
              ),
            ),
          ),
          Flexible(
            flex: 2,
            child: Container(color: Colors.blueGrey),
          ),
        ],
      ),
    );

Screenshot

图标仅采用其原始大小。我想让它填满容器。我试过 LayoutBuilder 但 BoxConstraints 有无限高度警告。请建议任何其他选项，而无需为任何小部件使用硬编码大小。

Answer 1

编辑； 因此，在阅读您的评论后，您应该改用 FittedBox（如评论中所建议）和 BoxFit.Fill 属性；所以：

 <Widget>[ Expanded(child:FittedBox(child: Icon(Icons.image),fit: BoxFit.fill)), ]

--

如果您可以将 icon 更改为 Image 那么您可以使用 BoxFit.fill 属性拉伸图像以填充整个容器（将图像包裹在也扩展了小部件）。

这是一个带有占位符的示例：

Flexible(
        flex: 4,
        child: Container(
          color: Colors.deepOrangeAccent,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            //mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Expanded(child:                          Image.network('https://picsum.photos/250?image=9', fit:BoxFit.fill)


                      )

            ],
          ),
        ),

Answer 2

我会采用 LayoutBuilder 方法。您提到您有无限警告，这可能是因为您没有在父容器的高度或宽度之间动态选择。

根据您设备的方向，您可能需要选择一个。最简单的方法是选择两者中较小的一个。

Widget build(BuildContext context) {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Flexible(
            flex: 1,
            child: Container(color: Colors.blueAccent),
          ),
          Flexible(
            flex: 4,
            child: Container(
              color: Colors.deepOrangeAccent,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                //mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  LayoutBuilder(builder: (context, constraints) {
                    var height = constraints.maxHeight;
                    var width = constraints.maxWidth;

                    return Icon(FontAwesomeIcons.addressBook, size: min(height, width));
                  }),
                ],
              ),
            ),
          ),
          Flexible(
            flex: 2,
            child: Container(color: Colors.blueGrey),
          ),
        ],
      ),
    );
  }
}

注意：您需要导入 'dart:math' 包才能使用 min() 功能。

在颤动中，我希望容器内的图标占据容器的最大尺寸

In flutter, I want the Icon within a container to take up maximum size of the container

icons

containers

sizing

flutter