Flutter Tutorial - Sliver App Bar & Collapsing Toolbar

[@HeyFlutter]

This might help you :)
👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com
Source Code: github.com/JohannesMilke/sliver_appbar_ii_example
App Bar & Transparent App Bar Tutorial: ua-cam.com/video/dHBF4IJZvHk/v-deo.html
Search App Bar Tutorial: ua-cam.com/video/RaACAwvZ61E/v-deo.html
Sticky Headers & Slivers Tutorial: ua-cam.com/video/QVxd0K_74Pc/v-deo.html
Material Banner Tutorial: ua-cam.com/video/tmv42IcXh9M/v-deo.html
SnackBar Tutorial: ua-cam.com/video/UkudAgCEhBI/v-deo.html
FlushBar & Top SnackBar Tutorial: ua-cam.com/video/H-XEIkUfN4M/v-deo.html
Dialogs Tutorial: ua-cam.com/video/EjfiI7AY6EY/v-deo.html
Focused Menu Tutorial: ua-cam.com/video/Vttl7WGtkgg/v-deo.html
Popup Menu Button Tutorial: ua-cam.com/video/Y-jgYe0vevM/v-deo.html
Navigation SideBar Tutorial: ua-cam.com/video/t8vPjrCTHyg/v-deo.html

[@_mantis]

I just recently discovered your tutorials and I'm really enjoying them. Thank you so much!

[@darko8376]

This is by far the best widget tutorial. Keep the good content coming!!! Great Jooooob

[@zubairafzal6196]

BEST EXPLAINATION ABOUT SILVERS...THANKS MAN!! YOU MADE MY DAY..

[@HeyFlutter]

Awesome 😉Thanks Zubair! 🙂If you want to learn more about slivers check this tutorial out: ua-cam.com/video/QVxd0K_74Pc/v-deo.html

[@SunGkd123]

The tutorials are top notch. Thank you so much :D

[@simplegirl2218]

Thank you so much for this wonderful video. I'm searching for this from yesterday. This video made my day. please do more videos.

[@oldanandiansassociationchi1157]

tanks you very very much sir.i was looking for a solution like this.please make a more videos like this(Advance Video)..thnks again

[@HeyFlutter]

Thanks Dayan! 🙂Sure I have more advanced videos, check my whole playlist out: ua-cam.com/video/-mYLjTYn4ZA/v-deo.html

[@ahmadsalem5418]

You are the best programmer I have seen in my life
Thank you
continue
I wish you good luck

[@jorgeramosarellano8795]

GRACIASSSSS POR ESTE CONTENIDO!!! Saludos desde Colombia

[@HeyFlutter]

Thank you, Jorge Ramos Arellano! 🙂

[@danieltech1391]

can you make a tutorial about notifications, please?

[@HeyFlutter]

Thanks, Danny! 🙂 I already have tutorials about notifications below:
1. Push Notifications 1 Tutorial: ua-cam.com/video/wjJN1C9UxpY/v-deo.html
2. Push Notifications 2 Tutorial: ua-cam.com/video/4_2LlswlS2Q/v-deo.html
3. Push Notifications 3 Tutorial: ua-cam.com/video/7A7-LdYSUOg/v-deo.html
4. Local Notifications 1 Tutorial: ua-cam.com/video/xMeCwF5MO6w/v-deo.html
5. Local Notifications 2 Tutorial: ua-cam.com/video/lVDO58jCiCo/v-deo.html

[@arjunvenugopal4763]

Nice tutorial. Really like your accent.

[@pringstom]

nice bro! Greetings from Peru

[@user-kw4kp7eq9m]

Thank you very much, Johannes!

[@pain2498]

you are the best bro

[@antonyaz3506]

You are my hero!)) Google should pay to you)

[@HeyFlutter]

Great, Thank You Anton Yaz

[@flutterace4695]

Thank you very much

[@HeyFlutter]

You are welcome, @flutterace4695!

[@programingtales7514]

Best explanation ever❤

[@heshamabuzaid4293]

thanks a lot it was very clear.

[@HeyFlutter]

Glad you liked it, Hesham Abuzaid 😀

[@mohammedhamdan5323]

floating work perfect with CustomAppBar but it does not work with NestedScrollView

