Scaling Image beyond screen in Flutter

Question

I'm trying to scale an image so that it is zoomed in, and the rest of the image is beyond the screen. I already tried the scaling property but it didn't seem to affect my image size.

Is there a property that I can use to achieve this?

class animationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Image.asset(
            'assets/imageMain.JPG',
            height: 300,
            scale: 2,
          ),
        ],
      ),
    );
  }
}

This is the code that isn't working for me.

Solution 1

You can use the InteractiveViewer widget to add interactions to your widgets. It supports pan and scale interactions.

I added a demo on how to use the widget using your code as an example:

1. Define a transformation controller:

final transformationController = TransformationController();

2. Use the InteractiveViewer widget:

    InteractiveViewer(
      transformationController: transformationController, // pass the transformation controller
      onInteractionEnd: (details) {
        setState(() {
          transformationController.toScene(
              Offset.zero); // return to normal size after scaling has ended
        });
      },
      boundaryMargin: EdgeInsets.all(20.0),
      minScale: 0.1, // min scale
      maxScale: 4.6, // max scale
      scaleEnabled: true,
      panEnabled: true,
      child: Image.asset(
        'assets/imageMain.JPG',
        height: 300,
      ),
    );

Read more about the InteractiveViewer widget here:

Interactive Viewer article

InteractiveViewer documentation

Note: Your Flutter version has to be 1.20 for you to be able to use the widget.

Solution 2

You can also mess around with wrapping the image in the FittedBox widget... using it usually helps with sizing its child and it's got lots of good parameters you can set to get it to work specific to your use-case. There's also good documentation.

Secondly, you could wrap it in a InteractiveViewer widget, although this may not be ideal.

Finally, you could potentially wrap your image in a Transform.scale widget and change its scale parameter.

Comments

[spamup]

Is it possible to work without a setState()? I'm working with a statelessWidget so I can't implement such a method.

[void]

Hi @spamup, just seeing this comment, if you wish to use the InteractiveViewer in a Stateless widget. You can.