Flutter Side Navigation Bar widget
6,923
Solution 1
The widget you are searching for is called NavigationRail
.
It is very well documented as part of the official Flutter API.
The example usage is as follows:
int _selectedIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: <Widget>[
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'),
),
],
),
VerticalDivider(thickness: 1, width: 1),
// This is the main content.
Expanded(
child: Center(
child: Text('selectedIndex: $_selectedIndex'),
),
)
],
),
);
}
Solution 2
This is called Navigation Rail
. You can find out more here
Usage:
child:NavigationRail(
selectedIndex:_currentIndex,
onDestinationSelected: (int index) {
setState(() {
// Change Index When Widget is Selected.
_currentIndex = index;
});
destinations:[
// You Navigation Rail Items/Destinations
NavigationRailDestination(
icon: Icon(Icons.favorite_border),
selectedIcon: Icon(Icons.favorite),
label: Text('Home'),
),
]
},
Author by
xyron
Updated on December 21, 2022Comments
-
xyron over 1 year
Screenshot of what I am looking for
How can I achieve this side navigation bar (left) in Flutter? There is a widget for this if I'm not wrong, but I can't find the name anywhere.
-
xyron almost 4 yearsThank you so much. The name skipped my mind totally. Thanks for the usage case too.
-
xyron almost 4 yearsThanks a lot. Thanks for the example too.