Flutter Tutorial - How To Overlay Widgets On Top | The Right Way | Scrolling Overlay Widget

How to create a Scrolling Overlay Widget on top of other widgets in Flutter.
Click here to Subscribe to Johannes Milke: kzbin.info...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/over...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/#/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
Floating Overlay Widgets (1. PART) Tutorial: • Flutter Tutorial - Awe...
Autocomplete TextField Tutorial: • Flutter Tutorial - Aut...
Autocomplete & Autofill TextFields Tutorial: • Flutter Tutorial - Aut...
Dropdown Popup Tutorial: • Flutter Tutorial - Cre...
Share Files, Images, Texts Popup Tutorial: • Flutter Tutorial - Sha...
Show/Hide AppBar On Scroll Tutorial: • Flutter Tutorial - Hid...
Expand Floating Action Button Tutorial: • Flutter Tutorial - How...
Home Screen Quick Actions Popup Tutorial: • Flutter Tutorial - Cre...
Hide/Show AppBar/Pinned TabBar On Scroll Tutorial: • Flutter Tutorial - How...
Hide/Show Bottom Navigation Bar On Scroll: • Flutter Tutorial - How...
Hide/Show Widgets In Flutter Tutorial: • Flutter Tutorial - Sho...
Show iOS Popup Alert Dialog Tutorial: • Flutter Tutorial - Sho...
Show Material Banner Tutorial: • Flutter 2.5 Tutorial -...
Show Toast Message Tutorial: • Flutter Tutorial - Toa...
Show SnackBar Tutorial: • Flutter Tutorial - Sna...
Show/Hide Bottom Sheet Tutorial: • Flutter Tutorial - Dra...
Show/Hide Navigation Drawer Tutorial: • Flutter Tutorial - Hid...
Amazing Lottie Animations Tutorial: • Flutter Tutorial - Ama...
QR Code Scanner Tutorial: • Flutter Tutorial - QR ...
TIMELINE
0:00 Introduction Scrolling Overlay Widget
0:23 Create Custom Autocomplete TextField
0:52 Create Floating Overlay Widget On Top Of Other Widgets
1:55 Position Overlay Widget Over Specific Background Widget
3:39 Create Scrolling Overlay Widget
3:58 Overlay Widget To Specific Background Widget
4:13 Create LayerLink, CompositedTransformFollower, CompositedTransformTarget
5:09 Finish Custom Autocomplete TextField
SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
*********
SOCIAL MEDIA: Follow Us :-)
Twitter | / heyflutter_
Linkedin | / heyflutter
LEARN MORE
SOURCE CODE | github.com/JohannesMilke
ARTICLES | / johannesmilke
PLAYLISTS
All Flutter Videos | • Flutter Tutorial - Flu...
Widgets - Flutter | • Flutter Tutorial - Flu...
Plugins - Flutter | • Flutter Tutorial - Flu...
Animations - Flutter | • Flutter Tutorial - Tra...
Designs - Flutter | • Flutter Tutorial - Flu...
Firebase - Flutter | • Flutter Tutorial - Pag...
State Management - Flutter | • Flutter Tutorial - Riv...
CREDITS
Copyright song "Corporate Technology" by scottholmesmusic.com
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)
bit.ly/JohannesMilke

[@HeyFlutter]

This might help you :) 👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com Source Code: github.com/JohannesMilke/overlay_widget_example Floating Overlay Widgets (1. PART) Tutorial: kzbin.info/www/bejne/nJnOknerlpWlnqc Autocomplete TextField Tutorial: kzbin.info/www/bejne/r5O5YpR_rrB5e5I Autocomplete & Autofill TextFields Tutorial: kzbin.info/www/bejne/rGm3ZZmkp7Z2nJI Dropdown Popup Tutorial: kzbin.info/www/bejne/gWm8aKaNj5yEadU Share Files, Images, Texts Popup Tutorial: kzbin.info/www/bejne/eX-4c5uYlMiAbKc Show/Hide AppBar On Scroll Tutorial: kzbin.info/www/bejne/kKSWdWmsqJybY80 Expand Floating Action Button Tutorial: kzbin.info/www/bejne/j3mxdIycpqyleLs Home Screen Quick Actions Popup Tutorial: kzbin.info/www/bejne/qaLaXqeXh5eSjdk Hide/Show AppBar/Pinned TabBar On Scroll Tutorial: kzbin.info/www/bejne/rquziaSHYrWYaMk Hide/Show Bottom Navigation Bar On Scroll: kzbin.info/www/bejne/pqPCeKJvfpZsiaM Hide/Show Widgets In Flutter Tutorial: kzbin.info/www/bejne/g6Ksc4KifJx3qtU Show iOS Popup Alert Dialog Tutorial: kzbin.info/www/bejne/i4q5qp-Bpsl-iLs Show Material Banner Tutorial: kzbin.info/www/bejne/jYnQp5Wpes2Ajc0 Show Toast Message Tutorial: kzbin.info/www/bejne/pWPXomeIgsh0gNk Show SnackBar Tutorial: kzbin.info/www/bejne/h5C8gJKPatplhsk Show/Hide Bottom Sheet Tutorial: kzbin.info/www/bejne/d5ukgpqif7CWmJY Show/Hide Navigation Drawer Tutorial: kzbin.info/www/bejne/rIuap5eDpNBsbsk Amazing Lottie Animations Tutorial: kzbin.info/www/bejne/oaqzmq2em9NroZo QR Code Scanner Tutorial: kzbin.info/www/bejne/nnnImXx9m72Sr7c

