Android App Development
iOS App Development
Flutter App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 22.214.171.124 release ready!
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.
You may also check our flutter app development company page.
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.
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.
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
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.
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
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 ✍️
Your email address will not be published. Required fields are marked*
Save my name email and website in this browser for the next time I comment.
Be the first to comment.
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.