Guys!
I am trying to make this AppBar transparent. Because behind it will have a background but so far I have not had success. I thank you all thank you!
class _HomePageState extends State<HomePage> {
int index = 0;
Widget build(BuildContext context) {
return Scaffold(
body: show(index),
appBar: AppBar(
backgroundColor: Colors.transparent,
actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: (){},
)
],
),
bottomNavigationBar: Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.grey[900],
),
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: index,
showUnselectedLabels: true,
unselectedItemColor: Colors.white54,
selectedItemColor: Colors.white,
onTap: ((int x) {
setState(() {
index = x;
});
}),
items: [
new BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text("Home")),
new BottomNavigationBarItem(
icon: Icon(Icons.search), title: Text("Search")),
new BottomNavigationBarItem(
icon: Icon(Icons.library_music), title: Text("Library")),
],
),
),
);
}
}
enter image description here
Appbar has shadow by default and if u want transparent appbar, also you need to add elevation: 0 to AppBar for remove shadow.
Get hint from following code (source https://mrflutter.com/fullscreen-page-with-transparent-appbar-in-flutter/)
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://images.unsplash.com/photo-1517030330234-94c4fb948ebc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1275&q=80'),
fit: BoxFit.cover,
),
),
child: Center(
child: Text(
'mrflutter.com',
style: TextStyle(
color: Colors.white,
fontSize: 30,
),
),
),
),
Positioned(
child: AppBar(
title: Text("Transparent AppBar"),
backgroundColor: Colors.transparent,
elevation: 0,
actions: <Widget>[
IconButton(
icon: Icon(Icons.share),
onPressed: () {},
tooltip: 'Share',
),
],
),
)
],
),
);
}
try to wrap both AppBar and your Body part in stack and make AppBar Trasparent so you will get your desired Output
class _HomePageState extends State<HomePage> {
int index = 0;
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
show(index),
Wrap(
children: <Widget>[
AppBar(
backgroundColor: Colors.transparent,
actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: () {},
)
],
),
],
),
],
),
bottomNavigationBar: Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.grey[900],
),
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: index,
showUnselectedLabels: true,
unselectedItemColor: Colors.white54,
selectedItemColor: Colors.white,
onTap: ((int x) {
setState(() {
index = x;
});
}),
items: [
new BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text("Home")),
new BottomNavigationBarItem(
icon: Icon(Icons.search), title: Text("Search")),
new BottomNavigationBarItem(
icon: Icon(Icons.library_music), title: Text("Library")),
],
),
),
);
}
}
I am new to flutter , Please help me to get out of this issue,
Issue -> After click any of the menu icon , color is not changing
While staring app , icon colours are setting correctly , Home icon is default , if I click Scan or settings icon green color is not setting for icon as well as text ,
I have tried activeIcon of BottomNavigationBarItem still not working
Here is my code,
class TabNavigationState extends State<ScaffoldTest> {
int currentTabIndex = 1;
var tabs = [Home(), Camera(), Settings()];
onTabbed(index) => {
setState(() {
currentTabIndex = index;
})
};
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.teal,
leading: IconButton(
icon: Icon(
Icons.search,
color: Colors.white,
),
onPressed: null),
centerTitle: false,
actions: <Widget>[
IconButton(
icon: Icon(
Icons.info_outline,
color: Colors.white,
),
color: Colors.white,
onPressed: () => debugPrint("Icon tabbed")),
IconButton(
icon: Icon(
Icons.save,
color: Colors.white,
),
color: Colors.white,
onPressed: () => debugPrint("Icon tabbed")),
],
title: Text(
"Test",
style: TextStyle(color: Colors.white),
),
),
backgroundColor: Colors.white,
body: tabs[currentTabIndex],
floatingActionButton: FloatingActionButton(
onPressed: null,
child: IconButton(
icon: Icon(
Icons.camera,
color: Colors.white,
),
),
),
bottomNavigationBar: BottomNavigationBar(
// backgroundColor: Colors.blueAccent.shade100,
selectedItemColor: Colors.green,
unselectedItemColor: Colors.grey,
showSelectedLabels: true,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
"Home",
textDirection: TextDirection.ltr,
)),
BottomNavigationBarItem(
icon: Icon(Icons.camera),
title: Text(
"Scan",
textDirection: TextDirection.ltr,
)),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text(
"Settings",
textDirection: TextDirection.ltr,
))
],
onTap: onTabbed,
),
);
}
https://i.stack.imgur.com/aGJqG.png
BottomNavigationBar has attribute currentIndex to know which is current active tab. You need to set it in your onTabbed method like
int _selectedIndex = 0;
void onTabbed(int index) {
setState(() {
_selectedIndex = index;
...
});
....
}
// And use _selectedIndex in BottomNavigationBar
Widget build(BuildContext context) {
return Scaffold(
...
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
),
...
);
}
I've a bottomnavigation bar that has a color. When I clicked on the last button, the color change to white ...
The last button show some card i can swipe.
For that i use the code here : https://github.com/devefy/Flutter-Story-App-UI
i've tried to change return container() whith something else, but nothing was heplful.
here is my code
void _onItemTapped(int index) {
setState(() {
if (edifice != null) _selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.unEdifice.vocable),
backgroundColor: color_edifices,
),
body: Center(
child: edifice == null
? CircularProgressIndicator()
: _selectedIndex == 5
? SingleChildScrollView(
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
CardScrollWidget(currentPage),
Positioned.fill(
child: PageView.builder(
itemCount: edifice.commentaires.length,
controller: controller,
reverse: true,
itemBuilder: (context, index) {
return Container(
);
},
),
)
],
),
],
),
)
: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
backgroundColor: color_edifices,
icon: Icon(GaeoIcons.church, color: Colors.white),
title: Text('Edifice', style: buttonTextStyle),
),
BottomNavigationBarItem(
icon: Icon(GaeoIcons.location_on, color: Colors.white),
title: Text('Adresses', style: buttonTextStyle),
),
BottomNavigationBarItem(
icon: Icon(GaeoIcons.group, color: Colors.white),
title: Text('Responsables', style: buttonTextStyle),
),
BottomNavigationBarItem(
icon: Icon(GaeoIcons.truck, color: Colors.white),
title: Text('Distributions', style: buttonTextStyle),
),
BottomNavigationBarItem(
icon: Icon(GaeoIcons.group, color: Colors.white),
title: Text('Contacts', style: buttonTextStyle),
),
BottomNavigationBarItem(
icon: Icon(GaeoIcons.comment, color: Colors.white),
title: Text('Commentaires', style: buttonTextStyle),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}`
You can see what i mean with the pictures included
Thanks for your help
I have tried to simulate your case with Story App UI
please try to
1. add BottomNavigationBar 's backgroundColor
2. test with BottomNavigationBarType.fixed and fixedColor
also reference Flutter BottomNavigationBar Colors
code snippet
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.brown,
type: BottomNavigationBarType.fixed,
fixedColor: Colors.white,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
backgroundColor: Colors.white,
icon: Icon(Icons.access_time, color: Colors.white),
title: Text('Edifice', ),
),
BottomNavigationBarItem(
icon: Icon(Icons.access_alarm, color: Colors.white),
title: Text('Adresses', ),
),
],
)
Test result of Story App UI with BottomNavigationBar
In both a tabbar and nav bar, I would like the selected tab to have a different background to the rest of the bar.
For example: https://imgur.com/a/jxD8MTg
Is this possible in flutter?
If you are using stateful Widget, you could just set the state of the currentIndex in the on Tap method
#override
void initState() {
super.initState();
currentIndex = 0;
}
BottomNavigationBar(
backgroundColor: Colors.white,
type: BottomNavigationBarType.fixed,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
backgroundColor: currentIndex == 0 ? Colors.green : Colors.black,
title: Text('0'),
),
BottomNavigationBarItem(
backgroundColor: currentIndex == 1 ? Colors.green : Colors.black,
title: Text('1'),
),
],
currentIndex: currentIndex,
onTap: (int index) {
setState(() {
currentIndex = index;
});
_navigateToPage(index);
},
);
import 'package:flutter/material.dart';
class ChangeBottomNavBarTextColor extends StatefulWidget {
#override
ChangeBottomNavBarTextColorState createState() {
return new ChangeBottomNavBarTextColorState();
}
}
class ChangeBottomNavBarTextColorState
extends State<ChangeBottomNavBarTextColor> {
String text = 'Home';
var curIndex = 0;
_onTap(int index) {
setState(() {
curIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Change Bottom Nav Bar Text Color Example"),
),
body: Center(
child: Text(text,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
)),
),
bottomNavigationBar: BottomNavigationBar(
selectedItemColor: Colors.red,
currentIndex: curIndex,
type: BottomNavigationBarType.fixed,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(
Icons.home,
),
title: Text("Home", style: TextStyle(color: Colors.teal)),
),
BottomNavigationBarItem(
icon: Icon(
Icons.favorite,
),
title: Text("Favorite", style: TextStyle(color: Colors.pink)),
),
BottomNavigationBarItem(
icon: Icon(
Icons.person,
),
title: Text("Profile", style: TextStyle(color: Colors.brown)),
),
BottomNavigationBarItem(
activeIcon: Icon(
Icons.info,
color: Colors.red,
),
icon: Icon(
Icons.settings,
),
title: Text("Settings", style: TextStyle(color: Colors.amber)),
),
],
onTap: _onTap,
),
);
}
}
You can use something like that. When you clicked, _onTap function will change currentIndex. Then selectedItemColor will define the color of the selected index. You can play with the colors whatever you want.
I am trying out Flutter and I am trying to change the colour of the BottomNavigationBar on the app but all I could achieve was change the colour of the BottomNavigationItem (icon and text).
Here is where i declare my BottomNavigationBar:
class _BottomNavigationState extends State<BottomNavigationHolder>{
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: null,
body: pages(),
bottomNavigationBar:new BottomNavigationBar(
items: <BottomNavigationBarItem>[
new BottomNavigationBarItem(
icon: const Icon(Icons.home),
title: new Text("Home")
),
new BottomNavigationBarItem(
icon: const Icon(Icons.work),
title: new Text("Self Help")
),
new BottomNavigationBarItem(
icon: const Icon(Icons.face),
title: new Text("Profile")
)
],
currentIndex: index,
onTap: (int i){setState((){index = i;});},
fixedColor: Colors.white,
),
);
}
Earlier I thought I had it figured out by editing canvasColor to green on my main app theme but it messed up the entire app colour scheme:
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
canvasColor: Colors.green
),
home: new FirstScreen(),
);
}
}
There is no option to specify the background color of BottomNavigationBar but to change the canvasColor. One way you can achieve it without messing up the whole app would be by wrapping BottomNavigationBar in a Theme with desired canvasColor.
Example:
bottomNavigationBar: new Theme(
data: Theme.of(context).copyWith(
// sets the background color of the `BottomNavigationBar`
canvasColor: Colors.green,
// sets the active color of the `BottomNavigationBar` if `Brightness` is light
primaryColor: Colors.red,
textTheme: Theme
.of(context)
.textTheme
.copyWith(caption: new TextStyle(color: Colors.yellow))), // sets the inactive color of the `BottomNavigationBar`
child: new BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: 0,
items: [
new BottomNavigationBarItem(
icon: new Icon(Icons.add),
title: new Text("Add"),
),
new BottomNavigationBarItem(
icon: new Icon(Icons.delete),
title: new Text("Delete"),
)
],
),
),
BottomNavigationBar could be either fixed or moving (shifting).
It is fixed if there are 3 items and changes to shifting for 4 or more items. We can override this behavior by setting BottomNavigationBar.type parameter.
Fixed BottomNavigationBar
BottomNavigationBar(
type: BottomNavigationBarType.fixed, // Fixed
backgroundColor: Colors.black, // <-- This works for fixed
selectedItemColor: Colors.greenAccent,
unselectedItemColor: Colors.grey,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.call),
label: 'Call',
),
BottomNavigationBarItem(
icon: Icon(Icons.message),
label: 'Message',
),
],
)
Shifting BottomNavigationBar:
BottomNavigationBar(
type: BottomNavigationBarType.shifting, // Shifting
selectedItemColor: Colors.white,
unselectedItemColor: Colors.grey,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.call),
label: 'Call',
backgroundColor: Colors.blue, // <-- This works for shifting
),
BottomNavigationBarItem(
icon: Icon(Icons.message),
label: 'Message',
backgroundColor: Colors.green, // <-- This works for shifting
),
],
)
The accepted answer isn't entirely wrong. However, BottomNavigationBar does in-fact have a property of backgroundColor. As per the documentation
If type is BottomNavigationBarType.shifting and the itemss, have BottomNavigationBarItem.backgroundColor set, the item's backgroundColor will splash and overwrite this color.
What this means is that the BottomNavigation's backgroundColor will be overriden by the individual items backgroundColor because the default type is BottomNavigationBarType.shifting.
To fix this, simply add the following property to the declared BottomNavigationbar widget.
type: BottomNavigationBarType.fixed,
Note: If you do, however, want the shifting effect you will have to declare colors for each item, or wrap the widget that allows the overriding of the child widget(s) background color.
i.e Something like Container widget.
can change by setting colors to backgroundColor property if type is fixed.
BottomNavigationBar(
backgroundColor: Colors.red,
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon:Icon(Icons.home, color: Color.fromARGB(255, 255, 255, 255)),
title: new Text('Home'),),
BottomNavigationBarItem(
icon: Icon(Icons.work,color: Color.fromARGB(255, 255, 255, 255)),
title: new Text('Self Help'),),
BottomNavigationBarItem(
icon:Icon(Icons.face, color: Color.fromARGB(255, 255, 255, 255)),
title: new Text('Profile'),),
]
)
If the type is shifting it will use color inside bottomNavigationBarItem.
BottomNavigationBar(
backgroundColor: Colors.red,
type: BottomNavigationBarType.shifting,
items: [
BottomNavigationBarItem(
icon:Icon(Icons.home, color: Color.fromARGB(255, 255, 255, 255)),
title: new Text('Home'),
backgroundColor: Colors.red),
BottomNavigationBarItem(
icon: Icon(Icons.work,color: Color.fromARGB(255, 255, 255, 255)),
title: new Text('Self Help'),
backgroundColor: Colors.blue),
BottomNavigationBarItem(
icon:Icon(Icons.face, color: Color.fromARGB(255, 255, 255, 255)),
title: new Text('Profile'),
backgroundColor: Colors.amber),
]
)
You can see even though I have set backgroundColor property it does not apply that colors and the background color inside BottomNavigationBarItem widget will override that.
Found from here
Set following properties to change the background, selected and unselected colors
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.blue,
selectedItemColor: Colors.black,
unselectedItemColor: Colors.white,
type: BottomNavigationBarType.fixed,
...
)
You can currently style them BottomNavigationBar directly from the Theme, like this:
ThemeData(
bottomNavigationBarTheme: BottomNavigationBarThemeData(
backgroundColor: Colors.grey[900],
elevation: 10,
selectedLabelStyle: TextStyle(
color: Color(0xFFA67926), fontFamily: 'Montserrat', fontSize: 14.0
),
unselectedLabelStyle: TextStyle(
color: Colors.grey[600], fontFamily: 'Montserrat', fontSize: 12.0
),
selectedItemColor: Color(0xFFA67926),
unselectedItemColor: Colors.grey[600],
showUnselectedLabels: true,
),
)
The title is deprecated. We use label instead.
For label, we can use corresponding attributes: selectedLabelStyle, unselectedLabelStyle.
For example:
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
selectedItemColor: Theme.of(context).accentColor,
selectedFontSize: 0,
unselectedFontSize: 0,
iconSize: 22,
elevation: 0,
backgroundColor: Colors.transparent,
selectedIconTheme: IconThemeData(size: 28),
unselectedItemColor: Theme.of(context).focusColor.withOpacity(1),
selectedLabelStyle: Theme.of(context).textTheme.bodyText1.merge(TextStyle(fontSize: 12)),
unselectedLabelStyle: Theme.of(context).textTheme.button.merge(TextStyle(fontSize: 11)),
showUnselectedLabels: true,
currentIndex: widget.currentTabIdx,
onTap: (int i) {
this._selectTab(i);
},
showSelectedLabels: true,
// this will be set when a new tab is tapped
items: [
BottomNavigationBarItem(
icon: SvgPicture.asset(IMAGE_ASSETS_ICONS_HOME) ,
activeIcon: SvgPicture.asset(IMAGE_ASSETS_ICONS_HOME, color: Theme.of(context).accentColor),
label: 'Home',
),
BottomNavigationBarItem(
label: 'Categories',
icon: SvgPicture.asset(IMAGE_ASSETS_ICONS_CATEGORY),
activeIcon: SvgPicture.asset(IMAGE_ASSETS_ICONS_CATEGORY, color: Theme.of(context).accentColor) ,
),
BottomNavigationBarItem(
icon: SvgPicture.asset(IMAGE_ASSETS_ICONS_ORDER_HISTORY, ) ,
activeIcon: SvgPicture.asset(IMAGE_ASSETS_ICONS_ORDER_HISTORY, color: Theme.of(context).accentColor ) ,
label: 'Order History',
),
BottomNavigationBarItem(
icon: SvgPicture.asset(IMAGE_ASSETS_ICONS_CART,) ,
activeIcon: SvgPicture.asset(IMAGE_ASSETS_ICONS_CART, color: Theme.of(context).accentColor) ,
label: 'Cart',
),
],
Try wrapping your BottomNavigationBar in a Container then set its color.
Example:
#override
Widget build(BuildContext context) {
return Scaffold(
body: pages(),
bottomNavigationBar:new Container(
color: Colors.green,
child: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: const Icon(Icons.home),
title: Text("Home")
),
BottomNavigationBarItem(
icon: const Icon(Icons.work),
title: Text("Self Help")
),
BottomNavigationBarItem(
icon: const Icon(Icons.face),
title: Text("Profile")
)
],
currentIndex: index,
onTap: (int i){setState((){index = i;});},
fixedColor: Colors.white,
),
);
);
};
Just follow the given below code to customize according to your requirements. You just need to set the parent of NavigationBar with Theme and set canvasColor to change the background color
bottomNavigationBar: Theme(
data: Theme.of(context).copyWith(
canvasColor: kOrangeMaterialColor
),
child: BottomNavigationBar(
type: BottomNavigationBarType.shifting,
currentIndex: _currentIndex,
onTap: _onTapItem,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home,
color: kWhiteColor,),
label: ''),
BottomNavigationBarItem(icon: Icon(Icons.notifications,
color: kWhiteColor,),
label: ''),
// BottomNavigationBarItem(icon: Icon(Icons.favorite_border,
// color: kWhiteColor,),
// label: ''),
BottomNavigationBarItem(icon: Icon(Icons.account_circle,
color: kWhiteColor,),
label: ''),
BottomNavigationBarItem(icon: Icon(Icons.settings,
color: kWhiteColor,),
label: ''),
],
),
),
You can use this code :
BottomNavigationBar (
backgroundColor: Colors.red,
type: BottomNavigationBarType.fixed
)
Or warp BottomNavigation with Theme widget and change canvasColor.
Theme(
data: Theme.of(context).copyWith(canvasColor: Colors.green),
child: BottomNavigationBar(
// add your code ...
)
],
),
),
Simply add the backgroundColor property to BottomNavigationBarwidget.
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: null,
body: pages(),
bottomNavigationBar:new BottomNavigationBar(
items: <BottomNavigationBarItem>[
new BottomNavigationBarItem(
icon: const Icon(Icons.home),
title: new Text("Home")
),
new BottomNavigationBarItem(
icon: const Icon(Icons.work),
title: new Text("Self Help")
),
new BottomNavigationBarItem(
icon: const Icon(Icons.face),
title: new Text("Profile")
)
],
currentIndex: index,
onTap: (int i){setState((){index = i;});},
fixedColor: Colors.white,
backgroundColor: Colors.black45,
),
);
}
// it will work like this backgound color
import 'package:flutter/material.dart';
import 'package:pedometer/widgets/const.dart';
import 'package:pedometer/widgets/const.dart';
import 'package:pedometer/widgets/const.dart';
import 'package:pedometer/widgets/icon.dart';
import 'dashbord.dart';
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>[
DashbordScreen(),
DashbordScreen(),
DashbordScreen(),
DashbordScreen(),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: const Color.fromARGB(255, 6, 17, 93),
type: BottomNavigationBarType.fixed,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
// iconFun(path:Icons.home,context: context )
icon: Icon(Icons.home,color: Colors.white,size: 35,),
label: 'Home',
// backgroundColor: Colors.red,
),
BottomNavigationBarItem(
icon: Icon(Icons.auto_graph_outlined,color: Colors.white,size: 35),
label: 'Business',
backgroundColor: Colors.green,
),
BottomNavigationBarItem(
icon: Icon(Icons.health_and_safety,color: Colors.white,size: 35),
label: 'School',
// backgroundColor: Colors.purple,
),
BottomNavigationBarItem(
icon: Icon(Icons.settings,color: Colors.white,size: 35),
label: 'Settings',
// backgroundColor: Colors.pink,
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.white,
onTap: _onItemTapped,
),
);
}
}
use
BottomNavigationBar (
backgroundColor: Colors.red,
)
If not changing color with this wrap with material widget.
Material(
child:
BottomNavigationBar (
backgroundColor: Colors.red,
),
)