Using InteractiveViewer widget in Flutter

Last updated on February 18, 2022 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.2, we can easily implement zoom-in / zoom-out by using InteractiveViewer.

An 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.

  • If you run it with an iOS simulator, you can perform zooming in & out by holding Option and Shift keys and moving your mouse.
  • If you’re working with an Android emulator, press and hold Ctrl (Windows) or Command (Mac) and double-click your mouse.

Preview:

The code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const 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, 
  Clip clipBehavior = Clip.hardEdge, 
  bool alignPanAxis = false, 
  EdgeInsets boundaryMargin = EdgeInsets.zero, 
  bool constrained = true, 
  double maxScale = 2.5, 
  double minScale = 0.8, 
  GestureScaleEndCallback? onInteractionEnd, 
  GestureScaleStartCallback? onInteractionStart,
  GestureScaleUpdateCallback? onInteractionUpdate, 
  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

You can find more details about the InteractiveViewer class in the official docs.

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. If you’d like to explore more new and interesting stuff in the Flutter and mobile development world, take a look at the following articles:

You can also check out our Flutter category page or Dart category page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles