NavigationBar (Widget of the Week)

Learn more about NavigationBar → goo.gle/3Ft2O3B
DartPad → goo.gle/3Hgwz99
Material’s navigation bar component offers a convenient way to switch between primary destinations in an app. Get the ‘Material 3’-styled version of the component for your app with… NavigationBar!
Get more tips! → goo.gle/FlutterWidget
Subscribe to Flutter! → goo.gle/FlutterYT
#WidgetOfTheWeek #Widgets #Flutter

[@flutterdev]

Subscribe for the latest → goo.gle/FlutterYT

[@lunardesigner6779]

Really impressed with Material Design 3

[@matthiasimegi8211]

I like the pairing part with the navigation rail

[@andersmorille7653]

I was looking for exactly this :)

[@_Kanad_Patil_TE_IT]

Flutter.......i love you ! ❤

[@BooleanDev]

is it just me or is the audio really quiet

[@iqmal]

yeahh, System volume 100% youtube 100% but barely can hear anything

[@MihaiMatraguna]

I've also noticed that

[@azmo_]

Yes, but I think this voice actress is much worse.

[@saqqara6361]

Great video!

[@DL-gg3sb]

Can this widget adapt to make a bar seem like a convex_bottom_bar?

[@harishprasadrajeurs2771]

Do we have option to style label property

[@sushantkumar7630]

How to create nested screen push in bottom navigation?

[@candrad.s9504]

how to change the color of the label? when selected and unselected

[@dungphamvan736]

oh what is the Material Design 3?

[@Altamashattari786]

Flutter is ❤

[@madzacademy]

I like to learn flutter professionally. What is the best free option to it. ?

[@faizulla5838]

nice.... I was just thinkinig ... 2 min ago: "What use for bottom NavBar??" ... and this is coming

[@91Canjok]

How do I make the system navigation bar transparent, so that it has the same color as the navigation bar and on other pages the page color? Is there an elegant way to do it?

[@rakibulhasanjoy7158]

Is it possible to change label font family?

[@DR-uu9hl]

Greaat!

[@niksrivastava]

Haven't found a neat solution for a side navigation for Flutter Web. Hoping this makes Flutter Web navigation easier.

[@sushantkumar7630]

Same

[@STEVENSTECLAA]

GOOD.

[@TheMikkelet]

How can we style the text on this??

[@aouadicharaf1038]

did u find a way to do it?

[@TheMikkelet]

@@aouadicharaf1038 I didnt try, but I reckon youd have to modify the widget itself. Very easy to do

[@aouadicharaf1038]

@@TheMikkelet thank u for the reply i wanted to center the label but i couldn't (the label contains two lines) but i found away around it i added some space before the first line 😅😅

[@rabiaelgouail8052]

❤️

[@marflage]

Is the BottomNavigationBar going to be deprecated in favour of NavigationBar?

[@ShippoHsu]

Both still exists at the present moment

[@bdmaxvalera]

Maybe in future flutter releases

[@iamkartiknayak]

How to prevent MaterialPageRoute stutters while navigating?

[@faheemahmad3957]

Make a material you drawswr and apo bar

[@user-hi6tf5ke8y]

Why there is no notch property in it? I don't wanna use bottom app bar just to do that

[@adianblabla]

M3 is ugly, there, I said it. But I love Flutter!

[@user-eh3nd2ty1w]

How to change the selected item's background color? I mean,the color of pill shape

[@chloelamplugh]

For anyone still wondering this: NavigationBar has a property you can set. For example indicatorColor: Colors.orange.shade400,

[@frankjoz2803]

My question is real dumb but how can I make each destination have their own dart.file so I can have a list on one tab, and something different into the other one. My question is because I have no idea where to continue programming after I get the functioning NavBar. I knowit seems too obvious but I have zero programming experience, I would appreciate a push.

[@SuperDustful]

If you haven't figured it out by yet and for everyone else having such a question: For that you should create a new file (i.e. MyWidget.dart) and define a new Widget there with "class MyWidget extends StatelessWidget" and so on. As default you should be using a stateless widget. But sometimes you need a stateful Widget, then you have to define you widget like "class MyWidget extends StatefulWidget {...}". Then you have to import this new widget in the file, where you define your navigation bar. For example like this: "import 'widgets/MyWidget.dart';". This imports the widget from the file MyWidget.dart in the directory "widgets". In the NavBar you should add this widget to your destinations by creating an instance of the widget "[MyWidget(), MyOtherWidget()][currentPageIndex]". Hope this helps!

[@getsellwebshop7482]

plz friends make a prebuild widgets like on snippets in any example (1.package :OR: 2. vs Code Extension) extension example like on vs code editor is fillflutterdart search by this name its for demo i have one years experience but can't remember all the widgets properties like for whats do after one after anothers again and again searrch by google thats take much time for save time much more others time 🙏🏻

[@akshattamrakar9071]

🆒

[@teamlimitless7087]

hey

[@user-kd5mr2ed1k]

wow

[@Shmaisanimostafa]

I didn't found NavigationBar, but found Bottom Navigation Bar 🙁

[@ashishjingar8044]

Honestly I liked m2 navigation bar more than m3

[@merthyr1831]

you can always use the new apis given here to design an app bar like m2, but with way more features and flexibility!

[@ikhsanab6262]

M3 design makes the active button more distinct

[@TechieMudasir]

First comment