Zoomer - To Zoom Any Widget
- Zoom
- Rotate
- Translate
Follow Installation guide of Pub.dev
-
Zoomer Class
Zoomer( {this.child, // Child Can Be Any Widget, you want to make zoomable this.controller, // ZoomerControoller To Control Zoomer this.height, // Height this.width, // Width this.background, // background of Zoomer. It is BoxDecoration. this.maxScale = 2.0, // maximum Scale this.minScale = 0.5, // mininum Scale this.enableTranslation = false, // Want to move it by touch this.enableRotation = false, // Want to rotate it this.clipRotation = true}); // Clips the Rotation to 90-degrees
-
ZoomerController Class
ZoomerController({initialScale = 1.0}) //To Set initial Scale
-
APIs
-
double get scale
scale = _controller.scale
-
set setScale(double value)
_controller.setScale = 1.5
-
Offset get offset
offset = _controller.offset
-
set setOffset(Offset value)
_controller.setOffset = Offset(0,10)
-
double get rotation
rotation = _controller.rotation
-
set setRotation(double value)
_controller.setRotation = pi/4
Note: Rotation is in Radians -
onZoomStart()
_controller.onZoomStart( (){ print( _controller.scale ); } )
-
onZoomUpdate()
_controller.onZoomUpdate( (){ print( _controller.scale ); } )
-
onZoomEnd()
_controller.onZoomEnd( (){ print( _controller.scale ); } )
-
-
ZoomerController _zoomerController = ZoomerController(initialScale: 1.0);
String _zoomDetails = "Zoom";
@override
Widget build(BuildContext context) {
_zoomerController.onZoomUpdate((){
setState(() {
_zoomDetails = "Scale = "+ _zoomerController.scale.toStringAsFixed(2);
_zoomDetails += "\nRotation = "+ _zoomerController.rotation.toStringAsFixed(2);
_zoomDetails += "\nOffset = ("+ _zoomerController.offset.dx.toStringAsFixed(2)+","+_zoomerController.offset.dy.toStringAsFixed(2)+")";
});
});
return Scaffold(
appBar: AppBar(title: Text("Zommer Example"),),
body:
Center(child:
Stack(
children: [
Align(alignment: Alignment.topCenter,child: SizedBox(height: 150,child: Text(_zoomDetails,textAlign: TextAlign.center,style: TextStyle(fontSize: 30),))),
Center(
child:
Zoomer(
enableTranslation: true,
enableRotation: true,
clipRotation: true,
maxScale: 2,
minScale: 0.5,
background:BoxDecoration(color: Colors.white),
height: 300,
width: 300,
controller: _zoomerController,
child: Container(decoration: BoxDecoration(color: Colors.green),height: 200,width: 200,child: FlutterLogo(),)),
),
])),
);
}
}
I Am Rutvik Rana, Medical Student cum Passionate Coder, Invite You To My Coding(noob to pro) Channel.