Scaling Image beyond screen in Flutter

user_8385652 0
Viewed 1650

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.

enter image description here

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.

flutter-layout flutter image
2 Answers

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();
  1. 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.

user_134526400

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.

user_130295160
Related