Interactive Viewer Widget and Attributes

The Interactive Viewer widget in Flutter provides an interactive way to view and manipulate child widgets. It's particularly useful for scenarios where users need to zoom, pan, or interact with content such as images, maps, or custom widgets.

2. Widget and Attributes

The Interactive Viewer widget is defined in Flutter as follows:

InteractiveViewer({
  Key? key,
  Axis axis = Axis.horizontal,
  bool clipBehavior = Clip.hardEdge,
  double maxScale = 2.0,
  double minScale = 0.8,
  double scaleEnabled = true,
  double panEnabled = true,
  GestureScaleEndCallback? onInteractionEnd,
  GestureScaleStartCallback? onInteractionStart,
  GestureScaleUpdateCallback? onInteractionUpdate,
  GestureTapCallback? onDoubleTap,
  GestureTapCallback? onDoubleTapDown,
  GestureTapCallback? onTap,
  GestureLongPressCallback? onLongPress,
  GestureLongPressMoveUpdateCallback? onLongPressMoveUpdate,
  GestureLongPressEndCallback? onLongPressEnd,
  InteractiveViewerBoundaryCallback? boundaryCallback,
  HitTestBehavior? hitTestBehavior,
  Widget? child,
})

Attributes:

• axis (Axis): The scrolling direction of the child content, either Axis.horizontal or Axis.vertical.

• clipBehavior (Clip): Defines how child content should be clipped. Options include Clip.hardEdge and Clip.none.

• maxScale (double): The maximum scale that the user can zoom in on the content.

• minScale (double): The minimum scale that the user can zoom out on the content.

• scaleEnabled (bool): Enables or disables scaling interactions.

• panEnabled (bool): Enables or disables panning interactions.

• onInteractionStart (GestureScaleStartCallback): Callback function triggered when a scaling interaction begins.

• onInteractionUpdate (GestureScaleUpdateCallback): Callback function triggered during a scaling interaction.

• onInteractionEnd (GestureScaleEndCallback): Callback function triggered when a scaling interaction ends.

• onDoubleTap (GestureTapCallback): Callback function triggered on a double-tap gesture.

• onTap (GestureTapCallback): Callback function triggered on a tap gesture.

• onLongPress (GestureLongPressCallback): Callback function triggered on a long-press gesture.

• boundaryCallback (InteractiveViewerBoundaryCallback): A callback function to handle boundaries of the content during interactions.

• hitTestBehavior (HitTestBehavior): Determines how the interactive viewer should behave during hit tests.

3. Example

Let's create a simple example to demonstrate the usage of the Interactive Viewer widget. Consider displaying an image that users can zoom in, zoom out, and pan.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Interactive Viewer Example'),
        ),
        body: Center(
          child: InteractiveViewer(
            boundaryCallback: (constraints) =>
                Rect.fromLTRB(0, 0, constraints.biggest.width, constraints.biggest.height),
            minScale: 0.8,
            maxScale: 2.0,
            child: Image.network(
              'https://example.com/sample-image.jpg',
              fit: BoxFit.contain,
            ),
          ),
        ),
      ),
    );
  }
}

In this example, the InteractiveViewer widget wraps an Image widget, allowing users to interact with the image through zooming and panning.