Flutter - Add a Row above Bottom Navigation Bar - flutter

I would like to know how to add a row, which upon clicking on will function like Bottom Sheet above Bottom Navigation Bar.
Like this image Example
(The darker row).
Thanks!

you can use a Scaffold property that called persistentFooterButtons, and you can add a widget to it, this is an image of the app https://i.stack.imgur.com/Tb4iA.jpg, and this is the code for making the app.
void main() async {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key key}) : super(key: key);
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Business',
style: optionStyle,
),
Text(
'Index 2: School',
style: optionStyle,
),
];
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
color: Colors.white,
),
=================== this is all you need ==============================
persistentFooterButtons: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
IconButton(
iconSize: 35,
icon: Icon(Icons.play_arrow),
onPressed: null,
),
Container(child: Text("Some data over hereSome data ")),
IconButton(
icon: Icon(Icons.favorite),
onPressed: null,
)
],
)
],
=================================================
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: Text('Business'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('School'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
),
);
}
}

An Expanded Widget should solve your issue. The video and documentation is at the link. It should allow for a row to be placed/pushed to the bottom of the screen so that it is "above" the navigation bar. Simply wrap your widget with an expanded widget.

Related

Flutter : How to format the elements of the Bottom Navigation Bar and add colors and borders with radius

I want to make such a design, but I could not design the shopping cart icon in this format, how can I do it?
import 'package:flutter/material.dart';
void main() {
runApp( MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Container(),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.shopping_cart ,), label:'',
backgroundColor: Colors.red,
),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_cart), label:''),
],
),
),
);
}
}
This is the code I tried to do, I couldn't format the basket icon as shown in the figma design image
Create and empty text with widget option list (_widgetOptions)
Create a BottomNavigationBarItem with empty label and in the icon widget, place container with BoxShape.circle decoration and use a custom icon of container child
Use selected and unselected item color property
In the _onItemTapped set a condition for the middle selection icon
See the full codes
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({super.key});
#override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle = TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Business',
style: optionStyle,
),
Text(
'',
),
Text(
'Index 3: School',
style: optionStyle,
),
Text(
'Index 4: Settings',
style: optionStyle,
),
];
void _onItemTapped(int index) {
if (index != 2) {
setState(() {
_selectedIndex = index;
});
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
const BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
const BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Container(
height: 65,
width: 65,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue,
),
child: const Icon(
Icons.shopping_cart,
color: Colors.white,
),
),
label: '',
),
const BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
const BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.blue[800],
unselectedItemColor: Colors.black,
onTap: _onItemTapped,
),
);
}
}
I modified your code for the first BottomNavigationBarItem so it has red circular background:
BottomNavigationBarItem(
icon: Container(
height: 50,
width: 50,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
child: Icon(
Icons.shopping_cart,
color: Colors.white,
),
),
label: '',
),
You can change the values of height, width and color to match your needs.
Also, I would recommend adding these parameters to your BottomNavigationBar to center the icons (use it only if you are going to keep all of the labels as empty strings):
showSelectedLabels: false,
showUnselectedLabels: false,

unable to use ImageIcon to display image as icon flutter

I have been trying out a bottom navigation bar which has a line indicator and am using this package
https://pub.dev/packages/custom_line_indicator_bottom_navbar
I am able to see icons if I use the predefined icons. But when I tried making my own image icon, it gives me the error
The argument type 'ImageIcon' can't be assigned to the parameter type 'IconData'.
Below is the code I am using to call ImageIcon:
CustomBottomBarItems(
label: 'Account',
icon: ImageIcon(
AssetImage("images/home.png"),
color: Color(0xFF3A5A98),
),
),
when the code is written like this, it shows no error:
CustomBottomBarItems(
label: 'Leaves', icon: Icons.calendar_today_outlined),
Can someone please help me resolve this issue? Thank you
CustomBottomBarItems's icon only take IconData. You can't pass widget here.
CustomBottomBarItems(
label: 'Account',
icon: Icons.ac_unit,
)
Or switch to different widget/package like BottomNavigationBar , google_nav_bar.
Follow this snippet, replace icon with the widget
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
#override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Business',
style: optionStyle,
),
Text(
'Index 2: School',
style: optionStyle,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: List.generate(
3,
(index) => Expanded(
child: Transform(
transform: Matrix4.translationValues(0, 5, 0),
child: Divider(
endIndent: 4,
indent: 4,
color: _selectedIndex == index
? Colors.red
: Colors.transparent,
),
),
)),
),
BottomNavigationBar(
showSelectedLabels: true,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
],
),
);
}
}
You may use BottomNavigationBar():
BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Image.asset(
"assets/icons/icon",
height: 24.w,
width: 24.w,
),
label: 'label',
),
],
);

Change Container widget background color on press

