flutter - 如何旋转大于屏幕的图像而不会在 Flutter 中剪掉溢出？

Question

我有这张图片，我想全屏显示并在后台旋转:

这里是正确填充屏幕:

问题是，当它旋转时，边被剪掉了:

我已经尝试过所有类型的盒子。我试过将容器宽度调整为 double.infinity。我试过将图像包装在 SingleChildScrollView 中。我试过将 overflow: Overflow.visible 放在堆栈上。一整天都在尝试，但似乎没有任何效果。

图像需要在旋转的同时不断填满屏幕。我如何对其进行编码才能使边缘不被剪掉？

这是我的代码:

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          children: <Widget>[
            SpinPerfect(
              infinite: true,
              duration: Duration(seconds: 10),
              child: Image.asset(
                'assets/images/star-burst.png',
                fit: BoxFit.none,
              ),
            ),
            Container(
              child: Center(
                child: Text('This is Screen 1'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

注意:我目前正在使用 animate_do 包中的 SpinPerfect 旋转它，但在使用 Transform.rotate 时会发生同样的裁剪问题。

提前感谢您的指导!

Answer 1

这是一个非常有效的解决方案:

将 animate_do 包 ( https://pub.dev/packages/animate_do ) 中的 SpinPerfect 与 photo_view 包 ( https://pub.dev/packages/photo_view ) 结合使用。

SpinPerfect(
  infinite: true,
  spins: 1,
  duration: Duration(seconds: 60),
  child: PhotoView(
    disableGestures: true,
    backgroundDecoration: BoxDecoration(color: Colors.transparent),
    initialScale: PhotoViewComputedScale.covered * 2.7,
    imageProvider: AssetImage('assets/images/background.jpg'),
  ),
)

感谢 animate_do 包的创建者提出的想法。 (非常酷的家伙!)