[@athoullah5441]

Hi Mike,
Then how change the Status bar color, when image expanded and when the appbar solid color?
Thanks

[@andresacm8453]

love this tutorial, thanks bro

[@daumienebi]

Thanks for the video

[@HeyFlutter]

You are welcome, Daumienebi!

[@jamlookstech4948]

I clicked bell 🔔 icon

[@ionkhan]

can we also centralize the title in the center of expanded Sliver app bar? Rather than in bottom center?

[@flaasher]

Amazing ... was looking for this one 🙏🙂

[@coffeeecatsss]

Can we make different color while we scroling the sliver?

[@saradar21]

Nice Work Man .... But how can I make the background image of the app bar clickable .. So I can click on it to see it
fullsize ?

[@mildercastillo2]

Bravo !!! Nice tutorial !!!

[@kingbheem640]

How to set paginated data table no data message on a table row

[@HeyFlutter]

Thank You King Bheem! Follow this link: medium.com/flutterdevs/datatable-in-flutter-9242b4a19e67
I hope you will get your answer 🙂

[@rakibuzzamanakash1060]

thank u brother

[@amanmishra6262]

Hey, I created Sliver app bar like you. I want to generate a list view builder in the body by getting data from API. How can I do it? help me.

[@letmeflutter6644]

awesome tutorial

[@1flutterpro]

The best video

[@ChrisHalden007]

Great video. Thanks

[@ahmeedev]

Thanks for the awesome effort.

[@suxoikorm]

Thanks!

[@HeyFlutter]

Thanks, Luka Katsadze! 🙂

[@slugworth4467]

hi sir i love your videos so much and i ve been following for quite a while now.
I am planning on building and app with your tutorial pretty soon.
But please i wanna know some things before i get started.
please i wanna know if you upload your apps to appstore or playstore

[@HeyFlutter]

Thanks, SlugWorth! 🙂Sure you can easily upload your apps to AppStore & PlayStore. I will create in the future a video about it

[@user-sp6nv4ds5v]

Thank you very much!

[@sauloferreiradesouza9117]

Thanks for your tutorial.
I don't know if you noticed, but the buttons on the advanced sliver is only clickable on the top half. Do you have any idea how to fix it?
Thanks again.

[@HeyFlutter]

Hello, Saulo Ferreira! Follow this link: stackoverflow.com/questions/62258640/flutter-overflowed-positioned-button-is-not-clickable, I hope it will solve your problem. Thank You 🙂

[@user-mq6sc3yy2j]

isnt returning a widget from a function not very recommended in terms of performance?

[@HeyFlutter]

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

[@theimpulson]

Love your videos. Any chances for videos on MethodChannel and Threading?

[@HeyFlutter]

Thanks for the idea, Aayush! 🙂 Sure for the future, however right now I'm staying within the Flutter Basics.

[@simplegirl2218]

how to place a leading icon for this collapsible app bar if placed in the app-bar its displaying only for the shrinked app-bar not for the expanded.

[@HeyFlutter]

Thanks, Shirisha! 🙂Why would you want to do this? Never saw this in any app. However, you could put the collapsing part inside of the FlexibleSpaceBar, so f.e. within the FlexibleSpaceBar.title property you could put a row with an icon and next to it a text.

[@wdavis6254]

Very nice tutorial! How would I make the overlay stick to the top when scrolling

[@HeyFlutter]

Thank You W Davis! Follow this link: stackoverflow.com/questions/60912812/how-to-make-a-widget-stick-to-the-top-while-also-having-a-scroll-view
I hope you will get your answer 🙂

[@josiasmayo7203]

hi. great tutorial.
one question. how did u learn all this?
documentation?
thnk in advance :)

[@HeyFlutter]

Thanks, Josias Mayo! 🙂 Simply checkout the SliverAppBar docs here: api.flutter.dev/flutter/material/SliverAppBar-class.html

[@souravchatterjee9418]

Thanks man!👍

[@_danish19]

When trying to detect gestures for the widgets outside the stack it doesn’t work please help I am struck and even the flutter issues on github has closed it

[@_danish19]

