How to rotate a larger-than-screen image without the overflow being clipped off in Flutter?

user_10336149 0
Viewed 284

I have this image that I would like to display full screen and rotate in the background:

Background image

Here it is filling the screen correctly: image fills screen correctly

The problem is, when it rotates, the sides have been clipped off: enter image description here

I've tried every type of box fit. I've tried sizing the container width to double.infinity. I've tried wrapping the image in a SingleChildScrollView. I've tried putting overflow: Overflow.visible on the stack. All day trying things, but nothing seems to be working.

The image needs to continuously fill the screen while rotating. How can I code it so that the edges aren't clipped off?

Here's my code:

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'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Note: I am currently rotating it using SpinPerfect from the animate_do package, but the same clipping problem happens when using Transform.rotate.

Thanks in advance for any direction!

flutter
1 Answers

Here is a solution that works very well:

Use SpinPerfect from the animate_do package (https://pub.dev/packages/animate_do) in combination with the photo_view package (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'),
  ),
)

Thanks to the creator of the animate_do package for the idea. (Very cool dude!)

user_103361490
Related