Flutter: widget de visor interactivo

Te has encontrado con varias situaciones en las que tu imagen es demasiado grande para la pantalla del móvil o el contenido de tu tabla no encaja. Para este tipo de situaciones, Flutter proporciona un widget llamado InteractiveViewer Widget. Básicamente, esto le brinda la función de mostrar todo el widget en formato desplazable o al acercar o alejar el widget. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo.

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
})

Propiedades

• alignPanAxis: si es verdadero, la panorámica solo se permite en la dirección del eje horizontal o del eje vertical.
• borderMargin: un margen para los límites visibles del elemento secundario.
• builder: Construye el hijo de este widget.
• child: El Widget hijo que es transformado por InteractiveViewer.
• clipBehavior: si se establece en Clip.none, el niño puede extenderse más allá del tamaño del InteractiveViewer, pero no recibirá gestos en estas áreas. Asegúrese de que InteractiveViewer tenga el tamaño deseado cuando utilice Clip.none.
• restringido: Si las restricciones de tamaño normal en este punto en el árbol de widgets se aplican al elemento secundario.
• hashCode: El código hash para este objeto.
• clave: Controla cómo un widget reemplaza a otro widget en el árbol.
• maxScale: La escala máxima permitida.
• minScale: La escala mínima permitida.
• onInteractionEnd: se llama cuando el usuario finaliza un gesto de panorámica o escala en el widget.
• onInteractionStart: se llama cuando el usuario inicia un gesto de panorámica o escala en el widget.
• onInteractionUpdate: se llama cuando el usuario actualiza un gesto de panorámica o escala en el widget.
• panEnabled: si es falso, el usuario no podrá desplazarse.
• runtimeType: una representación del tipo de tiempo de ejecución del objeto.
• scaleEnabled: si es falso, el usuario no podrá escalar.
• transformationController: un TransformationController para la transformación realizada en el elemento secundario. 

Ejemplo

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",
            ),
          ),
        ),
      ),
    );
  }
}

Producción:

Antes de usar InteractiveViewer:

Después de usar InteractiveViewer:

Explicación

1. Primero, cree el widget principal sin estado.
2. En segundo lugar, use InteractiveViewer dentro del widget Center.
3. En tercer lugar, utilice el margen de límite para establecer los límites de los widgets.
4. Agregue el widget que desee en el elemento secundario de InteractiveViewer.