InteractiveViewer and Attributes

The InteractiveViewer widget in Flutter is a versatile and powerful tool for creating interactive and zoomable user interfaces. It allows users to pan, zoom, and interact with child widgets within a bounded area. The InteractiveViewer is particularly useful when dealing with content that is too large to fit within the screen space.

Here are the primary attributes of the InteractiveViewer widget along with examples:

1. child (Widget):

   • The child widget that will be panned, zoomed, and interacted with.

   • Example:

       InteractiveViewer(
         child: Image.asset('assets/sample_image.jpg'),
       ),
     

2. boundaryMargin (EdgeInsets.all):

   • The margin around the bounded area, ensuring that the child remains within this margin during interactions.

   • Example:

       InteractiveViewer(
         boundaryMargin: EdgeInsets.all(20.0),
         child: Text('Zoom and pan within a margin of 20.0'),
       ),
     

3. minScale (double):

   • The minimum scale factor that the child can be scaled down to.

   • Example:

       InteractiveViewer(
         minScale: 0.5,
         child: Text('Zoom in and out with a minimum scale of 0.5'),
       ),
     

4. maxScale (double):

   • The maximum scale factor that the child can be scaled up to.

   • Example:

       InteractiveViewer(
         maxScale: 2.0,
         child: Text('Zoom in and out with a maximum scale of 2.0'),
       ),
     

5. onInteractionStart, onInteractionEnd, onInteractionUpdate (GestureCallback)?:

   • Callbacks triggered when interactions with the child begin, end, or update.

   • Example:

       InteractiveViewer(
         onInteractionStart: (ScaleStartDetails details) {
           // Handle interaction start
         },
         onInteractionEnd: (ScaleEndDetails details) {
           // Handle interaction end
         },
         onInteractionUpdate: (ScaleUpdateDetails details) {
           // Handle interaction update
         },
         child: Text('Handle interaction events'),
       ),
     

6. transformationController (TransformationController?):

   • A controller that can be used to control the transformation applied to the child.

   • Example:

       TransformationController _controller = TransformationController();
     
       InteractiveViewer(
         transformationController: _controller,
         child: Text('Control transformations with a TransformationController'),
       ),
     

Full Example:

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('InteractiveViewer Example'),
        ),
        body: MyInteractiveViewer(),
      ),
    );
  }
}

class MyInteractiveViewer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return InteractiveViewer(
      boundaryMargin: EdgeInsets.all(20.0),
      minScale: 0.5,
      maxScale: 2.0,
      onInteractionStart: (ScaleStartDetails details) {
        print('Interaction started');
      },
      onInteractionEnd: (ScaleEndDetails details) {
        print('Interaction ended');
      },
      onInteractionUpdate: (ScaleUpdateDetails details) {
        print('Interaction updated');
      },
      child: Image.asset('assets/sample_image.jpg'),
    );
  }
}

This example demonstrates a simple Flutter application with an InteractiveViewer containing an image. The boundaryMargin, minScale, and maxScale properties are utilized to customize the interactive behavior, and interaction callbacks (onInteractionStart, onInteractionEnd, onInteractionUpdate) are added for event handling.