I am trying to change the background color of my container widget inside the Expanded when a button is pressed in BottomNavigationBar.
I am using a list of color and a variable index to traverse the list front and back.
Even though I used setState(() {}), the color is not changing.
h(double x) and w(double x) are the methods that return the height or width of the screen times x using a media query.
Here is my code: the list:
List<Color> col = [Colors.grey, Colors.red, Colors.pink];
int index = 0;
BottomNavigationBar:
bottomNavigationBar: BottomAppBar(
child: Container(
color: Colors.orange,
height: h(0.07),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: Icon(Icons.arrow_back_ios),
color: Colors.white,
onPressed: () {
if (index == 0) {
} else {
setState(() {
index--;
});
}
},
),
Icon(
Icons.color_lens_rounded,
color: Colors.white,
),
IconButton(
icon: Icon(Icons.arrow_forward_ios),
color: Colors.white,
onPressed: () {
if (index == col.length - 1) {
} else {
setState(() {
index++;
});
}
},
),
],
),
),
),
Widget whose color has to be changed
Expanded(
child: Container(
color: col[index],
child: Column(
children: [],
),
),
)
run this code, then hope so you can modify as you want
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
#override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Business',
style: optionStyle,
),
Text(
'Index 2: School',
style: optionStyle,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}

How to change background color of BottomNavigationBarItem(child) when user pressed? Not change all of navbar color

I want every menu that I click will change color for each menu that is clicked, not for the entire color background of the nav bar.
Like the example:
When a user clicks on the "Near Me" menu then the box on the menu will change color. But for the background/color box on the other menu, it is still black. Similarly, clicking on the other menus will change color to red and will not change the color of the menu that is not clicked (still black)
This my Code:
int _page = 0;
final List<Widget> _children = [
MainPage(),
MainPage(),
MainPage(),
MainPage(),
MainPage(),
];
...
bottomNavigationBar: Theme(
data: Theme.of(context).copyWith(
canvasColor: Color(0xFF3B3D58),
primaryColor: Colors.white,
textTheme: Theme.of(context).textTheme.copyWith(
caption: TextStyle(color: Colors.grey)
)
),
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _page,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.add_circle),
title: Text('Add Place'),
),
BottomNavigationBarItem(
icon: Icon(Icons.near_me),
title: Text('Near Me'),
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite),
title: Text('Favorite'),
),
BottomNavigationBarItem(
icon: Icon(Icons.more_horiz),
title: Text('More'),
),
],
onTap: onTabTapped,
),
),
And this is my result of my code:
I found this workaround:
Try here:
https://dartpad.dev/?id=60405c72383f2114decc8486b427e03e&null_safety=true
code here:
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
#override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Business',
style: optionStyle,
),
Text(
'Index 2: School',
style: optionStyle,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
_bottomNavigationBarItem(Icons.home, 'Home'),
_bottomNavigationBarItem(Icons.business, 'Home'),
_bottomNavigationBarItem(Icons.school, 'Home'),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
elevation: 0,
onTap: _onItemTapped,
),
);
}
BottomNavigationBarItem _bottomNavigationBarItem(
IconData icon, String label) {
return BottomNavigationBarItem(
activeIcon: _navItemIcon(icon, label, Colors.red, Colors.white),
icon: _navItemIcon(icon, label, Color(0xff3b3c58), Colors.grey),
title: Padding(padding: EdgeInsets.all(0)),
);
}
Row _navItemIcon(IconData icon, String label, Color? backgrondColor,
Color? foregroundColor) {
return Row(
children: [
Expanded(
child: Container(
color: backgrondColor,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
children: [
Icon(
icon,
color: foregroundColor,
),
Text(
label,
style: TextStyle(color: foregroundColor),
)
],
),
),
),
),
],
);
}
}

Navigation rail with flutter