[@rydmike]

Nice one Johannes, this example combines many useful, but less commonly used Flutter techniques into one tutorial video! It is also a useful video for more seasoned Flutter devs, reference level stuff! Next time I need to do something similar I know where to go! 💙

[@nikhilkukreja8498]

Amazing job created like somewhat autocomplete text field without any package hats off to you Johannes ❤️✨

[@sofianehabaz6122]

Best flutter channel by far !!! thanks a lot

[@user-vr9qb5rj4j]

Extremely helpful! Thank you a lot!

[@HeyFlutter]

You’re most welcome, @user-vr9qb5rj4j! 🙂

[@RinaldiMeteoric]

You're a life savior. Thank you very much.

[@HeyFlutter]

You are most welcome RinaldiMeteoric 😊

[@BenSmith-et9fv]

It helps me a lot. Nice Job!

[@wadalamen14]

I have been waiting for your nice videos every day, 😉👋👍👏 Always a good as and new ideas. Thanks a lot...

[@olehhromadskyi2532]

Thank you, amazing tutorial.

[@user-kw4kp7eq9m]

Very useful! Thank you.

[@mohammadshahid9820]

It helped me a lot bro , thanks for these awesome videos

[@truongbuixuan1043]

thank you so much, i was looking for this

[@Maystro_eg]

very useful ideas, very well explained thanks , your an expert

[@nelsonodo7682]

Nice one. You're really doing great...

[@cub3608]

thank you for this...this just save my life...was on a deadline,,,thank you very much

[@HeyFlutter]

Glad I could be of help, Thank you @cub3608! 😊

[@vinothkumarm9066]

Wonderful video thanks❤🌹🙏

[@hashankannangara8723]

useful video!! thanks!

[@AshishShakya-te6sm]

Thank You Sooooo much!!! I had been searching to do this for weeks and still couldn't do properly ❤️🤩👌

[@austinevick]

This is an excellent tutorial. Thanks a lot

[@HeyFlutter]

You are welcome, AUGUSTINE VICTOR!

[@Choloviknoga]

Thank you, you're the best

[@HeyFlutter]

You are welcome, @Choloviknoga 😊

[@harishs9808]

Thanks Johannes! This is such a common and yet, there's not much info on how to implement these overlays under a TextField.

[@gantushigsaruul2489]

Thank you, this video was very useful.

[@HeyFlutter]

Glad you liked it, @gantushigsaruul2489 😀

[@peterbk364]

Great video SIR....💗

[@HeyFlutter]

Thank you, peter bk! 🙂

[@antonioguilherme1844]

thank you. May God bless you immensely. Helped me a lot. I am Brazilian

[@HeyFlutter]

Glad I could be of help, Thank you Antônio Guilherme! 😊

[@luctorres6375]

Big thanks, it was a long time I would like to do that

[@HeyFlutter]

Thank you, Luc Torres! 🙂

[@sovrinfo]

Thanks a lot

[@khanisrarahmedalihusain]

Awesome 👍

[@psotoulloa]

Amazing job

[@HeyFlutter]

Thank you, Patricio Soto! 🙂

[@mudassarmaqbool8924]

You are awesome.

[@HeyFlutter]

Thanks, @mudassarmaqbool8924! 🙂

[@ameeradel4835]

"if you liked this video make sure to subscribe" well i love it

[@rod5751]

I have no idea how you even found some of those widgets or how/when to use them, but great job again!

[@michaellitchard2620]

He's good at what he does, is the short answer.

[@michaellitchard2620]

Here's my long answer guess as to how he does it. He starts by following his curiosity. He looks at the source code of packages he uses. When he comes across something he doesn't understand, he researches to clarify understanding. He's then able to take the abstraction of what the thing does and apply it to specific applications. That takes talent and the ability to apply a higher level of cognition. Which is just a way of saying I think he's very smart.

[@rod5751]

@@michaellitchard2620 I concur

