How to implement the InteractiveViewer in Flutter

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

maxScalemaximum allowed scale. Defaults to 2.5
minScaleminimum allowed scale. Defaults to 0.8
child widget where the transformation is performed
transformationController for the transformation performed on the child.
boundaryMarginA margin for the visible boundaries of the child. Defaults to EdgeInsets.zero.
constrainedWhether the size constraints are applied to the child. Defaults to true
scaleEnabledWhether scale gesture is allowed
onInteractionEndCalled when the user ends a pan or scale gesture on the widget.
onInteractionStartCalled when the user begins a pan or scale gesture on the widget.
panEnabledWhether pan gesture is allowed.
alignPanAxisWhether 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