颤动错误A RenderFlex溢出。如何设置图像适配屏幕？

Question

我想在同一行显示2张图片，就像这样。

​

​

这是我的代码。

class Page extends StatelessWidget {
  final assetsAudioPlayer = AssetsAudioPlayer();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Flexible(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Image(
                    image: AssetImage('images/test.png'),
                    fit: BoxFit.fill,
                  ),
                  Image(
                    image: AssetImage('images/test.png'),
                    fit: BoxFit.fill,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

当我使用小图像时，它没有错误，但当我使用大图像时，它显示错误如下。

════════ Exception caught by rendering library ═════════════════════════════════
A RenderFlex overflowed by 156 pixels on the right.
The relevant error-causing widget was
Row

如何设置图像适配屏幕？

Answer 1

除了将fit : BoxFit.fill更改为BoxFit.contain外，还可以尝试在SizedBox小部件中包装图像。这应该类似于下面的imo：

class Page extends StatelessWidget {
  final assetsAudioPlayer = AssetsAudioPlayer();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Flexible(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
//Wraping in SizedBox widget
                  SizedBox(
                    height: //specifying whatever height,
                    width:  //and width you want,
                    child: Image(
                      image: AssetImage('images/test.png'),
                      fit: BoxFit.contain,
                    ),
                  ),
                  SizedBox(
                    height: //same,
                    width:  //here,
                    child: Image(
                      image: AssetImage('images/test.png'),
                      fit: BoxFit.contain,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}