Recently I've been showing a real interest into Flutter and Dart, and generally into cross-platform mobile development, and Flutter caught my eyes almost 6 months ago, and since i'm following every news about the language, every conference and every tweet and I recommend you to do the same as the Flutter community is especially active on Twitter !
Recently, this week actually, the Flutter team releases the v1.17 Stable of Flutter, and beside the performance improvement, the support of Metal on iOS and more than 6000 issues closed on the framework Github repository, there were also a couple of widgets that were added to the cross-platform framework.
Today we're going to speak about one of them, the NavigationRail
widget !
What's the NavigationRail widget ?
It's a material widget (so included in material.dart), and you can see it as an alternative of the BottomNavigationBar
widget with the look of a Drawer
, you can display it on the right or left side of your app to navigate between multiple screens.
Here is an example found on Dribbble and other sources
Credits to @svitlana_bilan
How to use it ?
After following the official documentation, you'll find out that there are a lot of common attributes with the BottomNavigationBar
that we talked about just before, so as a good alternative it'll be easy to change a BottomNavigationBar
widget into a NavigationRail
widget and everybody like that, especially those who want to experiment with the beta of Flutter Web !
Enough talking and let's take an example.
I've made a snippet on Codepen, which is super cool to share Flutter code since you see the result as you write your code, for you so you can check it here
But just in case, I'll provide the code here too:
NavigationRail(
selectedIndex: _selectedIndex,
onDestinationSelected: (int index) {
setState(() {
_selectedIndex = index;
});
},
labelType: NavigationRailLabelType.selected,
destinations: [
NavigationRailDestination(
icon: Icon(Icons.favorite_border),
selectedIcon: Icon(Icons.favorite),
label: Text('First'),
),
NavigationRailDestination(
icon: Icon(Icons.bookmark_border),
selectedIcon: Icon(Icons.book),
label: Text('Second'),
),
NavigationRailDestination(
icon: Icon(Icons.star_border),
selectedIcon: Icon(Icons.star),
label: Text('Third'),
),
],
),
So it doesn't look that complicated right ?
Let me explain the code for those who want more details.
Functioning
Short story long, selectedIndex
is an integer, initialised in your stateful widget that represent the index into destinations
for the current selected NavigationRailDestination
.
He'll be modified with the help of a setState
called in an anonymous function inside the onDestinationSelected
.
Almost every other attributes is for the styling of your widget, so I ll let you play with my snippet from Codepen to discover those !
So what ideas this new widget will bring to your upcoming projects ?
Let me know on Twitter: @EnzoConty !
Top comments (0)