The material design guidelines includes a component called Navigation rail.
How to create Navigation rail with flutter?
NavigationRail
A material widget that is meant to be displayed at the left or right of an app to navigate between a small number of views, typically between three and five.
SAMPLE CODE
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
debugShowCheckedModeBanner: false,
home: HomeWidget(),
);
}
}
class HomeWidget extends StatefulWidget {
HomeWidget({Key key}) : super(key: key);
#override
_HomeWidgetState createState() => _HomeWidgetState();
}
class _HomeWidgetState extends State<HomeWidget> {
int _selectedIndex = 0;
bool showNavigationBar = false;
var list = [
HomePage(),
WalkPage(),
LocationPage(),
NotificationPage(),
SettingsPage(),
SearchPage()
];
var title = [
"HomePage",
'WalkPage',
'LocationPage',
'NotificationPage',
'SettingsPage',
'SearchPage'
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title[_selectedIndex]),
centerTitle: false,
leading: IconButton(
icon: Icon(
Icons.menu,
color: Colors.white,
),
onPressed: () {
setState(() {
showNavigationBar = !showNavigationBar;
});
}),
),
body: Container(
child: SafeArea(
child: Stack(
children: <Widget>[
list[_selectedIndex],
Positioned(
top: 0,
left: 0,
child: Visibility(
visible: showNavigationBar,
child: Container(
height: MediaQuery.of(context).size.height,
child: NavigationRail(
selectedIndex: _selectedIndex,
elevation: 10,
backgroundColor: Colors.white,
leading: Container(
child: Center(child: Text('leading')),
),
trailing: Container(
child: Center(child: Text('trailing')),
),
selectedIconTheme: IconThemeData(color: Colors.purple, size: 30),
unselectedIconTheme: IconThemeData(color: Colors.grey, size: 20),
selectedLabelTextStyle:
TextStyle(color: Colors.purple, fontWeight: FontWeight.bold),
unselectedLabelTextStyle:
TextStyle(color: Colors.grey, fontWeight: FontWeight.normal),
onDestinationSelected: (int index) {
setState(() {
_selectedIndex = index;
showNavigationBar = !showNavigationBar;
});
},
labelType: NavigationRailLabelType.none,
destinations: [
NavigationRailDestination(
icon: Icon(Icons.home),
selectedIcon: Icon(Icons.home),
label: Text('Home'),
),
NavigationRailDestination(
icon: Icon(Icons.directions_walk),
selectedIcon: Icon(Icons.directions_walk),
label: Text('Walk'),
),
NavigationRailDestination(
icon: Icon(Icons.location_on),
selectedIcon: Icon(Icons.location_on),
label: Text('Location'),
),
NavigationRailDestination(
icon: Icon(Icons.notifications),
selectedIcon: Icon(Icons.notifications),
label: Text('Notifications'),
),
NavigationRailDestination(
icon: Icon(Icons.settings),
selectedIcon: Icon(Icons.settings),
label: Text('Settings'),
),
NavigationRailDestination(
icon: Icon(Icons.search),
selectedIcon: Icon(Icons.search),
label: Text('Search'),
),
],
),
),
),
),
],
)),
),
);
}
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
child: Center(
child: Text('Home Page',
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20.0))),
);
}
}
class WalkPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.blue,
child: Center(
child: Text('Walk Page',
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20.0))),
);
}
}
class LocationPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.orange,
child: Center(
child: Text('Location Page',
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20.0))),
);
}
}
class NotificationPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.green,
child: Center(
child: Text('Notification Page',
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20.0))),
);
}
}
class SettingsPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.amber,
child: Center(
child: Text('Settings Page',
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20.0))),
);
}
}
class SearchPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.teal,
child: Center(
child: Text('Search Page',
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20.0))),
);
}
}
Let us understand some of its important properties
selectedIndex - The index into destinations for the current selected NavigationRailDestination.
selectedIconTheme - The visual properties of the icon in the selected destination.
unselectedIconTheme
- The visual properties of the icon in the unselected destination.
selectedLabelTextStyle - The TextStyle of a destination's label when it is selected.
unselectedLabelTextStyle - The TextStyle of a destination's label when it is unselected.
backgroundColor - Sets the color of the container that holds all of the NavigationRail's contents.
leading - The leading widget in the rail that is placed above the destinations
trailing - The trailing widget in the rail that is placed below the destinations.
labelType
labelType: NavigationRailLabelType.all,
labelType: NavigationRailLabelType.selected,
labelType: NavigationRailLabelType.none,
OUTPUT
For more information please read the documentation of NavigationRail
You can test live demo here on NavigationRail demo
The latest version of Flutter 1.17 includes a built in NavigationRail component.
What is Navigation rail?
The rail is a side navigation component that displays three to seven app destinations and, optionally, a Floating Action Button. Each destination is represented by an icon and a text label. The rail can function on its own at larger screen sizes, such as desktop and tablet. When users transition between screen sizes and devices, the rail can also complement other navigation components, such as bottom navigation.
Example
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
#override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
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'),
),
)
],
),
);
}
}
Find a live demo here.
Here is the official documentation.
It was released on the 7th of May, 2020 with the Flutter 1.17 release. A quick search for "navigation rail flutter" would have done the trick.
The documentation includes a live demo and example code.
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'),
),
)
],
),
);
}
To upgrade, run flutter upgrade, which will download the latest version from github.
Note: The navigation rail is meant for layouts with wide viewports, such as a desktop web or tablet landscape layout. For smaller layouts, like mobile portrait, a BottomNavigationBar should be used instead.
int _index = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: <Widget>[
NavigationRail(
selectedIndex: _index,
onDestinationSelected: (index) => setState(() => _index = index),
extended: true,
destinations: [
NavigationRailDestination(
icon: Icon(Icons.favorite_border),
label: Text('First'),
),
NavigationRailDestination(
icon: Icon(Icons.bookmark_border),
label: Text('Second'),
),
NavigationRailDestination(
icon: Icon(Icons.star_border),
label: Text('Third'),
),
],
),
// This is the main content.
Expanded(child: Center(child: Text('Index: $_index')))
],
),
);
}
NavigationRail looks neat. But I noticed there is no way to save the widget state so it always gets recreated. Not even AutomaticKeepAliveClientMixin works.