How to implement the InteractiveViewer in Flutter

In this guide, we will discuss How to implement Interactive Viewer in Flutter. For this, we should know some basic information about what an Interactive Viewer in flutter is. InteractiveViewer is a widget that allows pan and zoom interactions with its child. One of the common use cases of the widget is for displaying an image where the user can perform zoom (pinch-to-zoom) and pan gestures on the image. Here The only required parameter is a child which is  Widget where the transformation will be applied on.

Some of the Properties of InteractiveViewer are given below

maxScale	maximum allowed scale. Defaults to 2.5
minScale	minimum allowed scale. Defaults to 0.8
child	widget where the transformation is performed
transformationController	for the transformation performed on the child.
boundaryMargin	A margin for the visible boundaries of the child. Defaults to EdgeInsets.zero.
constrained	Whether the size constraints are applied to the child. Defaults to true
scaleEnabled	Whether scale gesture is allowed
onInteractionEnd	Called when the user ends a pan or scale gesture on the widget.
onInteractionStart	Called when the user begins a pan or scale gesture on the widget.
panEnabled	Whether pan gesture is allowed.
alignPanAxis	Whether panning is only allowed in the direction of the horizontal or the vertical axis.

Let’s take an example of how we can implement the Animated Icon in our flutter application.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class InteractiveImageScreen extends StatefulWidget {
  const InteractiveImageScreen({Key? key}) : super(key: key);

  @override
  State<InteractiveImageScreen> createState() => _InteractiveImageScreenState();
}

class _InteractiveImageScreenState extends State<InteractiveImageScreen> {
  TransformationController controller = TransformationController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Interactive Viewer'),
        centerTitle: true,
        backgroundColor: Colors.red,
      ),
      body: Container(
        color: Colors.blue,
        child: Center(
          child: InteractiveViewer(
            constrained: false,
            maxScale: 2,
            minScale: 0.5,
            boundaryMargin: const EdgeInsets.all(double.infinity),
            transformationController: controller,
            onInteractionEnd: (details) {
              setState(() {
                controller.toScene(Offset.zero);
              });
            },
            child: ClipRRect(
              borderRadius: BorderRadius.circular(50),
              child: Image.asset(
                'assets/sagar.jpg',
                height: 400,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:

Thank you for reading the Guide about How to implement the InteractiveViewer in Flutter. Also read: How To Implement Animated Loading Spinner In Flutter