NavigationRail (Widget of the Week)

Learn more about NavigationRail → goo.gle/3Ilf4D7
DartPad → goo.gle/3nJbrxi
BottomNavigationBars are great for mobile, but they’re not great for larger screens. NavigationRail provides the same functionality, but designed to look and work better with desktop and web apps running on larger screens.
Get more tips! → goo.gle/Flutte...
Subscribe to Flutter! → goo.gle/FlutterYT
#WidgetoftheWeek #Widgets #Flutter

[@flutterdev]

Subscribe for more Widget of the Week videos → goo.gle/FlutterYT

[@mr_ks_gaming]

After working on flutter for nearly 2 years and now working in React Native, flutter really is miles ahead than react native.

[@kartikgarasia5685]

What was the reason for chooseing reach though ?

[@mlazebny]

@@kartikgarasia5685 mind lack

[@imnemo2327]

@@mlazebny 🤣 must be job

[@AG-jq3hi]

Why did you switch to React Native? Less job vacancies?

[@mr_ks_gaming]

@@kartikgarasia5685 Both were choosen by my company, I actually wanted to do native tho.

[@AJFlutterTutorials]

Flutter is being improved day by day. And it's getting better than ever. Keep going Flutter Team. We all love you so much 😊

[@flutterdev]

We truly appreciate your continued support, AJ! If you enjoyed this video be sure to check out the rest of the playlist: goo.gle/3BVtgBJ Happy Fluttering 😎

[@manggamusasuleiman]

Have been looking for this widget since 1956 and you are showing this to us NOW!! CMON

[@JaredHasson]

I was just tweaking the NavigationRail in my current webapp when the notification for this video came through. I didn't know about the useIndicator flag! Going to try that now to see if it's a good fit for our application. Thanks for continually pushing these out to support the ecosystem, Flutter team :)

[@scottgreen3703]

I have a problem with bottom navigator in navigator index 3 we have a notifications bubble, it a button with notification the problem we couldn't change the number of notifications from different layout when for example layout index 1 is open and we receive a FCM notifications how do we change the notifications bubble on index 3 layout?

[@flutterdev]

Happy to hear this, Jared! We're thankful for your continued support. Be sure to stay tuned for the latest updates from Flutter: goo.gle/FlutterYT 😁

[@ayivugwekabemba]

Flutter keeps improving. That's a good news for every developer. I love the way Flutter keeps improving.

[@flutterdev]

Thanks for the kind words and feedback, Ayivugwe 😀

[@hiitaddict1774]

It's nice getting into Flutter right now, when there's already over 130 "weekly" Widget of the Weeks ready to consume!

[@amugofjava]

Fantastic timing! This Is just the widget I've been looking for. These videos are so helpful.

[@flutterdev]

Thank you 😎

[@acavals8080]

Again, Flutter getting more and more robust for desktop screens! 😍

[@flutterdev]

Thanks for the support, Alexandre 😄 Don't forget to check out the links in the description for even more tips and tutorials!

[@Aspiiire]

Finally this was really needed

[@flutterdev]

We're so glad you found this helpful! Be sure to check out the rest of the playlist here: goo.gle/3A3Mgwo Happy learning 😎

[@Brendan-wj1ev]

Couldn't have come at a better time 🔥thanks flutter team

[@flutterdev]

Thanks for the love, Brendan 😎 We're so glad you enjoyed the video. Be sure to check out the rest of the playlist: goo.gle/3v1RGoX

[@ahmadamin248]

Weekly Dose for Flutter Enthusiasts 💙

[@maxhuk]

Flutter is just a gift that keeps on giving ❤️

[@flutterdev]

Thank you for the kind words, Max! If you enjoyed this video, be sure to check out the rest of the playlist: goo.gle/3P8GQoj Happy Fluttering 😎

[@fredericgomes6757]

I need my Flutter video dose every week 😅

[@danielphil4976]

Wow. Awesome timing. I wish flutter can do the same but on the top like a native web site

