A widget magnifier can make an object easier to see by enlarging it, using colour filters, adding light with a flashlight or close editing and revision of an image, and adjusting the brightness or contrast of the images.
Today we will implement the widget magnifier in flutter using RawMagnifier widget which is an in-build widget provided by the flutter SDK.
Need of widget magnifier in flutter
- Magnifier widget use to magnify everything on the screen or every widget shown on the screen.
- Magnifying small text displayed on the maps or difficult to read point on the maps.
- In web application magnify help to zoom the images for photo editing applications.
- Allows for zooming the product images and product page.
You may also check our flutter app development company page.
Implementation
First of all we will create our user interface to display the content on the screen and above the content we will add magnifier widget using stack widget. So let’s start the implementation.
User Interface
Firstly create a stateful widget which contains our user interface code as shown below :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
class MagnifierWidget extends StatefulWidget { const MagnifierWidget({Key? key}) : super(key: key); @override State<MagnifierWidget> createState() => _MagnifierWidgetState(); } class _MagnifierWidgetState extends State<MagnifierWidget> { late Offset dragGesturePosition; String data = ""; double magnifyScale = 2; @override void initState() { super.initState(); dragGesturePosition = const Offset(0, 0); data = "Lorem ipsum dolor sit amet. Et itaque dolorem ea exercitationem commodi sed nostrum repellat eos alias quaerat. Et magni officiis in odit modi et provident maxime a voluptatem voluptates et magni voluptas."; } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("Magnifier demo"), ), body: GestureDetector( onPanUpdate: (DragUpdateDetails details) => setState( () { dragGesturePosition = details.localPosition; }, ), ), ); } } |
User interface contains the simple Gesture detector in body which detect the drag gesture and update the variable dragGesturePosition.
dragGesturePosition :- It contains the position of the magnifier widget, initially is set to top left Offset(0, 0).
magnifyScale :- defines the how much zoomed the widgets on the screen, initially set to 2.
data :- String variable contains Text to display on the screen.
Want to learn about Draggable widget in flutter.
Design part
Add the following code as child of gesture detector widget, SizedBox use to define height and width for the content.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
SizedBox( height: MediaQuery.of(context).size.height, width: MediaQuery.of(context).size.width, child: Stack(children: [ Column( children: [ Container( margin: const EdgeInsets.all(10.0), padding: const EdgeInsets.symmetric( vertical: 10.0, horizontal: 15), child: Text( data + data, ), ), const CircleAvatar( radius: 150, backgroundImage: AssetImage( "assets/images/flowerImage.jpg", )), ], ), Positioned( left: dragGesturePosition.dx, top: dragGesturePosition.dy, child: RawMagnifier( decoration: MagnifierDecoration( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(200), side: const BorderSide(color: Colors.black, width: 3), ), ), size: const Size(200, 80), magnificationScale: magnifyScale, ), ), ]), ) |
We have used simple text and a asset image to display on the user interface.
In designing part we have used Stack widget to show the magnifier on top of the text and image widget.
RawMagnifier :- displayed top of the widgets on the UI.
Positioned widget :- update the position of magnify widget when the user drag it on the screen and move to the particular position.
size :- defines the size of the magnifier widget (width and height).
decoration :- we can provide the customization to the magnifier widget using the MagnifierDecoration class. By this we can add borders, changes the colour and shape, and update the opacity of the magnification.
Use Stack in flutter
User interface Output
Widget Magnifier User Interface
RawMagnifier class
|
1 2 3 4 5 6 7 8 9 10 |
RawMagnifier( decoration: MagnifierDecoration( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(200), side: const BorderSide(color: Colors.black, width: 3), ), ), size: const Size(200, 80), magnificationScale: magnifyScale, ), |
Properties of RawMagnifier class :
child :- optional widget to place inside the lens of the RawMagnifier.
decoration :- provide decoration to the magnifier.
magnificationScale :- How “zoomed in” the magnification subject is in the lens.
size :- The size of the magnifier.
Full source code
Below is the full source code for the implementation.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
class MagnifierWidget extends StatefulWidget { const MagnifierWidget({Key? key}) : super(key: key); @override State<MagnifierWidget> createState() => _MagnifierWidgetState(); } class _MagnifierWidgetState extends State<MagnifierWidget> { late Offset dragGesturePosition; String data = ""; double magnifyScale = 2; @override void initState() { super.initState(); dragGesturePosition = const Offset(0, 0); data = "Lorem ipsum dolor sit amet. Et itaque dolorem ea exercitationem commodi sed nostrum repellat eos alias quaerat. Et magni officiis in odit modi et provident maxime a voluptatem voluptates et magni voluptas."; } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text("Magnifier demo"), ), body: GestureDetector( onPanUpdate: (DragUpdateDetails details) => setState( () { dragGesturePosition = details.localPosition; }, ), child: SizedBox( height: MediaQuery.of(context).size.height, width: MediaQuery.of(context).size.width, child: Stack(children: [ Column( children: [ Container( margin: const EdgeInsets.all(10.0), padding: const EdgeInsets.symmetric( vertical: 10.0, horizontal: 15), child: Text( data + data, ), ), const CircleAvatar( radius: 150, backgroundImage: AssetImage( "assets/images/flowerImage.jpg", )), ], ), Positioned( left: dragGesturePosition.dx, top: dragGesturePosition.dy, child: RawMagnifier( decoration: MagnifierDecoration( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(200), side: const BorderSide(color: Colors.black, width: 3), ), ), size: const Size(200, 80), magnificationScale: magnifyScale, ), ), ]), ), ), floatingActionButton: Column( mainAxisSize: MainAxisSize.min, children: [ InkWell( child: Container( padding: const EdgeInsets.all(8), decoration: BoxDecoration( shape: BoxShape.circle, color: Colors.deepPurple.shade300), child: const Icon( Icons.add, size: 40, )), onTap: () { setState(() { magnifyScale++; }); }, ), InkWell( child: Container( margin: EdgeInsets.only(top: 6), padding: EdgeInsets.all(8), decoration: BoxDecoration( shape: BoxShape.circle, color: Colors.deepPurple.shade300), child: Icon( Icons.remove, size: 40, )), onTap: () { if (magnifyScale > 1) { setState(() { magnifyScale--; }); } }, ) ], )); } } |
floatingActionButton :- we have added two button to increase and decrease the magnifyScale property of the widget.
Learn more about gestures in flutter
Output of the Source code
Widget Magnifier
A widget magnifier can make an object easier to see by enlarging it, using colour filters, adding light with a flashlight or close editing and revision of an image, and adjusting the brightness or contrast of the images.
Conclusion
Thanks for reading this article ❤️
I hope this blog will help you to learn about how to Use Widget Magnifier in flutter and you will be able to implement it. For more updates, make sure to keep following Mobikul Blogs to learn more about flutter and android.
Happy Learning ✍️