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,
- Constrainted
By default, if you set any image there, they take this as a squeeze way(they try to show the full image on this small screen)
So as your requirement you set false if you need to show only some part of the image.
2. ScaleEnable
If false, the user will be prevented from scaling.
This means they set 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 used to 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 your 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 than your view, try this InteractiveViewer.
If you got something wrong? Mention it in the comments. I would love to improve. your support means a lot to me! If you enjoy the content, I’d be grateful if you could consider subscribing to my YouTube channel as well.
I am Shirsh Shukla, a creative Developer, and a Technology lover. You can find me on LinkedIn or maybe follow me on Twitter or just walk over my portfolio for more details. And of course, you can follow me on GitHub as well.
Have a nice day!🙂