@@HeyFlutter There is no error it just doesn’t detect any gestures to the widget outside of the stack and this is a big issue people are facing after I googled it and I am curious to know what could be done .
For example if I have a stack with Clip behaviour to none and then I position any widget outside of the stack it is visible but doesn’t detect any gestures like ontap and all

[@rikita_neichert]

Is there a way to include the BottomNavigationBar in this system? I want it to disappear & appear like the AppBar

[@rikita_neichert]

@@HeyFlutter thank you, fixed it exactly like this yesterday, thought I had updated my comment, my bad 🙃

[@biplove6110]

How to change title start to center while scrooling

[@HeyFlutter]

Thank You Biplove! Follow this link: stackoverflow.com/questions/66174414/how-to-center-the-title-of-a-sliverappbar-vertically
I hope you will get your answer 🙂

[@Jo-tb6ur]

Hey, wonderful video. I have a question. How do you get a horizontal scroll and verticla scroll in a sliverappbar?

[@Jo-tb6ur]

@@HeyFlutter thanks

[@HeyFlutter]

Thanks Jo! 🙂 Learn more about scrolling here: ua-cam.com/video/bJGRmldntOI/v-deo.html
Also check this tutorial out for more advanced Sliver App Bars: ua-cam.com/video/QVxd0K_74Pc/v-deo.html

[@MrAvelino2010]

Can you make a serie of firebase auth, google sign, firestore, google maps using bloc

[@HeyFlutter]

Thanks Beno! 🙂I have separate tutorials about it. The Google Maps I will update in the future.
1. Google SignIn Tutorial: ua-cam.com/video/ogW83xGQGTg/v-deo.html
2. Email Sign In Tutorial: ua-cam.com/video/rnHAInnjCmM/v-deo.html
3. Firebase CRUD Tutorial: ua-cam.com/video/EV2DyrKOqrY/v-deo.html
4. Google Maps Tutorial: ua-cam.com/video/mkds0jeH7kg/v-deo.html

[@MrAvelino2010]

@@HeyFlutter thanks

[@andrianlee5758]

Awesome!

[@rahulvaghela6490]

hello there.how can i make Custom expansionTile ?

[@HeyFlutter]

Thank You rahul vaghela! Follow this link: medium.com/swlh/creating-a-custom-expansiontile-in-flutter-53d87a803732
I hope you will get your answer 🙂

[@auliasabril1899]

Awesome mike, please make video length like this again, not over 12 minutes, i cannot focus more than 12 minutes 😁

[@auliasabril1899]

@@HeyFlutter if you have longer video, it's fine to split into two video 😀

[@HeyFlutter]

Thanks, Aulia! 🙂Sure I try to keep most of my videos around this range of 12 minutes. 💪 But there will be also sometimes some longer videos where I can go more into detail about a topic.

[@roman-ns7is]

Hi everyone! Could anyone explain how to remove an extra white space between SliverAppBar and GridView at 2:15?

[@HeyFlutter]

Thank You @roman-ns7is! Follow this link: stackoverflow.com/questions/66184310/flutter-showing-extra-space-in-gridview-how-can-i-remove-it
I hope you will get your answer 🙂

[@roman-ns7is]

@@HeyFlutter Thank you a lot! I have been struggling with that issue for the past couple of days and have been unable to find any solutions until I came across the link you provided) 😃

[@mohanaddiab3982]

Great 👍

[@prizeground]

Please create a video on flutter with zoom SDK #Johannes milke

[@battleGroundAce832]

How to Show appBar title only when scroll ?

[@battleGroundAce832]

@@HeyFlutter thanks, johannes
I created my own flexible space to achieve.

[@HeyFlutter]

Thank you, Hanish Kumar! You could learn more about to Show appBar title only when scroll here: stackoverflow.com/a/67537667

[@simpalflutter283]

hello kese hai sir aap

[@easyflutter8425]

pro

[@HeyFlutter]

Thank you, EasyFlutter! 🙂

[@masoud_or_whatever]

like as always, awesome keep it on

[@mohammadbahlaq5892]

How to do something when TabBar scroll rigth or left ?

[@HeyFlutter]

Thank You Mohammad Bahlaq! Follow this link: medium.com/@diegoveloper/flutter-collapsing-toolbar-sliver-app-bar-14b858e87abe
I hope you will get your answer 🙂