Flutterexperts

The Interactivity in Flutter just became 100 times better with the new widget called — Interactive Viewer, released in Flutter version 1.20, It immediately became the one thing everyone fell in love with(yes, including me.)

So, What does the widget do ?

By wrapping up your widgets in Interactive Viewer you can do actions such as drag, drop, zoom etc. with your widgets and not only that but with the introduction of Flutter version 1.20 the drag and drop capabilities have became even more polished.

---

An example of what this widget is capable of :

Now, lets talk about how it works:

1. Lets take an image and save it in the assets folder.

2.Now add that image to the pubsepc.yaml file:

assets:
   - assets/tiger.jfif

3. after that we can use the image in our app like this

import 'package:flutter/material.dart';

void main() =>runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String tiger = "assets/tiger.jfif";
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 10.0),
            child: Center(
              child: Image.asset(tiger),
            ),
          ),
        ),
      ),
    );
  }
}

4. Now all we need to do is to wrap that image.asset widget with interactiveViewer and we are done :

Tip: use the alt+enter command on android studio, saves a lot of time.

InteractiveViewer(
  child: Image.asset(tiger),
),

And now you are done, you can now interact with your image however you Like

Now that we know what the widget does and how to use it, lets explore what it is capable of :

There are certain properties of Ineractive Viewer widget so lets explore them.

Note : before we start exploring some of the properties of this widget it will be better to take a look at the official documentation as well.

InteractiveViewer class
API docs for the InteractiveViewer class from the widgets library, for the Dart programming language.api.flutter.dev

Now, we can jump straight into it.

1. maxScale

One of the best and most used properties of this widget would be maxScale, it represents how much you can stretch the image.It takes the value of double in it.

Example :

InteractiveViewer(
  child: Image.asset(tiger),
  maxScale: 5.0,
),

with this you will be able to stretch it 5 times more than what you were able to before, this property helps us to set how much stretch should be allowed on an image.

2. minScale

This property works opposite to maxScale, however it take a double value as well. It represents how much you can squeeze an image.

Example :

InteractiveViewer(
  child: Image.asset(tiger),
  minScale: 0.1,
),

3. boundaryMargin

Any transformation in the image that results in the viewport being able to view outside of the boundaries will instead be stopped at the boundaries,

This property helps us to keep a certain margin between the corners of the image and the viewport boundaries of our device

Example :

InteractiveViewer(
  child: Image.asset(tiger),
  boundaryMargin: EdgeInsets.all(5.0),
),

4. onInteractionEnd

A property that takes a ScaleEndDetails variable and lets you execute whatever function you want inside it, you can even print the details like

Example :

Column(
  children: [
    Expanded(
      child: Center(
        child: InteractiveViewer(
          child: Image.asset(tiger),
          boundaryMargin: EdgeInsets.all(5.0),
          onInteractionEnd: (ScaleEndDetails endDetails) {
            print(endDetails);
            print(endDetails.velocity);
            setState(() {
              velocity = endDetails.velocity.toString();

            });
            },
        ),
      ),
    ),
    Text(velocity)
  ],
),

you can access the velocity from the endDetails, now i have simply used it to display the velocity by which user is stretching the image.

5. controller

Just like Pageview Listview etc this widget also has a controller, It takes the value of TransformationController to be assigned to this widget

Example :

TransformationController controller = TransformationController();

Now using this you can do many changes with the transformationController but first you have to assign it.

InteractiveViewer(
  child: Image.asset(tiger),
  transformationController: controller,
  boundaryMargin: EdgeInsets.all(5.0),
  onInteractionEnd: (ScaleEndDetails endDetails) {
    print(endDetails);
    print(endDetails.velocity);
    setState(() {
      velocity = endDetails.velocity.toString();

    });
    },
),

After assigning it you can do something like reverting the image back to its original position after user is done stretching it, so for that we will use onInteractionEnd with the controller

Before we start, first you need to know that controller can access a special property called “value” which is of type Matrix4

(You might Need to research about matrices before diving straight into using them)

Now we can change the controller’s value inside onInteractionEnd like this

controller.value = Matrix4.identity();

Now what is Matrix4.identity()? Well its basically an identity matrix

Identity Matrix is this :

Now what it does it that it returns the controller to its original value, and that’s what our aim is to return the image to its normal size after user is done transforming it.

TransformationController controller = TransformationController();
String velocity = "VELOCITY";
@override
Widget build(BuildContext context) {
  return MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Scaffold(
      body: SafeArea(
        child: Container(
          child: Column(
            children: [
              Expanded(
                child: Center(
                  child: InteractiveViewer(
                    child: Image.asset(tiger),
                    transformationController: controller,
                    boundaryMargin: EdgeInsets.all(5.0),
                    onInteractionEnd: (ScaleEndDetails endDetails) {
                      print(endDetails);
                      print(endDetails.velocity);
                      controller.value = Matrix4.identity();
                      setState(() {
                        velocity = endDetails.velocity.toString();

                      });
                      },
                  ),
                ),
              ),
              Text(velocity,style: TextStyle(
               fontWeight: FontWeight.bold),)
            ],
          ),
        ),
      ),
    ),
  );
}

These are just basic and most used properties of Interactive Viewer widget, you can find more of them at the official documentation.

Hope you enjoyed reading through the wall of text and gif’s, let me know in comments if you face any problem. I will try my best to help you out.

---

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.