Flutter – InteractiveViewer Widget

You have come across various situations when your image is too large for the mobile screen or the content of your table is not fitting. For this kind of situation, Flutter provides a Widget called InteractiveViewer Widget. This basically provides you with the feature of showing the entire widget in scrollable format or by zooming in or out of the widget. A sample video is given below to get an idea about what we are going to do in this article.

Constructor

Syntax:
InteractiveViewer({
    Key? key, 
    required Widget child
    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
})

Properties

• alignPanAxis: If true, panning is only allowed in the direction of the horizontal axis or the vertical axis.
• boundaryMargin: A margin for the visible boundaries of the child.
• builder: Builds the child of this widget.
• child: The child Widget that is transformed by InteractiveViewer.
• clipBehavior: If set to Clip.none, the child may extend beyond the size of the InteractiveViewer, but it will not receive gestures in these areas. Be sure that the InteractiveViewer is the desired size when using Clip.none.
• constrained: Whether the normal size constraints at this point in the widget tree are applied to the child.
• hashCode: The hash code for this object.
• key: Controls how one widget replaces another widget in the tree.
• maxScale: The maximum allowed scale.
• minScale: The minimum allowed scale.
• 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.
• onInteractionUpdate: Called when the user updates a pan or scale gesture on the widget.
• panEnabled: If false, the user will be prevented from panning.
• runtimeType: A representation of the runtime type of the object.
• scaleEnabled: If false, the user will be prevented from scaling.
• transformationController: A TransformationController for the transformation performed on the child. 

Example

Dart

import 'package:flutter/material.dart';

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

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

  // This is the root of your application
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const GFG(),
      debugShowCheckedModeBanner: false,
    );
  }
}

// Creating a stateless widget
class GFG extends StatelessWidget {
  const GFG({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Base of your application
    return Scaffold(
      // Widget to make everything
      // inside it center
      body: Center(
        child: InteractiveViewer(
          // boundary of image
          boundaryMargin: const EdgeInsets.all(20),
          minScale: 0.1,
          maxScale: 1.6,
          child: Container(
            height: 700,
            width: 500,
            // Using image from local storage
            child: Image.asset(
              "assets/avengers.jpg",
            ),
          ),
        ),
      ),
    );
  }
}

Output:

Before using InteractiveViewer:

After using InteractiveViwer:

Explanation

1. First, create the stateless main widget.
2. Second, use InteractiveViewer inside the Center widget.
3. Third, use the boundaryMargin to set boundaries for widgets.
4. Add the widget you want in the child of InteractiveViewer.