Interactive Viewer in Flutter

In this article we will discuss about new flutter widget, that recently I here.

Screens are often smaller than what you want to show on them.

A big image or table,just want to fit or show is this screen like a dream.

So,We got a widget for that.

Wrap your larger or extra large humongous widget with InteractiveViewer to zoom,Squeeze, limit, pen and customize and more.

Just see this sample code,

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'InteractiveViewer Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final transformationController = TransformationController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Interactive Viewer"),),
backgroundColor: Colors.black38,
body: InteractiveViewer(
transformationController: transformationController,
boundaryMargin: EdgeInsets.all(20.0),
minScale: 0.1,
maxScale: 1.6,
// You can off zooming by setting scaleEnable to false
//scaleEnabled: false,
onInteractionStart: (_)=>print("Interaction Started"),
onInteractionEnd: (details) {
setState(() {
transformationController.toScene(Offset.zero);
});
},
onInteractionUpdate: (_)=>print("Interaction Updated"),
child: ClipRRect(borderRadius: BorderRadius.circular(15),child: Image.network("https://images.unsplash.com/photo-1555156806-4619c2286156?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60")),
),

);
}
}

Now we discuss what proper they provide, so first is,

  1. Constrainted

By default if you set any image there, they take this as squeeze way(they try to show full image in this small screen)

So as your requirement you set false if you need to show only some part of image.

2. ScaleEnable

If false, the user will be prevented from scaling.

Means they set to movement limits.

3. boundarymargin

A margin for the visible boundaries of the child.
Any transformation that results in the viewport being able to view outside of the boundaries will be stopped at the boundary. The boundaries do not rotate with the rest of the scene, so they are always aligned with the viewport.
To produce no boundaries at all, pass infinite EdgeInsets.

Like, asEdgeInsets.all(double.infinity).

4. onInteractionStart

This use for register callbacks,

They Called when the user begins a pan or scale gesture on the widget.
Will be called even if the interaction is disabled with panEnabled or scaleEnabled.

5. TrasformationController

By use of these you can provide own controller for programmatically pen and zoom.

In other words,

A TransformationController for the transformation performed on the child.
Whenever the child is transformed, the Matrix4value is updated and all listeners are notified. If the value is set, InteractiveViewer will update to respect the new value.

So, if your widget is larger then your view, try to this InteractiveViewer.

if you got something wrong? Mention it in the comments. I would love to improve.
I am Shirsh Shukla. A creative developer and a Technology lover. You can find me on  or maybe follow me on .
Have a nice day!🙂

Android Developer | Flutter Developer | Technical Blogger at medium | community member at stackoverflow | Organizer @FlutterIndore on Twitter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store