Guide to InteractiveViewer in Flutter

Last updated on December 14, 2020 A Goodman Loading... Post a comment

There may be times when your Flutter applications display large pictures in a small area of the screen. To see these images clearly, users will have to enlarge them. In the old days, we have to use a third-party plugin or write lots of code for zooming but since Flutter 1.20, we can easily implement zoom-in / zoom-out by using InteractiveViewer.

A InteractiveViewer widget lets users transform its child by dragging to pan or pinching to zoom. To prevent InteractiveViewer from drawing outside of its original size, you can wrap it with a ClipRect widget.

Example

This tiny Flutter app displays an image that can be zoomed and panned around.

Preview:

The code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Kindacode.com'),
        ),
        body: Center(
          child: ClipRect(
            child: InteractiveViewer(
              child: Image.network(
                  'https://www.kindacode.com/wp-content/uploads/2020/12/the-cat.jpg'),
            ),
          ),
        ));
  }
}

API

Constructors

InteractiveViewer({
  Key key, 
  bool alignPanAxis: false, 
  EdgeInsets boundaryMargin: EdgeInsets.zero, 
  bool constrained: true, 
  double maxScale: 2.5, 
  double minScale: 0.8, 
  void onInteractionEnd(ScaleEndDetails details), 
  void onInteractionStart(ScaleStartDetails details), 
  void onInteractionUpdate(ScaleUpdateDetails details), 
  bool panEnabled: true, 
  bool scaleEnabled: true, 
  TransformationController transformationController, 
  @required Widget child
})

Options

NameTypeDescription
alignPanAxisboolf true, panning is only allowed in the direction of the horizontal axis or the vertical axis
boundaryMarginEdgeInsetsA margin for the visible boundaries of the child
child
(required)
WidgetThe Widget to perform the transformations on
constrainedboolWhether the normal size constraints at this point in the widget tree are applied to the child
maxScaledoubleThe maximum allowed scale
minScaledoubleThe minimum allowed scale
onInteractionEndvoidCalled when the user ends a pan or scale gesture on the widget
onInteractionStartvoidCalled when the user begins a pan or scale gesture on the widget
onInteractionUpdatevoidCalled when the user updates a pan or scale gesture on the widget
panEnabledboolIf false, the user will be prevented from panning
scaleEnabledboolIf false, the user will be prevented from scaling
transformationControllerTransformationControllerA TransformationController for the transformation performed on the child

Static Methods

NameDescription
Quad getAxisAlignedBoundingBox(Quad quad)Given a quad, return its axis aligned bounding box
Vector3 getNearestPointInside(Vector3 point, Quad quad)Get the point inside (inclusively) the given Quad that is nearest to the given Vector3
Vector3 getNearestPointOnLine(Vector3 point, Vector3 l1, Vector3 l2)Returns the closest point to the given point on the given line segment
bool pointIsInside(Vector3 point, Quad quad)Returns true iff the point is inside the rectangle given by the Quad, inclusively

Conclusion

This article walked you through an example of using InteractiveViewer which is useful in adding zoom effect to images or other kinds of content. To learn more about Flutter, you can check out our Flutter topic page or Dart topic page.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles