CODEWITHSUNDEEP
imageflutterflutter-layout
user8385652
user8385652

Reputation: 109

Scaling Image beyond screen in Flutter

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.

Upvotes: 2

Views: 2982

Answers (2)

Matthew Trent
Matthew Trent

Reputation: 3264

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.

Upvotes: 2

timilehinjegede
timilehinjegede

Reputation: 14043

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.

Upvotes: 5

Related Questions