[@ditsomusic]

We need expansion panel in navigation rail like drop down button to reveal more buttons

[@developersstudio1777]

Im using RailNav for my TV project, how can i change the default hover color on items and hover shape to square, I have not been able to make it , please help

[@williansdutra]

I spend the last Saturday building one from scratch because I did now that this widget exists

[@youssef.elmoumen]

Addicted to these videos 😍

[@flutterdev]

Thanks for the love, Youssef 😎 We're glad you enjoyed this video! Be sure to check out the rest of the playlist: goo.gle/3Psa7ev

[@SnowmansApartment]

Damn the mediaQuery trick at the end is near, need to try this out!

[@flutterdoctor655]

Good widget. But Is it expandble ?

[@rebarius]

Oh thanks for leading and trailing widget! I‘ve built a complex IntrinsicWidth and Column for that earlier 😂😅

[@jorgeramosarellano8795]

Está increíble!!! Saludos desde Colombia🇨🇴

[@ayoubelbadaoui7000]

man i have been waiting for this

[@flutterdev]

So glad you enjoyed the video, Ayoub! Make sure to check out the rest of the playlist: goo.gle/3PgXZvO Happy Fluttering 😀

[@rylaczero3740]

Thanks. Didn't knew about it.

[@sixtusagbo]

My heart fluttering 😊

[@flutterdev]

We're glad to hear you enjoyed this video, Sixtus! Be sure to check out the rest of the playlist: goo.gle/3B63JVY 🙂

[@nimrsawafta1682]

How about using it with routing, like web or desktop, I will need to navigate throw the route so the url will be changed,

[@scottgreen3703]

Hey Flutter i convinced my team to build our next big app with flutter

[@flutterdev]

That's so awesome to hear, Scott 😎

[@hermenegildomatabeia8869]

I like this, i Will use this to development web

[@flutterdev]

We're glad you found the video helpful! Be sure to check out the rest of the playlist here: goo.gle/3cynBqr 😎

[@vdinh143]

You guys are the best.

[@pheonixway8029]

Osm widget I love it keep upgrading

[@r_manu]

I didn't know about this widget and implemented my own side navigation bar. Have a better animation when switching destinations. So, will stick with it for now.

[@adityasinha3851]

Can you share github link?

[@jaleger2295]

Kinda cool, but can easily be made by hand in like 10 minutes. But nice to have for basic projects

[@ahmedmohamed1340]

wow needed widget from somalia ✅✅

[@adityasinha3851]

I want to write labels horizontally beside the icons and not below it. What to do ?

[@heshansandeepa9471]

This is awesome

[@flutterdoctor655]

Otherwise thank you for all the work the team

[@phamthanhkhang]

God! How cool it is

[@ivanyoed]

Great widget.

[@flutterdev]

Glad you enjoyed the video, Iván! Make sure to check out the rest of the playlist here: goo.gle/3cLi3ZZ 😎

[@paneerlovr]

Can someone explain if navigationraildestinations are pre-rendered to make it a single page app, or if they are rendered upon changing selectedIndex in the navigation rail? Thanks!

[@kecudotcom]

How if the label is a long setence. Can it do horizontal expand?

[@folaemmanuel7719]

I think it would have been nice if it had the same or very similar interface as bottom nav bar, to make it easy to switch between the two relative to the screen size 🤔...

[@d-apps2699]

Very beautiful widget!

[@flutterdev]

Thank you for your support 😎 Be sure to check out the links in the description for more tips and tutorials!

[@devopsabilities5596]

Game changer!!!!! How can put the trailer at the bottom of the page?

[@flutterdev]

Hi! Please check out the following NavigationRail documentation here: goo.gle/3Ilf4D7

[@MPRGyanStudio888]

How to creat audio2face lip sync animation is possible to flutter

[@chhinsras]

This is dope.

[@flutterdev]

If you enjoyed this video be sure to check out the rest of the playlist: goo.gle/3Pt0fRl 😎

