How to zoom in SVG picture freely in Flutter

Question

I am using flutter_svg package to show svg picture in flutter but I want to be able to zoom into this picture without losing the svg properties of keeping the resolution, I have tried to use photo_view for zooming capabilities and flutter_svg_provider to use svg picture as image provider but it's not working properly.

So is there a way to be able to zoom and move freely in SVG picture in Flutter?

Answer 1

To zoom and move freely in an SVG picture you can simply use InteractiveViewer widget which is built in Flutter SDK itself and allows you to zoom and pan its child Widget. The minScale and maxScale properties control the minimum and maximum zoom levels. Also, do not forget to add the image asset to pubspec.yaml¹ in case you're using local svg. If you're using network image, then you can use the SVG SvgPicture.network function to load an SVG image from a URL. Also, you can use SvgPicture.asset(like in the below example) or SvgPicture.file if your SVG is located in your app's assets or device storage, respectively.

// ...rest
body: Center(
  child: InteractiveViewer(
    minScale: 0.5,
    maxScale: 4.0,
    child: SvgPicture.asset(
      "assets/images/sample.svg", // Replace with the name of your SVG file
       height: 200,
     ),
   ),
),

SAMPLE DEMO

Output:

---

¹Adding an image asset:

1. Create an assets folder at the root level of your project.

2. Inside the assets folder, you can create subdirectories to organize your assets, such as an images folder for image assets.

3. Place the svg image inside the images folder.

4. Open your pubspec.yaml file and add the assets section under the flutter key. Something like:

   flutter:
     uses-material-design: true
     assets:
       - assets/images/your_image.svg