[@andystef8693]

Such an amazing video! One question - is there an easy way to improve your code to include transparent background, tapping which will dismiss the overlay?

[@HeyFlutter]

Thank You Andy Stef! Follow this link: stackoverflow.com/questions/55645410/flutter-card-with-transparent-background I hope you will get your answer 🙂

[@gameplaystrailers7797]

Johannes what if I need to add slide animation to overlay widget is that possible ?

[@sarahasan5436]

Hi Johannes amazing video. I was try to add serach filters on overlay widget, but it wasnt working maybe due to the initstate.Could you tell me the best place to replace the initstate statement???

[@HeyFlutter]

Thank you @sarahasan5436, make sure to follow the tutorial step by step 🙂

[@johnmartin9329]

hi thanks for the tutorial but i am curious that can i use it as mini audio player on bottom and can i use slidingpanel widget inside it or not or any other idea to achieve that

[@HeyFlutter]

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

[@user-yb5ft8pc3r]

Hola!, tienes alguna idea de como implementar lo mismo, pero con datos que provienen de un bloc?

[@HeyFlutter]

Thank You tomas ortega! Follow this link: stackoverflow.com/questions/57069641/how-to-overlay-a-widget-on-top-of-a-flutter-app. I hope you will get your answer 🙂

[@oscarbirungi2935]

Could you please do a tutorial for the is_first_run flutter package? And could you do a showDialog() if it's the user's first time using the app?

[@HeyFlutter]

Thanks for the idea oscar birungi 😀, i have added it in my list of future videos

[@oscarbirungi2935]

@@HeyFlutter Thank you so much!😁

[@alishekfeh7165]

nice فنان

[@HeyFlutter]

Thank you, ali shekfeh! 🙂

[@abdallahboucedraya]

Hi thanks how to make overlay over all apps ?

[@HeyFlutter]

Thanks for the idea أبو رؤيم عبدالله بوسدراية 😀, i have added it in my list of future videos

[@ziakhan1299]

I have a question I have singlechildscrolllview->column-> some textformfields and then a listview afrer that listview a button I want this listview to overlay that button and on tap or selecting any item from list it close the listview how should I do that?

[@HeyFlutter]

Thank You zia khan! Follow this link: stackoverflow.com/questions/57939237/flutter-how-to-bottom-center-a-button-in-a-listview I hope you will get your answer 🙂

[@minhlenhat3759]

when u are showing overlay, and press button to go back to previous screen, the overlay seem to close slower than current screen dispose?

[@HeyFlutter]

Thank You @minhlenhat3759! Follow this link: stackoverflow.com/questions/71099114/how-to-close-all-overlays-in-flutter I hope you will get your answer 🙂

[@taqitahmidtanzil2851]

i have encounter with the problem -- "To introduce a Material widget, you can either directly include one, or use a widget that contains Material itself, such as a Card, Dialog, Drawer, or Scaffold" the textfield inside compositedTransformTarget causes the error

[@taqitahmidtanzil2851]

@@HeyFlutter it asks for a material widget i mean CompositedTransformTarget is should be inside scaffold,but when i put it inside scaffold it doesn't work.

[@gameplaystrailers7797]

Johannes any idea why I can not move over lay position by changing dy ?

[@HeyFlutter]

Thank You Gameplays & Trailers! Follow this link: api.flutter.dev/flutter/widgets/Overlay-class.html I hope you will get your answer 🙂

[@tinhnguyenvuchi]

How can I prevent it from moving outside the SafeArea? Thanks.

[@HeyFlutter]

Thank You Tình Nguyễn Vũ Chí! Follow this link: stackoverflow.com/questions/46551268/when-the-keyboard-appears-the-flutter-widgets-resize-how-to-prevent-this I hope you will get your answer 🙂

[@dharsmarkat3864]

In google classrom when we press home meeting comes in small box like overlay widget how to do that in our app

[@HeyFlutter]

Thank You Dharnidhar! Follow this link: medium.com/flutter/how-to-float-an-overlay-widget-over-a-possibly-transformed-ui-widget-1d15ca7667b6 I hope you will get your answer 🙂

[@codeaxen]

hello am having this error have no idea of how to solve it. The method 'remove' was called on null..

[@HeyFlutter]

Hello, codeaxen! Follow this link: stackoverflow.com/questions/52046870/flutter-the-method-was-called-on-null I hope it will solve your problem. Thank You 🙂

[@codeaxen]

@@HeyFlutter thanks for the response. but am not initializing the method in the initState. am using a TextField and in onChange Method thus where i am setting the State but still not working any ideas?

[@strigo2548]

what idiotism some request for source code access on github...bruh i havent time for this

[@HeyFlutter]

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

[@Apenschi]

Very useful! Thanks!