In this guide, we will discuss How to implement Interactive Viewer in Flutter. For this, we should know some basic information about what an Interactive Viewer in flutter is. InteractiveViewer
is a widget that allows pan and zoom interactions with its child. One of the common use cases of the widget is for displaying an image where the user can perform zoom (pinch-to-zoom) and pan gestures on the image. Here The only required parameter is a child which is Widget
where the transformation will be applied on.
Some of the Properties of InteractiveViewer are given below
maxScale | maximum allowed scale. Defaults to 2.5 |
minScale | minimum allowed scale. Defaults to 0.8 |
child | widget where the transformation is performed |
transformationController | for the transformation performed on the child. |
boundaryMargin | A margin for the visible boundaries of the child. Defaults to EdgeInsets.zero . |
constrained | Whether the size constraints are applied to the child. Defaults to true |
scaleEnabled | Whether scale gesture is allowed |
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. |
panEnabled | Whether pan gesture is allowed. |
alignPanAxis | Whether panning is only allowed in the direction of the horizontal or the vertical axis. |
Let’s take an example of how we can implement the Animated Icon in our flutter application.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class InteractiveImageScreen extends StatefulWidget {
const InteractiveImageScreen({Key? key}) : super(key: key);
@override
State<InteractiveImageScreen> createState() => _InteractiveImageScreenState();
}
class _InteractiveImageScreenState extends State<InteractiveImageScreen> {
TransformationController controller = TransformationController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Interactive Viewer'),
centerTitle: true,
backgroundColor: Colors.red,
),
body: Container(
color: Colors.blue,
child: Center(
child: InteractiveViewer(
constrained: false,
maxScale: 2,
minScale: 0.5,
boundaryMargin: const EdgeInsets.all(double.infinity),
transformationController: controller,
onInteractionEnd: (details) {
setState(() {
controller.toScene(Offset.zero);
});
},
child: ClipRRect(
borderRadius: BorderRadius.circular(50),
child: Image.asset(
'assets/sagar.jpg',
height: 400,
),
),
),
),
),
);
}
}
Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:
Thank you for reading the Guide about How to implement the InteractiveViewer in Flutter. Also read: How To Implement Animated Loading Spinner In Flutter