I created a separate file for bottom navigation bar and included the three screens which is to be included in bottom navigation bar .
class _bottomnavscreen extends State<bottomnavscreen> {
int _selectedIndex = 0;
List<Widget> pageList = [home(), create(), profile()];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.add_circle_outline_sharp),
label: 'Create',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
body: pageList.elementAt(_selectedIndex),
);
}
I put this bottomnavscreen as the home in main.dart:
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: bottomnavscreen(),
);
}
}
But this bootomnavigation widget is seen in my detailedpost screen and comment screen.
detailedpost screen is pushed from home() through Navigation.push()
Comment screen is pushed from postdetails() through
Navigation.push()
How can I hide this bottom navigation widget in my comment screen and detailedpost screen?
This is how I push to detailpost screen from home()
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => detailpost(
body: document['body'],
title: document['title'],
date: document['date'],
)),
);
You can add condition for specific index like this :
class _bottomnavscreen extends State<bottomnavscreen> {
int _selectedIndex = 0;
List<Widget> pageList = [home(), create(), profile()];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: _selectedIndex == 1 ? Container() : BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.add_circle_outline_sharp),
label: 'Create',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
body: pageList.elementAt(_selectedIndex),
);
}
You should start a base page from the MyApp and add BottomNavigations in that page only.
Now when you navigate to detailedpost screen and comment screen, the BottomNavigations will not be visible.
you can use the offstage property to hide the bottom navigation bar on specific pages by wrapping it in an Offstage widget and setting the offstage property to true:
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _currentIndex = 0;
final List<Widget> _pages = [ HomePage(), SettingsPage(), ];
#override
Widget build(BuildContext context) {
return Scaffold(
body: _pages[_currentIndex],
bottomNavigationBar: Offstage(
offstage: _currentIndex == 1,
child: BottomNavigationBar(
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text('Settings'),
),
],
),
),
);
}
}
I am creating a dynamic list of BottomNavigationBarItem and assigning it to 'items' of BottomNavigationBar. So based on a condition (here is my case, checks and add one more BottomNavigationBarItem if it is not billed. So the number of Icons displayed change.
Normally for a fixed number of items, ontap provide index of the icon tapped. As the order/sequence of icons change, their index also differs.
Now how do I read the label of selected BottomNavigationBarItem and respond in onTap handler instead of tapped index value ?
(Of course in this particular case, I can add the additional button as last one and done with. Need a better solution.)
List<BottomNavigationBarItem> getNavbarItems() {
List<BottomNavigationBarItem> navItems = [];
navItems.add(
const BottomNavigationBarItem(
icon: Icon(Icons.delete_outline,), label: 'Delete',),
);
if (widget.invStatus.isBilled == 0) {
navItems.add(
const BottomNavigationBarItem(
icon: Icon(Icons.receipt), label: 'Bill it ?'),
);
}
navItems.add(
const BottomNavigationBarItem(
icon: Icon(Icons.category_rounded), label: 'Add a Product !'),
);
return navItems;
}
Thanks.
If I understand you correctly, you can use the following approach to get the "label".
Call:
getNavbarItems()[index].label
And have a button to dynamically toggle isBilled.
Complete example:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Nav(),
),
),
);
}
}
class Nav extends StatefulWidget {
#override
createState() => NavState();
}
class NavState extends State<Nav> {
var _selectedIndex = 0;
var billIt = false;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Nav'),
),
body: Center(
child: TextButton(
child: Text('Toggle `billIt`'),
onPressed: () {
setState(() {
billIt = !billIt;
});
},
),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
items: getNavbarItems(),
onTap: (int index) {
setState(() {
_selectedIndex = index;
print('label: ${getNavbarItems()[index].label}');
});
},
),
);
}
List<BottomNavigationBarItem> getNavbarItems() {
List<BottomNavigationBarItem> navItems = [];
navItems.add(
const BottomNavigationBarItem(
icon: Icon(
Icons.delete_outline,
),
label: 'Delete',
),
);
if (billIt) {
navItems.add(
const BottomNavigationBarItem(
icon: Icon(Icons.receipt), label: 'Bill it ?'),
);
}
navItems.add(
const BottomNavigationBarItem(
icon: Icon(Icons.category_rounded), label: 'Add a Product !'),
);
return navItems;
}
}
I am new at flutter, and I am trying to change the color of a button when the button is active (been pressed), my code is not working as per expectation. Someone knows how to I fix that?
My code:
import 'package:flutter/material.dart';
class BottomNavBar extends StatefulWidget {
const BottomNavBar({Key? key}) : super(key: key);
#override
_BottomNavBarState createState() => _BottomNavBarState();
}
class _BottomNavBarState extends State<BottomNavBar> {
int _selectedIndex = 0;
#override
Widget build(BuildContext context) {
return Container(
child: Row(
children: <Widget>[
iconButtonBar(context, Icons.home, 0, _selectedIndex),
iconButtonBar(context, Icons.favorite, 1, _selectedIndex),
iconButtonBar(context, Icons.person, 2, _selectedIndex),
iconButtonBar(context, Icons.search, 3, _selectedIndex),
],
),
);
}
Container iconButtonBar(
BuildContext context, IconData icon, int index, int _selectedIndex) {
return Container(
height: 60,
width: MediaQuery.of(context).size.width / 4,
color: index == _selectedIndex ? Colors.blue : Colors.white, // changing the color
child: IconButton(
icon: Icon(icon),
onPressed: () {
_selectedIndex = index;
},
));
}
}
really happy if you find the time to answer.
You should try to refer below code:
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
PageController _pageController = PageController();
List<Widget> _screen = [
Home(),
MyProfile(),
Conversations(),
SearchPage()
];
void _onPageChanged(int index) {
setState(() {
_selectedIndex = index;
});
}
void _onItemTapped(int selectedIndex) {
_pageController.jumpToPage(selectedIndex);
}
int _selectedIndex = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
body: PageView(
controller: _pageController,
children: _screen,
onPageChanged: _onPageChanged,
physics: NeverScrollableScrollPhysics(),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._selectedIndex,
selectedItemColor: Colors.blue,
unselectedItemColor: Colors.black45,
backgroundColor: Colors.black,
selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold),
onTap: _onItemTapped,
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(
Icons.person,
),
label: 'Profile'),
BottomNavigationBarItem(
icon: Icon(
Icons.sms,
),
label: 'Messages'),
BottomNavigationBarItem(
icon: Icon(
Icons.search,
),
label: 'Search'),
],
),
);
}
}
You need to call setState(); so that the changes will be reflected to the UI. so your code looks
Container iconButtonBar(
BuildContext context, IconData icon, int index, int _selectedIndex) {
return Container(
height: 60,
width: MediaQuery.of(context).size.width / 4,
color: index == _selectedIndex ? Colors.blue : Colors.white, // changing the color
child: IconButton(
icon: Icon(icon),
onPressed: () {
setState((){
_selectedIndex = index;
});
},
));
}
I have a main.dart with bottomNavigationBar with 5 tabs and when clicked on tabs it goes to the respective pages.
void main() => runApp(MyStatefulWidget());
class MyStatefulWidget extends StatefulWidget {
#override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
final List<Widget> _children = [
ProfilePage1(),
EventPage3(),
HomePage2(),
AllEventPage(),
ProfilePage1(),
];
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider<EventModifier>(
create: (context) => EventModifier()),
],
child: MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(child: _children.elementAt(_selectedIndex)),
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("")),
BottomNavigationBarItem(
icon: Icon(Icons.calendar_today), title: Text("")),
BottomNavigationBarItem(
icon: Icon(
Icons.account_circle,
size: 45,
color: Color(0xFF334192),
),
title: Text("")),
BottomNavigationBarItem(
icon: Icon(Icons.message), title: Text("")),
BottomNavigationBarItem(
icon: Icon(Icons.table_chart), title: Text("")),
],
currentIndex: _selectedIndex,
selectedItemColor: Color(0xFF334192),
unselectedItemColor: Colors.grey,
onTap: _onItemTapped,
),
),
),
);
}
}
Now, in the 3rd tab there is a button called "See All" and when clicked it should go to the 4th page With bottomNavigationBar and automatically it should be clicked the 4th tab of the bottomNavigationBar.
How to do that in flutter?flutt
To change the bottomNavigationBar selected item manually you would set
_selectedIndex = 4;
To navigate to the AllEventTab when the ‘See All’ button is clicked... one way is using Navigator.push() in the button’s onPressed(), like this:
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => AllEventTab()),
);
}
see “Navigation Basics”
I'm trying to change the AppBar title depending on which page the user is on - the pages are controlled by a BottomNavigationBar which loads the different classes(pages)
The only way i've managed to change this is by including a appbar for each page, which i believe is not the way to go ahead.
class HomePage extends StatefulWidget {
final String title;
HomePage({Key key, this.auth, this.userId, this.onSignedOut, this.title})
: super(key: key);
final BaseAuth auth;
final VoidCallback onSignedOut;
final String userId;
#override
State<StatefulWidget> createState() => new _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _currentIndex = 0;
final List<Widget> _children = [
Projects(),
TimedProject(),
Overview(),
Clients(),
];
GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey();
#override
Widget build(BuildContext context) {
return new Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: Text('TITLE I NEED TO CHANGE DEPENDING ON PAGE',
style: TextStyle(color: Colors.black),
),
backgroundColor: Colors.white,
),
endDrawer: AppDrawer(),
body: _children[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
onTap: onTabTapped,
currentIndex: _currentIndex,
selectedItemColor: Theme.of(context).primaryColor,
type: BottomNavigationBarType.fixed,
items: [
new BottomNavigationBarItem(
icon: Icon(Icons.storage),
title: Text('Jobs'),
),
new BottomNavigationBarItem(
icon: Icon(Icons.timer),
title: Text('Timer'),
),
new BottomNavigationBarItem(
icon: Icon(Icons.pie_chart_outlined),
title: Text('Overview'),
),
new BottomNavigationBarItem(
icon: Icon(Icons.supervisor_account), title: Text('Clients'))
],
),
);
}
void onTabTapped(int index) {
setState(() {
_currentIndex = index;
});
}
}
Create a variable that holds the appbar title or you can use the same title variable that is passed in your HomePage class but you have to remove the final.
If you are using the title variable in HomePage class, make sure to use
"widget.title"
class HomePage extends StatefulWidget {
final String title;
HomePage({Key key, this.auth, this.userId, this.onSignedOut, this.title})
: super(key: key);
final BaseAuth auth;
final VoidCallback onSignedOut;
final String userId;
#override
State<StatefulWidget> createState() => new _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _currentIndex = 0;
String _title;
final List<Widget> _children = [
Projects(),
TimedProject(),
Overview(),
Clients(),
];
GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey();
#override
initState(){
_title = 'Some default value';
}
#override
Widget build(BuildContext context) {
return new Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: Text(_title,
style: TextStyle(color: Colors.black),
),
backgroundColor: Colors.white,
),
endDrawer: AppDrawer(),
body: _children[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
onTap: onTabTapped,
currentIndex: _currentIndex,
selectedItemColor: Theme.of(context).primaryColor,
type: BottomNavigationBarType.fixed,
items: [
new BottomNavigationBarItem(
icon: Icon(Icons.storage),
title: Text('Jobs'),
),
new BottomNavigationBarItem(
icon: Icon(Icons.timer),
title: Text('Timer'),
),
new BottomNavigationBarItem(
icon: Icon(Icons.pie_chart_outlined),
title: Text('Overview'),
),
new BottomNavigationBarItem(
icon: Icon(Icons.supervisor_account), title: Text('Clients'))
],
),
);
}
void onTabTapped(int index) {
setState(() {
_currentIndex = index;
switch(index) {
case 0: { _title = 'Jobs'; }
break;
case 1: { _title = 'Timer'; }
break;
case 2: { _title = 'Overview'; }
break;
case 3: { _title = 'Clients'; }
break;
}
});
}
}
Thanks for the solution, is there away to take the bottom nav and out it in its own .dart file like
bottomNavigationBar: BottomNavBar(),
and get the selected tab index
class _HomeScreen2State extends State<HomeScreen2> {
//Hold current Tab Index
int _selectTab = 0;
final _pageOptions = [
HomeScreen(),
NewOrderScreen(),
OrderHistoryScreen(),
ContactScreen(),
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Gift Shop Dashboard'),
),
body: _pageOptions[_selectTab],
bottomNavigationBar: BottomNavBar(),
);
}
}
To separate BottomNavigationBar in a different .dart file, for example, in config.dart:
import 'package:flutter/material.dart';
class Config {
static List<BottomNavigationBarItem> navigationBarItems = [
BottomNavigationBarItem(
icon: Icon(
Icons.date_range,
),
title: Text(
"Calendar",
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.list, // event_note
),
title: Text(
"List",
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.bookmark_border, // grid_on
),
title: Text(
"Bookmarks",
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.account_circle,
),
title: Text(
"Me",
),
),
];
static BottomNavigationBar navigationBar = BottomNavigationBar(
items: navigationBarItems,
type: BottomNavigationBarType.fixed,
fixedColor: Colors.red,
);
}
and in main.dart:
import 'package:flutter/material.dart';
import 'config.dart';
void main() => runApp(App());
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello',
theme: ThemeData(
primarySwatch: Colors.blueGrey,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key);
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _index = 0;
Text _title;
_onTap(int index) {
setState(() {
_index = index;
_title = Config.navigationBarItems[_index].title;
});
}
#override
void initState() {
_title = Config.navigationBarItems[_index].title;
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: _title,
),
body: Container(
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _index,
type: Config.navigationBar.type,
fixedColor: Config.navigationBar.fixedColor,
items: Config.navigationBar.items,
onTap: _onTap,
),
);
}
}
just make condition in ontap
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 1;
String appbarTitleString = "Home";
var appBarTitleText = new Text("Home");
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Profile',
style: optionStyle,
),
Text(
'Index 1: Home',
style: optionStyle,
),
Text(
'Index 2: More',
style: optionStyle,
),
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: appBarTitleText,
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: Text('Profile'),
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('More'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
if (index == 0){
appbarTitleString = "Profile" ;
appBarTitleText = new Text(appbarTitleString);
}else if (index == 1){
appbarTitleString = "Home" ;
appBarTitleText = new Text(appbarTitleString);
}else if(index == 2){
appbarTitleString = "More" ;
appBarTitleText = new Text(appbarTitleString);
}
});
}
}
it is too Simple, using only two variable we can handle it.
Take Two Variables like:
int _selectedIndex = 0;
String _page_title = "DashBoard";
and Replace page title on every index changed. like as below,
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
if (index == 0) {
_page_title = "DashBoard";
} else if (index == 1) {
_page_title = "Search";
} else if (index == 2) {
_page_title = "Setting";
} else if (index == 3) {
_page_title = "Profile";
}
});
make a list which decide to perform task from selected tab.
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Home 1',
style: optionStyle,
),
Text(
'Home 2',
style: optionStyle,
),
Text(
'Home 3',
style: optionStyle,
),
Profile(),
];
And adjust code in Build() function as below.
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text(_page_title),
automaticallyImplyLeading: false, // hide back arrow from appbar
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(
Icons.home,
color: Colors.grey,
),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(
Icons.search,
color: Colors.grey,
),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(
Icons.settings,
color: Colors.grey,
),
label: 'Setting',
),
BottomNavigationBarItem(
icon: Icon(
Icons.face_retouching_natural_sharp,
color: Colors.grey,
),
label: 'Profile',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.blue,
onTap: _onItemTapped,
),
);
}
}
☻♥ Done.
In case you also have different actions, leadings, etc for different pages, You can have different appbars in separate files and import them like pages.
static final List<Widget> _pages = [
const HomeScreen(),
const BookingScreen(),
const AccountScreen(),
];
static final List<Widget> _appBars = [
const HomeAppBar(),
const BookingAppBar(),
const AccountAppBar(),
];
Then you can have variable:
int _selectedIndex = 0;
Your onTapped function will be like:
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
Your build would be like this:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: const Size.fromHeight(56), // 56 is default height
child: _appBars[_selectedIndex],
), // PreferredSize
body: _pages[_selectedIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
onTap: _onItemTapped,
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.home_rounded),
label: "Home",
), // BottomNavigationBarItem
BottomNavigationBarItem(
icon: Icon(Icons.schedule_rounded),
label: "Bookings",
), // BottomNavigationBarItem
BottomNavigationBarItem(
icon: Icon(Icons.person_rounded),
label: "Account",
), // BottomNavigationBarItem
],
), // BottomNavigationBar
); // Scaffold
}