[@Sdscon]

Beautiful

[@raquelhortabartomeu2384]

isn't there a way to hide a navigation destination?

[@luxury_101]

Great, this video came at the right time I needed it the most😇😇😇

[@flutterdev]

Hi! If you enjoyed this video be sure to check out the rest of the playlist: goo.gle/3RBEIrx Happy learning 😎

[@wesleybarnes5376]

Let's go! 💪🏻💪🏻

[@junaid1464]

These kind of widgets can be easily built with one sitting from scratch, can you guys focus on giving info on low level apis to juice out more of flutter, can you guys focus on code quality ?

[@ajaypangare2487]

hye bro , i need help to build the scrolling effect in listview like scroll one container at a time. but containers are having different heights. the scroll by scrolling only. not by pressing the button. by pressing button i know through jumtonextIndex works but need same effect by scrolling on listview

[@mrsquishai]

Nice

[@rotcehr2d269]

Awesome :D

[@duchautran9347]

Wow, that's cool🤘🤘

[@flutterdev]

Happy to hear you enjoyed the tutorial! If you thought this tutorial was cool, be sure to check out the NavigationRail class ✏️: goo.gle/3Ilf4D7 Happy Fluttering 👍

[@joelsongoncalves9402]

Very nice! 😁

[@joeydicastro]

Amazing

[@daniilsurnin795]

Column with Icons?

[@cillipill]

Simply, yes

[@k4ba]

This is the best fking framework ever

[@harisharris5902]

Flutter my old friend

[@flutterdev]

Thanks for the continued support, Haris. Be sure to subscribe to stay updated on the latest with Flutter: goo.gle/FlutterYT 🙌

[@AbhishekKumar-bx8gp]

What I'm waiting for

[@flutterdev]

Happy to hear you enjoyed the video, Abhishek 😀 Don't forget to check out the rest of the playlist: goo.gle/3BQXRjW

[@sanchaarnewsapp]

Nice package😃

[@jorgeramosarellano8795]

No es un paquete

[@sanchaarnewsapp]

@@jorgeramosarellano8795 sorry, I mean widget, which is a part of a package.

[@jorgeramosarellano8795]

Relax

[@nwayoolive]

good

[@nikolaikiselev8609]

Cool

[@flutterdev]

Thanks for watching, Nikolai. Learn more tips and tricks here: goo.gle/FlutterWidget Happy learning! 👍

[@dungphamvan736]

Love

[@flutterdev]

Thank you for your support! It is deeply appreciated! You can also check out more widget videos with the Widget of the Week playlist here 😄 → goo.gle/3JCNstZ

[@orderla8877]

1:34

[@moazelsawaf2000]

Great 👍❤️

[@flutterdev]

We're happy you enjoyed the video, Moaz! Don't forget to check out the rest of the playlist: goo.gle/3dsmFEM Happy learning 😎

[@chouhanrahul]

Great

[@flutterdev]

Happy to hear you liked the video, Rahul 😎 Don't forget to check out the rest of the playlist: goo.gle/3BKfYI9

[@tfozo]

Go flutter

[@PenguinCrayon269]

Noice

[@syeddaniyalali48]

💞 💞

[@vivekkumar-nb3sw]

Very disappointed to see there is no hindi subtitles for such an important concept.......it really disappointing💔💔💔

[@flutterdev]

Hello, Vivek! You can make adjustments to your subtitle preferences for this video by doing the following: 1.) Locate and select the closed caption option (CC) 2.) With CC still enabled, click the gear icon to the right of the CC option and select "Subtitles/CC". 3.) Choose your preferred language. I hope this helps 😎

[@vivekkumar-nb3sw]

Thank you for your consideration.....but auto translate is really inconsistent. I already tried it earlier. Anyways, thank you so much for considering.

[@flutterdev]

Of course! I am sorry that we could not be of greater assistance to you with this!

[@The__Leo69]

Implementing this from scratch was nightmare 🥲