Flutter Tutorial - How To Pinch To Zoom An Image | The Right Way | Zoom In/Out Images

[@HeyFlutter]

This might help you :) 👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com Source Code: github.com/JohannesMilke/pinch_zoom_image Zoom Image On Double Tap: kzbin.info/www/bejne/amXQgXurprWairc 3D Flip Image Rotation Animation Tutorial: kzbin.info/www/bejne/jl7cl6iBas6ra7c 3D Flip Image Rotation By Gestures Tutorial: kzbin.info/www/bejne/q4LaZoqojcSAh7s Rotate Image By Degrees Tutorial: kzbin.info/www/bejne/iYbapX-MhLt0nKs 3D Effects In ListView Tutorial: kzbin.info/www/bejne/rZ-3in6Aeq9qnJY Animated Progress Button Animation Tutorial: kzbin.info/www/bejne/moCofKGEibeXp5I Pick Images From Camera And Gallery Tutorial: kzbin.info/www/bejne/g4TZZGughJl4gM0 Image Slider Tutorial: kzbin.info/www/bejne/gHawqWWXrZVqaZY Page Transition Animation Tutorial: kzbin.info/www/bejne/lYOWdpKXpMtpb8U Horizontal Scrollable Image Card Tutorial: kzbin.info/www/bejne/mJKkkH1rqbqne7c Capture Screenshot Tutorial: kzbin.info/www/bejne/qHKln5R8Yr2eaac Set Background Image Tutorial: kzbin.info/www/bejne/qXW2ZZZneJJ5msk Set Background Color Tutorial: kzbin.info/www/bejne/m3-ZY62ios90e7M Dark Mode Switch Tutorial: kzbin.info/www/bejne/foSkkmyvnpWCg6M Flutter Layout Basics Tutorial: kzbin.info/www/bejne/r4rbppiKg653oqM Shimmer Effect Animation Tutorial: kzbin.info/www/bejne/mHqvaoJjorN5iM0 Shader Mask Tutorial: kzbin.info/www/bejne/gHWYeneLeZKApdE

[@RaphaelPungin]

Amazing video! Pinch to zoom sounded like a simple topic, but you have explored so much detail that I have not even thought of! Thank you!

[@ВикторЦай-л7я]

Big big big thanks, man!

[@psatler]

That was so cool, Johannes! Thanks!

[@EsmeraldaLopez-zt6yl]

Nice video. Thanks!

[@althafaralijaffarali1803]

Advance wishes for the 30k subs bro 🔥❤️🔥. Keep rocking 👌. Do you remember? I told you that you will definitely reach 30k by the end of this year. You proved it 🔥. Thanks for your contribution bro 🎉🎊. Your consistent will definitely gonna take you to the great heights 🌟🌠

[@Maystro_eg]

absolutely Amazing...

[@huguesbomo9297]

thanks very much again

[@md.ruhulamin7963]

Thank you sir.

[@christinewasike]

It's difficult to see what you have set as the argument for the curve parameter in the CurveAnimate contractor. Please clarify what comes after "curve: Curve..."

[@HeyFlutter]

Thank You Christine Wasike! Follow this link: api.flutter.dev/flutter/animation/CurvedAnimation-class.html I hope you will get your answer 🙂

[@christinewasike]

@@HeyFlutter Appreciate it. Thank you!

[@letmeflutter6644]

thank you

[@HeyFlutter]

You are welcome, @letmeflutter6644 😊

[@kingster996]

Thanks - really appreciate the additional info and detailed instructions. Please have a beer on me!

[@HeyFlutter]

Glad I could be of help, Thank you Chris King! 😊

[@samo92mx]

Whats the difference initialize after or before super.initState?

[@HeyFlutter]

Thank You @samo92mx! Follow this link: stackoverflow.com/questions/58400001/should-i-call-super-initstate-at-the-end-or-at-the-beginning#:~:text=As%20you%20could%20see%20in,dispose()%20. I hope you will get your answer 🙂

[@demosongsheetmusic]

Amazing tutorial! Thank you! Can you explain two things for me please? At 4:41, _onInteractionStart_ contains _showOverlay(context)_ call without any checks. Then, just a few seconds later, at 4:49, you do the the check _if (entry == null) showOverlay(context)_ Also, at 6:26, you added a check to _onInteractionEnd_ _if (details.pointerCount != 1) return_ Why did you add these checks? What do you achieve by this?

