Flutter Tutorial - Sidebar Menu & Navigation Drawer With Routing
HTML-код
- Опубликовано: 12 июн 2024
- Let's create a Flutter Navigation Drawer with routing that is displayed as a Sidebar Menu within your Flutter app.
Click here to Subscribe to Johannes Milke: ruclips.net/user/JohannesMilke...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/navi...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
Navigation Rail Tutorial: • Flutter Tutorial - Nav...
InkWell Tutorial: • Flutter Tutorial - Ink...
BuildContext & Builder Tutorial: • Flutter Tutorial - Bui...
TextField Tutorial: • Flutter Tutorial - Tex...
Search TextField & Search Bar Tutorial: • Flutter Tutorial - Sea...
App Bar Tutorial: • Flutter Tutorial - App...
Navigation & Routes Tutorial: • Flutter Tutorial - 1/2...
Navigation & Named Routes Tutorial: • Flutter Tutorial - 2/2...
Status Bar Tutorial: • Flutter Tutorial - Sho...
System Navigation Bar Tutorial: • Flutter Tutorial - Hid...
WillPopScope & BackButton Tutorial: • Flutter Tutorial - Wil...
Flutter Layout Basics Tutorial: • Flutter Layout Basics:...
AutoComplete TextField Tutorial: • Flutter Tutorial - Aut...
Search & Filter In ListView Tutorial: • Flutter Tutorial - Sea...
TextField Autofill Services Tutorial: • Flutter Tutorial - Aut...
Reorderable ListView Tutorial: • Flutter Tutorial - Reo...
TIMELINE
0:00 Introduction Sidebar Menu & Navigation Drawer
0:21 Create Navigation Drawer
3:33 Create Sections For Navigation Drawer
4:00 Navigation Drawer With Routing & Navigation
6:30 Close Drawer - Close Navigation Drawer Programmatically
7:04 Add Navigation Drawer In Multiple Pages
7:28 Open Drawer - Open Navigation Drawer Programmatically
9:00 Change Navigation Drawer Position
9:44 Create Header For Navigation Drawer
SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
*********
SOCIAL MEDIA: Follow Me :-)
RUclips | ruclips.net/user/JohannesMilke...
Twitter | intent/follow?ori...
Linkedin | / johannesmilke
Instagram | / johannesmilke
Github | github.com/JohannesMilke
Medium | / johannesmilke
Website | johannesmilke.com
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 
Наука
![Flutter Tutorial - How To Stack Widgets With Overlapping [2021] Overlay Widget On Top Widget](http://i.ytimg.com/vi/ut9CeTQRax0/mqdefault.jpg)
![Flutter Tutorial - How To Stack Widgets With Overlapping [2021] Overlay Widget On Top Widget](/img/tr.png)
👉Join 12 Week Flutter Training: heyflutter.com
👉Join the WhatsApp Channel to get the latest news about Flutter & HeyFlutter: whatsapp.com/channel/0029VaDNCZtC1Fu8nL2vmw3f
Source Code: github.com/JohannesMilke/navigation_drawer_example
The amount of times that your vids are the last one I need to watch to acheive what I want to acheidve is astounding! Very nice work. Thanks!
You are a GEM ! The Best Flutter Developer and Teacher 🙏🙏
Glad to hear that, Thank you CodoWeb! 😊
Once again I have relied on one of your succinct, relevant instructional videos. You deserve all success.
This tutorial is simply impressive. Thank you!
Very much helpful! Thank you for sharing your knowledge. More power!
This has been extremely helpful. Thank you!
you made my day . thank you brother
Another great tutorial by my favorite Flutter channel
Thank you so much for this. It was very helpful 🙌.
Hello Johannes, thank you, much appreciated! Best, Ralf
Nicely explained. Thanks!
Best video ever. Bless you man.
this video saved my code. thank you so much!
Very useful tutorial. Thanks Johannes, finally I was able to understand why my Scaffold context was not able to trigger.
Such a great tutorial! Very helpful (:
Important video..thanks ❤️
Very helpful tutorial
Thanks for making
Thank you so much bro
Great tutorial. Thanks
thanks sir, very very helpful
Thanks, very useful😃👍
Awesome video ❤️. One suggestion, either use lined icons or filled icons for consistency.
Whoa, amazing tutorial, everything was well explained and the results were awesome! Thank you so much! 😄💯
Glad to hear that, You are most welcome Luis M! 😊
Your explanation is always easy.thank you
You’re most welcome, Hindi song! 🙂
Great work
This man is a real life Flutter wizard. My God.
Thank you, Americano no Brasil! 🙂
You are great! .. Thanks a lot
Nice content, to the point easy to understand.
@@HeyFlutter I ran into a problem right now. I cannot navigate to another page using the switch case. Could you help me with that??
You are a great teacher Boss !
Glad to hear that, Thank you Ripu Dhman! 😊
You're the best!
THANK YOU SO MUCHHH
Thank you.
Amazing tutorial again Johannes!
Can we open the drawer using gesture detector and slide from left to right?
Would it be easy to implement this?
Thanks❤❤
Great tutorial
Glad it was helpful, @PadillaJosh 😀
very nice
I love it...
tq very much
Hi Johannes, love you videos. Do you have any video explaining navigation in flutter with firebase? It would be awesome as I have a hard time navigating to child categories...
Firstly Johannes Melk, thank you so much for this great content, you are really wonder,
Secondly
I have a question
How can I add appbar and drawer to the screens considering that the scaffold was deleted because I used the persistent_bottom_nav_bar package 🤔
Thanks in advance 🌸🙏🏻
Everything is perfect 👍 But how can I change the look of her icon?
finaly i get how to use function drawer
Perfect
Thank you, Caio Andrade! 🙂
Good work
I ussually admire your tutorials. How i wish you can have one on push notifications without the use of FCM.
thank you so much Johannes. Can I question you. What is export and how to do it. can you please tell me a video.
Hey, good video. How do I alter the width of the drawer? Drawer >> Container >> width is not changing anything.
subscribed
Thanks, @rakshithgowda8782! 🙂
Stay safe. Keep it up. May i req simple state management in daily task tracker? )))
THANK YOU Johan! I wanted my pages to drop back to the drawer.. so I added it to favorites page, but when i went to the people page, then to favorites, then used the back button the people page was still open.. how do I close the page when I exit it please? Just trying to do proper garbage cleanup, Thank you again! Are you available for work? If so lets connect via DM
Hi, nice tut, taught me quite a few things!
A few improvements to consider:
1) Navigator.pushReplacement / Navigator.popAndPushNamed - 1 method instead of 2
2) ListView.separated - instead of manually adding SizedBox-es
Hi, can we only add Drawers inside Stateless Widgets?
6:09 DRY. Use a List screens =[ PeopleScreen(), FavsSreen()];
Then on the navigator use screens[index]
Thanks for video, please can you explain how use routes and navigation together, because I want implement login
@@HeyFlutter You are the best
Please use mapbox using flutter....and bloc library demo with api call
Thank you so much for this. It was very helpful 🙌.
One question can we have an app drawer with SliverAppBar?
Yes, we can. Think about "widget on widget".
@@TrikNgonlenI tried it this afternoon and there were some issues, maybe I'm doing something wrong
@@HeyFlutter Thank you for the link 👍
Multiple listtile's navigator how can set
If route by navigation drawer then bottom curve navigation bar is vanished how can i fixed it??
I put a very long name and overflow occured... I had put overflow: TextOverflow.ellipsis, but nothing happen.. Can u help?
how do i save the state of the screens?
How do i create a function to go back to my home page?
I don't understand how your pages are sliding from the right. I saw this in so many navigation drawer videos, when they click on one of the drawer items, their target page slides in smoothly from the right side, but when I click, my page always comes up from the bottom. :(
Is there anyway to use gradient color in Drawer? I mean while using material instead of container.
@@HeyFlutter Thanks for the answer
Awesome video. I am stuck at one point though I have implemented logout feature and after logout Provider stops working :(
@@HeyFlutter my project was without provider initially and it was working fine. I have used firebase auth. Now I have added navigation drawer following your tutorial. Now when I do logout or login with firebase then navigation drawer listener stops working. This is the issue I'm getting
please do dynamic link please
How to add login page in drawer navigation bar???make a video plz sir
Hi, do you work with photo_manager package?
@@HeyFlutter Thank you for sharing your knowledge 😊
here is possible that end Drawer open in left side ??
No, @rana_adnan218 🙂 end drawer is made to be on right side, You can use normal drawer for opening it from left side
on ListView the error coming on clicking drawer button
The getter 'key' was called on null.
Receiver: null
Tried calling: key
@@HeyFlutter I just want to override Back Button and Show Exit Confirm on click yes and it just go back page but cannot exiting from app ?
How to add both buttom navigation and side navigation bar in one page ??
@@HeyFlutter Thank You 😊
how to displays user informations connected to firebase with this code please? i try this "final email = 'Email: ' + user.email!;" but it not working
Thank You Resine Art! Follow this link: stackoverflow.com/questions/67744698/flutter-display-user-information-using-firebase-auth
I hope you will get your answer 🙂
@@HeyFlutter hmm I will check it thanks for your answer
Which country ?? Your accent seems to be unique 👍
how to sub menu item
Can you not prepare the code before making the video, sorry but i feel pretty nervous.
@@HeyFlutter I am actually a big fan of you Mike. Thanks for your good works.
your teaching method just awesome but code skipping which is really boring...
@@HeyFlutter Not this video your every video you skipped code . do normal coding . don't split coding time while editing your video
HI, Mohammad Sapan, This Channel is made for Intermediate flutter developers, Go Ahead and learn some basics concepts before visiting this channel. Go to the videos or playlist section, maybe you found some basics video tutorials about flutter on this channel.
but the name and email should be retrieved from the database (cloud firestore) how can we do that please any video or guide
Thank You Mazen Al-ali! Follow this link: stackoverflow.com/questions/63265367/retrieve-cloud-firestore-data-just-for-user-logged-in-flutter-application
I hope you will get your answer 🙂
@@HeyFlutter thank you johannes for your awesome work, yes i already managed to solve it.