BottomNavigationBarItem background color in flutter - flutter

Question

i need to set background color to selected BottomNavigationBarItem like this image

Answer 1

It's not possible to change the background of a selected item of the BottomNavigationBar because that doesn't follow the design guidelines.
If you still want to use it that way, following the example given in BottomNavigationBar class, here is a workaround:
final _selectedItemColor = Colors.white;
final _unselectedItemColor = Colors.white30;
final _selectedBgColor = Colors.indigo;
final _unselectedBgColor = Colors.blue;
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;
});
}
Color _getBgColor(int index) =>
_selectedIndex == index ? _selectedBgColor : _unselectedBgColor;
Color _getItemColor(int index) =>
_selectedIndex == index ? _selectedItemColor : _unselectedItemColor;
Widget _buildIcon(IconData iconData, String text, int index) => Container(
width: double.infinity,
height: kBottomNavigationBarHeight,
child: Material(
color: _getBgColor(index),
child: InkWell(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(iconData),
Text(text,
style: TextStyle(fontSize: 12, color: _getItemColor(index))),
],
),
onTap: () => _onItemTapped(index),
),
),
);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
selectedFontSize: 0,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: _buildIcon(Icons.home, 'Home', 0),
title: SizedBox.shrink(),
),
BottomNavigationBarItem(
icon: _buildIcon(Icons.business, 'Business', 1),
title: SizedBox.shrink(),
),
BottomNavigationBarItem(
icon: _buildIcon(Icons.school, 'School', 2),
title: SizedBox.shrink(),
),
],
currentIndex: _selectedIndex,
selectedItemColor: _selectedItemColor,
unselectedItemColor: _unselectedItemColor,
),
);
}
Result:

Answer 2

As far as I can see, you cannot change the color of a tab when using BottomNavigationBar. However, can I suggest to switch to TabBar? It would look something like this:
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,
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
#override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget>
with SingleTickerProviderStateMixin {
TabController _tabController;
#override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: 3);
}
#override
void dispose() {
_tabController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: TabBarView(
controller: _tabController,
children: <Widget>[
Scaffold(appBar: AppBar(title: Text('First'))),
Scaffold(appBar: AppBar(title: Text('Second'))),
Scaffold(appBar: AppBar(title: Text('Third'))),
],
),
bottomNavigationBar: BottomAppBar(
child: Container(
color: Colors.blue,
child: TabBar(
indicator: BoxDecoration(color: Colors.redAccent),
tabs: <Widget>[
Tab(child: Text("Stuff", style: TextStyle(color: Colors.white))),
Tab(child: Text("Things", style: TextStyle(color: Colors.white))),
Tab(child: Text("Items", style: TextStyle(color: Colors.white))),
],
controller: _tabController,
),
),
),
);
}
}
Result:
This is a very minimal example, but it demonstrates the gist of it.

Answer 3

Here is example for changing background on click:
class _MyWidgetState extends State<MyWidget> {
IconData selectedItem = Icons.dashboard;
List<IconData> get itemsList => _items.keys;
Map<IconData, String> _items = {
Icons.home: 'Home',
Icons.drive_eta: 'Delivery',
Icons.shopping_basket: 'Products',
Icons.mail: 'Messages'
};
#override
Widget build(BuildContext context) {
return BottomNavigationBar(
onTap: (int index) {
// todo something
setState(() {
selectedItem = itemsList[index];
});
},
currentIndex: itemsList.indexOf(selectedItem),
items: _items.entries.map((MapEntry<IconData, String> entry) {
return BottomNavigationBarItem(
icon: Icon(entry.key, color: Colors.white),
backgroundColor: entry.key == selectedItem ? Colors.black : Colors.blueGrey,
title: Text(entry.value),
);
}).toList());
}
}