[@demosongsheetmusic]

@@HeyFlutter Oh, so _onInteractionEnd_ might get called multiple times, okay. It won't be a big mistake to leave the second check out, since _resetAnimation_ looks idempotent to me (won't do anything if animation is stopped). Thanks for answering so quickly! 😊

[@HeyFlutter]

Thanks, Demo song sheet music Casper Jazz! 🙂These are small checks 1. You want to show only one overlay at a time 2. Execute this method only once when one pointer is tapping the screen. Since if you end the interaction it will call onInteractionEnd twice with one finger on the screen or zero fingers on the screen :) Remember during the interaction you have 2 fingers on the screen.

[@faizulla5838]

What Flutter in yours courses 1.2~2.0 .. or 2.5?

[@nickschepers363]

Wow, thanks. This helped me a lot with my progress!

[@HeyFlutter]

Thank You Nick Schepers! Follow this link: stackoverflow.com/questions/56423707/flutter-zoomable-widget I hope you will get your answer 🙂

[@amonlexa57]

Please tell me what to write inside Clamp? final double opacity = ((scale - 1) / (maxScale - 1)).clamp(?, ?);

[@HeyFlutter]

Thank You @amonlexa57! Follow this link: stackoverflow.com/questions/56970838/whats-the-logic-of-clamp-function-in-dart I hope you will get your answer 🙂

[@ずーやん-w8y]

Is there a way to get the color information of an image pixel? "How can I get the normal image size and the enlarged image size?"

[@HeyFlutter]

Thank You ずーやん! Follow this link: stackoverflow.com/questions/61793700/flutter-get-pixel-color-from-image-in-var I hope you will get your answer 🙂

[@Yeraybt]

Could someone help me by telling me how I can save that zoomed image and add it to another screen to a CircleAvatar and keep the same centre point? thx

[@HeyFlutter]

Thank You Yeray bt! Follow this link: github.com/mchome/flutter_advanced_networkimage/issues/113 I hope you will get your answer 🙂

[@prrs11]

Thank you !, i have a question, how i can improve the sensitive of pinch to zoom inside a listview, sometimes is hard to zooming because the listview scroll wins the battle of the gesture and the list scrolled instead of zooming.?

[@HeyFlutter]

Thanks, Rodrigo Porras! 🙂 Check out this issue here: github.com/flutter/flutter/issues/70192 I tried it out on my device and for me it works fine, for vertical and horizontal ListViews and PageViews.

[@HUTIENLAN]

I don't know why but this caused a very weird behavior. For example, I can't show overlay every time. Sometimes it does work sometimes it doesn't. And most important, it caused an error when I tried to pop back and the overlay doesn't disappear.

[@HeyFlutter]

Thank you, @HUTIENLAN! 🙂. Please try to provide enough details with your question

[@HUTIENLAN]

@@HeyFlutter For example, it doesn't work at all on physical iOS device. Also, it does work on android phone. However, it could not zoom in each time. You have to try couple times to show an overlay

[@billiardoxx]

Hi, I'm having a problem with the Overlay widget, it is removed from beginning of animation and not when the animation is completed. So I had to disable the call to addStatusListener method, and I added removeOverlay method into event onInteractionEnd. Moreover I've noted the image is not zoomed in from the first contact, you need a second contact and the animation just starts. Any advice?

[@billiardoxx]

@@HeyFlutter Nop, no error is showed in debug console. I'll try publish my code in Github later if you wish to check it.

[@YXUN2000]

Can this be done on PDF file?

[@YXUN2000]

@@HeyFlutter noted, thank you for your reply!

[@HeyFlutter]

Thanks, YX! 🙂In general, you can use this pinch zoom for every widget in Flutter. However in general, the zoom should be supported by your PDF package so you shouldn't do it on your own.

[@deutschmitarabien]

it doesnt work with entry its null and not initilaized

[@HeyFlutter]

Hello, Nagham Ahmed Alskhni! Follow this link: stackoverflow.com/questions/60068435/what-is-null-safety-in-dart, I hope it will solve your problem. Thank You 🙂

[@emadharazi5044]

Wow!!

[@HeyFlutter]

Thank you, Emad Harazi! 🙂

[@chahodiyahina2448]

how can get source code

[@HeyFlutter]

Thank You chahodiya hina!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware