Develop Reference

How to get Bottom Navigation Functionality with FAB in Flutter

I have this design where when we open the app, it first goes to the Home Screen by default and I have two Bottom Navigation Bar Items.
I am unable to get it working because I want it to behave how Bottom Navigation Bar works but I want default screen to be the home. And when you click on Cart or Profile, it should highlight that tab but when you click on home, it should remove highlighting from it.

Here is a simple workaround or try search for bottomnavigation packages
check this persistent_bottom_nav_bar pacakge it allows to show bottom navigation in all pages with navigator,In other packages you have to do it yourself all the things.
if you want use persistent_bottom_nav_bar check this example for persistent_bottom_nav_bar
Top 16 Flutter Navigation Libraries
flutter-bottomappbar-navigation-with-fab
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(title: Text('Title')),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton:
FloatingActionButton(child: Icon(Icons.add), onPressed: () {}),
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
child: Container(
height: 56,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(icon: Icon(Icons.home), onPressed: () {}),
IconButton(icon: Icon(Icons.search), onPressed: () {}),
SizedBox(width: 40), // The dummy child
IconButton(icon: Icon(Icons.notifications), onPressed: () {}),
IconButton(icon: Icon(Icons.message), onPressed: () {}),
],
),
)),
),
);
}
}

you can try with this persistent_bottom_nav_bar

Here is the Code for Bottom TabBar in Flutter
class TabView extends StatefulWidget {
const TabView({Key? key}) : super(key: key);
#override
_TabViewState createState() => _TabViewState();
}
class _TabViewState extends State<TabView> with SingleTickerProviderStateMixin {
late TabController tabController;
#override
void initState() {
super.initState();
// TODO: CHANGE LENGTH
tabController = TabController(length: 2, vsync: this);
}
#override
void dispose() {
// TODO: implement dispose
super.dispose();
tabController.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: Container(
height: 50,
child: TabBar(
unselectedLabelColor: Colors.grey,
labelColor: kPrimaryColor,
indicatorColor: kPrimaryColor,
labelStyle: TextStyle(fontSize: 11, fontWeight: FontWeight.w500),
tabs: [
Tab(
icon: Icon(Icons.home, size: 25.0,),
text: "Tab1",
iconMargin: EdgeInsets.zero,
),
Tab(
icon: Icon(Icons.person, size: 25.0),
text: "Tab2",
iconMargin: EdgeInsets.zero,
),
],
controller: tabController,
),
),
body: TabBarView(
controller: tabController,
children: [
Tab1(),
Tab2()
],
),
);
}
}

How can I use same navigation route I used for bottomnavigationbar in drawer widget in flutter?

I already have a bottom navigation bar which navigates to different pages.
then I add a drawer which I want it to change the widget in the body only, but the issue is that I made the drawer in another page and I called it, so it is not responding or I'm not calling it perfectly as I should.
Below is the navigation for the bottomnavigationbar, I have imported all necessary files
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int currentTab = 0;
final tabs = [
IndexPage(),
Save(),
Invest(),
Wallet(),
Cards(),
];
#override
Widget build(BuildContext context) {
return MaterialApp(
color: Colors.grey[900],
debugShowCheckedModeBanner: false,
title: 'Flochristos App',
theme: ThemeData(),
home: Scaffold(
backgroundColor: Colors.black,
resizeToAvoidBottomPadding: false,
resizeToAvoidBottomInset: false,
key: _scaffoldKey,
appBar: AppBar(
backgroundColor: Colors.grey[900],
title: Text(
'PettySave',
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.brightness_7_outlined),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.keyboard_arrow_down_sharp),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.account_circle_rounded),
onPressed: () {},
),
],
//shadowColor: Colors.grey,
),
body: tabs[currentTab], //this is where I want to change the pages
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
bottomNavigationBar: BottomNavigationBar(
onTap: (int index) {
setState(() {
currentTab = index;
});
},
currentIndex: currentTab,
backgroundColor: Colors.grey[900],
unselectedIconTheme: IconThemeData(color: Colors.grey),
selectedItemColor: Colors.green,
unselectedItemColor: Colors.grey,
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home_filled),
// ignore: deprecated_member_use
title: Text(
"Home",
),
),
BottomNavigationBarItem(
icon: FaIcon(FontAwesomeIcons.pagelines),
// ignore: deprecated_member_use
title: Text(
"Save",
),
),
BottomNavigationBarItem(
icon: Icon(Icons.trending_up),
// ignore: deprecated_member_use
title: Text(
"Invest",
),
),
BottomNavigationBarItem(
icon: Icon(Icons.account_balance_wallet_outlined),
// ignore: deprecated_member_use
title: Text(
"Wallet",
),
),
BottomNavigationBarItem(
icon: Icon(Icons.credit_card),
// ignore: deprecated_member_use
title: Text(
"Cards",
),
),
],
),
),
);
}
}
}
that's the main.dart code
body: tabs[currentTab], //this is where I want to change the pages
then I created another page for drawer which I called all appropriate pages
from one of the list style in the slidedrawer.dart , I'm trying to set currentTab to any index I want.... but it's not working.
ListTile(
contentPadding: EdgeInsets.fromLTRB(30, 0, 0, 0),
leading: Icon(
Icons.trending_up,
color: Colors.grey[500],
),
title: Text(
'Investments',
style: TextStyle(
color: Colors.grey[300],
fontWeight: FontWeight.bold,
),
),
onTap: () {
setState(() {
currentTab = 1;
});
},
),
I want the index to turn to Save()

List<Widget> tabs = [
IndexPage(),
Save(),
Invest(),
Wallet(),
Cards(),
];

There are many ways to add a drawer to an app, but the most common one is to use the drawer property thats within the Scaffold() Widget.
e.x.
Scaffold(
appBar: AppBar(
...
),
drawer: Drawer() // This is where you call the new Widget(class) that you made the drawer in
body: tabs[currentTab],
);
This is how I understood your question, correct me if I misunderstood it.
This is an example how I used a navigation tab bar in one of my projects.
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../../providers/auth.dart';
import '../../../widgets/auth/admin/main_drawer.dart';
import '../../auth/profile_screen.dart';
import '../../home_screen.dart';
import './../projects_screen.dart';
class AdminTabBarScreen extends StatefulWidget {
static const routeName = 'auth-tab-bar-view';
#override
_AdminTabBarScreenState createState() => _AdminTabBarScreenState();
}
class _AdminTabBarScreenState extends State<AdminTabBarScreen>
with SingleTickerProviderStateMixin {
TabController _tabController;
#override
void initState() {
_tabController = TabController(length: 3, vsync: this);
super.initState();
}
#override
void dispose() {
_tabController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
final auth = Provider.of<Auth>(context);
return Scaffold(
// appBar: AppBar(
// title: Text('SHTEGU'),
// ),
extendBody: true,
drawer: MainDrawer(), // this is where I called my drawer
body: Container(
// color: Colors.blueAccent,
child: TabBarView(
children: <Widget>[
HomeScreen(),
ProjectsScreen(),
ProfileScreen(),
// LoginScreen(),
],
controller: _tabController,
),
),
bottomNavigationBar: Container(
padding: EdgeInsets.all(16.0),
child: ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(50.0),
),
child: Container(
color: Colors.black26,
child: TabBar(
labelColor: Color(0xFFC41A3B),
unselectedLabelColor: Colors.white,
labelStyle: TextStyle(fontSize: 13.0),
indicator: UnderlineTabIndicator(
borderSide: BorderSide(color: Colors.black54, width: 0.0),
insets: EdgeInsets.fromLTRB(50.0, 0.0, 50.0, 40.0),
),
//For Indicator Show and Customization
indicatorColor: Colors.black54,
tabs: <Widget>[
Tab(
text: 'Home',
),
Tab(
text: 'Projects',
),
Tab(
text: 'Profile',
),
// Tab(
// text: 'Login',
// ),
],
controller: _tabController,
),
),
),
),
);
}
}
Here is how I called the class above to check if admin
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../screens/auth/admin/admin_tab_bar_screen.dart';
import '../../screens/auth/user_tab_bar_screen.dart';
import '../../providers/auth.dart';
class AuthTabBarScreen extends StatelessWidget {
static const routeName = 'auth-tab-bar-view';
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: Provider.of<Auth>(context, listen: false).isAdmin(),
builder: (context, snapshot) => snapshot.hasData
? snapshot.data
? AdminTabBarScreen()
: UserTabBarScreen()
: CircularProgressIndicator(), // while you're waiting for the data, show some kind of loading indicator
);
}
}
And here is my drawer:
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../../screens/auth/admin/register_user_screen.dart';
import '../../../screens/auth/auth_tab_bar_screen.dart';
import '../../../screens/tab_bar_screen.dart';
import '../../../providers/auth.dart';
class MainDrawer extends StatelessWidget {
Widget buildListTile(
String title, IconData icon, Function tapHandler, BuildContext ctx) {
return ListTile(
tileColor: Color(0xffF2F7FB),
selectedTileColor: Theme.of(ctx).accentColor,
leading: Icon(
icon,
size: 26,
color: Theme.of(ctx).primaryColor,
),
title: Text(
title,
style: TextStyle(
fontFamily: 'RobotoCondensed',
fontSize: 16,
fontWeight: FontWeight.bold,
color: Theme.of(ctx).primaryColor,
),
),
onTap: tapHandler,
);
}
#override
Widget build(BuildContext context) {
final authData = Provider.of<Auth>(context, listen: false);
return Drawer(
child: SafeArea(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
buildListTile(
'Home',
Icons.home_rounded,
() {
Navigator.of(context)
.pushReplacementNamed(AuthTabBarScreen.routeName);
},
context,
),
buildListTile(
'Add user',
Icons.person_add_alt_1_rounded,
() {
// Navigator.of(context).pop();
Navigator.of(context)
.pushReplacementNamed(RegisterUserScreen.routeName);
},
context,
),
buildListTile(
'Sign Out',
Icons.exit_to_app_rounded,
() {
authData.signOut();
},
context,
),
],
),
),
),
);
}
}
Hope this is at least of help to you :D

Black-Screen with the FlatButton in the AppBar

My App contains basically 2 parts -> Appbar (with 1 Button) and BottomNavigationBar (with some buttons that works properly). The problem came when I pressed the Appbar button (goes to a black screen instead of show the "manual_page.dart")
this is the content of the 2 files (the home_page.dart and manual_page.dart):
home_page.dart
import 'package:flutter/material.dart';
import 'package:opening_a_pdf/manual_page.dart';
import 'package:opening_a_pdf/first_page.dart';
import 'package:opening_a_pdf/second_page.dart';
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _selectedPage = 0;
List<Widget> pageList = List<Widget>();
#override
void initState() {
pageList.add(FirstPage());
pageList.add(SecondPage());
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFFFAFAFA),
appBar: AppBar(
backgroundColor: Colors.black,
title: const Text('Aplicación en Desarrollo'),
actions: <Widget>[
FlatButton(
textColor: Colors.white,
child: Text(
'MANUAL',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
onPressed: (){
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Voice()),
);
}
)
],
),
body: IndexedStack(
index: _selectedPage,
children: pageList,
),
bottomNavigationBar: BottomNavigationBar(
// type: BottomNavigationBarType.fixed,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
backgroundColor: Colors.black,
icon: Icon(Icons.compare_arrows),
title: Text('Conectividad'),
),
BottomNavigationBarItem(
backgroundColor: Colors.black,
icon: Icon(Icons.blur_on),
title: Text('Captura Datos'),
),
BottomNavigationBarItem(
backgroundColor: Colors.black,
icon: Icon(Icons.graphic_eq),
title: Text('Voz'),
),
BottomNavigationBarItem(
backgroundColor: Colors.black,
icon: Icon(Icons.list),
title: Text('Comandos'),
),
BottomNavigationBarItem(
backgroundColor: Colors.black,
icon: Icon(Icons.settings),
title: Text('Ajustes'),
),
],
currentIndex: _selectedPage,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
void _onItemTapped(int index) {
setState(() {
_selectedPage = index;
});
}
}
manual_page.dart
import 'package:flutter/material.dart';
// ignore: camel_case_types
class Voice extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Sección de Órdenes por Voz"),
),
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Positioned(
bottom: 0,
width: MediaQuery.of(context).size.width,
child: Center(
child: MaterialButton(
onPressed: () {},
color: Colors.red,
),
),
)
],
),
);
}
}

Try to initial the height of container in the second screen before Stack

There are no errors in the code. Works correctly. Maybe the fault is in the main () or in the emulator.
Code in main:
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}

I executed your code and found no problem with it:
But you can put empty Container() as the child of MaterialButton().
Corrected code:
MaterialButton(
onPressed: () {},
color: Colors.red,
child:Container(),
),

Is it possible to get a bottomNavBar without icons / with text only

I want to get a bottom navigation bar, but the Tabs should be text-only. The problem is, that icon is a required property of BottomNavigationBarItem().
Edit: I got it working using a tab bar as bottom nav bar, but #Fernando Rocha 's solution seems to work less tricky and works better. To sum it up, simply add "size: 0" to each icon (you will still need an icon).

I used size 0 at icon size and it worked
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;
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, size: 0),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.business, size: 0),
title: Text('Business'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school, size: 0),
title: Text('School'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}

You can do
BottomNavigationBarItem(
icon: Icon(null),
title: Text('Just Text'),
)
to achieve this.
With this approach there will still be an empty space where the Icon is "supposed" to go. With #Fernando Rocha 's approach it looks like the text is centered.

I used tabs instead :
static const List<Tab> _tabs = [
Tab(text: "A"),
Tab(text: "AA"),
Tab(text: "AAA")
];
return WillPopScope(
child: DefaultTabController(
length: _tabs.length,
child: Scaffold(
bottomNavigationBar: Container(
// color: Color(0xFF3F5AA6),
margin: const EdgeInsets.only(bottom: 11),
child: TabBar(
// labelColor: Colors.white,
// unselectedLabelColor: Colors.white60,
// indicatorSize: TabBarIndicatorSize.tab,
indicatorPadding: const EdgeInsets.symmetric(vertical: 7, horizontal: 23),
indicatorColor: Colors.white,
onTap: (int index) {
setState(() {
_selectedIndex = index;
});
},
tabs: _tabs,
),
),
body: Center(
child: _pages[_selectedIndex]
),
),
),
onWillPop: () async {
return Navigator.canPop(context);
}
);

Changing animation state in bottom navigation bar while clicking back button

I have used this bottom navigation bar library in my app and it works perfectly. But i want to maintain a back navigation with the back button in android phones like for example in the Google Play Store bottom navigation where if we navigate through the bottom navigation the animation changes and also if we navigate back through the back button the animation changes the way before.
I have tried this article which is somewhat doing what i want but the animations are not working.
This is my stateful widget where my bottom nav bar is,
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int currentIndex;
final PageStorageBucket bucket = PageStorageBucket();
#override
void initState() {
// TODO: implement initState
super.initState();
currentIndex = 0;
}
void changePage(int index) {
setState(() {
currentIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey.shade300,
resizeToAvoidBottomInset : false,
body:
new Stack(
children: <Widget>[
new Offstage(
offstage: currentIndex != 0,
child: new TickerMode(
enabled: currentIndex == 0,
child: new MaterialApp(home: new HomePage()),
),
),
new Offstage(
offstage: currentIndex != 1,
child: new TickerMode(
enabled: currentIndex == 1,
child: new MaterialApp(home: new StayPage()),
),
),
new Offstage(
offstage: currentIndex != 2,
child: new TickerMode(
enabled: currentIndex == 2,
child: new MaterialApp(home: new TravelPage()),
),
),
new Offstage(
offstage: currentIndex != 3,
child: new TickerMode(
enabled: currentIndex == 3,
child: new MaterialApp(home: new MorePage()),
),
),
],
),
floatingActionButton: Visibility(
visible: _isVisible,
child: Container(
height: 100.0,
width: 85.0,
// margin: EdgeInsets.only(bottom: 5.0),
child: FittedBox(
child: FloatingActionButton.extended(
onPressed: () {
setState(() {});
},
elevation: 20.0,
icon: Icon(Icons.add),
label: Text(
"Plan",
style: TextStyle(
fontFamily: "OpenSansBold",
),
),
backgroundColor: Colors.red,
),
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
bottomNavigationBar: Visibility(
visible: _isVisible,
child: BubbleBottomBar(
hasInk: true,
fabLocation: BubbleBottomBarFabLocation.end,
opacity: .2,
currentIndex: currentIndex,
onTap: changePage,
elevation: 15,
items: <BubbleBottomBarItem>[
BubbleBottomBarItem(
backgroundColor: Colors.red,
icon: Icon(
Icons.home,
color: Colors.black,
),
activeIcon: Icon(
Icons.home,
color: Colors.red,
),
title: Text(
"Home",
style: TextStyle(
fontFamily: "OpenSans",
),
)),
BubbleBottomBarItem(
backgroundColor: Colors.deepPurple,
icon: Icon(
Icons.hotel,
color: Colors.black,
),
activeIcon: Icon(
Icons.hotel,
color: Colors.deepPurple,
),
title: Text(
"Stay",
style: TextStyle(
fontFamily: "OpenSans",
),
),
),
BubbleBottomBarItem(
backgroundColor: Colors.indigo,
icon: Icon(
Icons.card_travel,
color: Colors.black,
),
activeIcon: Icon(
Icons.card_travel,
color: Colors.indigo,
),
title: Text(
"Travel",
style: TextStyle(
fontFamily: "OpenSans",
),
),
),
BubbleBottomBarItem(
backgroundColor: Colors.green,
icon: Icon(
Icons.more,
color: Colors.black,
),
activeIcon: Icon(
Icons.more,
color: Colors.green,
),
title: Text(
"More",
style: TextStyle(
fontFamily: "OpenSans",
),
),
),
],
),
),
);
}
}
It is not necessary that i have to use this library, i just want to implement a bottom navigation bar and when navigating back through using the android back button the animations must work.
Any kind of help would be appreciated! Thanks!

Solved my problem. I used the medium post by Swav Kulinski which i pointed out in my question earlier.
The code is as follows,
class NavBar extends StatefulWidget {
#override
_NavBarState createState() => _NavBarState();
}
class _NavBarState extends State<NavBar> {
final navigatorKey = GlobalKey<NavigatorState>();
int currentIndex;
final PageStorageBucket bucket = PageStorageBucket();
#override
void initState() {
// TODO: implement initState
super.initState();
currentIndex = 0;
}
void changePage(int index) {
navigatorKey.currentState.pushNamed(pagesRouteFactories.keys.toList()[index]);
setState(() {
currentIndex = index;
});
}
Future<bool> _onWillPop() {
if(currentIndex == 3){
changePage(2);
} else if(currentIndex == 2){
changePage(1);
} else if(currentIndex == 1){
changePage(0);
} else if(currentIndex == 0){
return Future.value(false);
}
return Future.value(true);
}
final pagesRouteFactories = {
"/": () => MaterialPageRoute(
builder: (context) => Center(
child: Text("HomePage",style: Theme.of(context).textTheme.body1,),
),
),
"takeOff": () => MaterialPageRoute(
builder: (context) => Center(
child: Text("Take Off",style: Theme.of(context).textTheme.body1,),
),
),
"landing": () => MaterialPageRoute(
builder: (context) => Center(
child: Text("Landing",style: Theme.of(context).textTheme.body1,),
),
),
"settings": () => MaterialPageRoute(
builder: (context) => Center(
child: Text("Settings",style: Theme.of(context).textTheme.body1,),
),
),
};
#override
Widget build(BuildContext context) {
return MaterialApp(
home: WillPopScope(
onWillPop: _onWillPop,
child: Scaffold(
body: _buildBody(),
bottomNavigationBar: _buildBottomNavigationBar(context),
),
),
);
}
Widget _buildBody() =>
MaterialApp(
navigatorKey: navigatorKey,
onGenerateRoute: (route) => pagesRouteFactories[route.name]()
);
Widget _buildBottomNavigationBar(context) => BottomNavigationBar(
items: [
_buildBottomNavigationBarItem("Home", Icons.home),
_buildBottomNavigationBarItem("Take Off", Icons.flight_takeoff),
_buildBottomNavigationBarItem("Landing", Icons.flight_land),
_buildBottomNavigationBarItem("Settings", Icons.settings)
],
currentIndex: currentIndex,
onTap: changePage,
);
_buildBottomNavigationBarItem(name, icon) => BottomNavigationBarItem(
icon: Icon(icon),
title: Text(name),
backgroundColor: Colors.black45,
activeIcon: Icon(icon)
);
}
I do not know if this is the right approach though. If anyone want to suggest me better option please let me know.