如何修复Aspectratio小部件隐藏其子级？

Question

我正在尝试将materialbutton小部件制成一个正方形。我希望其中四个按钮能够形成自己的正方形。像这样：

所以我尝试了这个：

@override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.green,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Row(
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                AspectRatio(
                  aspectRatio: 1,
                  child: MaterialButton(
                    child: Icon(
                      Icons.camera_alt,
                      color: Colors.blue,
                      size: 42,
                    ),
                    color: Colors.red,
                    onPressed: () => {},
                  ),
                ),
              ],
            )
          ],
        ));
  }

我希望在左上角有一个方形的材质按钮，但是我只是得到了一个空的（绿色）屏幕。

Answer 1

您需要做几件事。您可以在行和列中使用InstrisicWidth和IntrinsicHeight小部件：

Material(
      child: IntrinsicHeight(
        child: IntrinsicWidth(
          child: Container(
            color: Colors.blue,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 5),
              child: Row(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 5),
                    child: Column(
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.all(5),
                          child: Container(
                            color: Colors.red,
                            child: Padding(
                              padding: const EdgeInsets.all(10),
                              child: Center(
                                child: Icon(Icons.camera_alt),
                              ),
                            ),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(5),
                          child: Container(
                            color: Colors.red,
                            child: Padding(
                              padding: const EdgeInsets.all(10),
                              child: Center(
                                child: Icon(Icons.info),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 5),
                    child: Column(
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.all(5),
                          child: Container(
                            color: Colors.red,
                            child: Padding(
                              padding: const EdgeInsets.all(10),
                              child: Center(
                                child: Icon(Icons.home),
                              ),
                            ),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(5),
                          child: Container(
                            color: Colors.red,
                            child: Padding(
                              padding: const EdgeInsets.all(10),
                              child: Center(
                                child: Icon(Icons.thumb_up),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );

此代码的最终结果是您所需要的，4平方创建一个新的正方形：