Start a Project

Widget Magnifier in flutter

widget-magnifier-in-flutter

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

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 :-

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.

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

RawMagnifier class

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.

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

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 ✍️

References

https://medium.flutterdevs.com/rawmagnifier-in-flutter-6e311531c0b#:~:text=To%20use%20RawMagnifier()%20widget,magnifier%20will%20appear%20on%20it.

Exit mobile version