How to style BottomNavigationBarItem label - flutter

Question

In my application I have a BottomNavigationBar.
I am implementing multi navigation with bottom navigation bar as shown here;
https://medium.com/coding-with-flutter/flutter-case-study-multiple-navigators-with-bottomnavigationbar-90eb6caa6dbf
I have put the title text like this.
BottomNavigationBarItem _buildItem(
{TabItem tabItem, String tabText, IconData iconData}) {
return BottomNavigationBarItem(
icon: Icon(
iconData,
color: widget.currentTab == tabItem
? active_button_color
: Colors.grey,
),
//label: tabText,
title: Text(
tabText,
style: widget.currentTab == tabItem
? Archivo_12_0xff002245
: Archivo_12_grey,
),
);
I get message title is deprecated.
When I use the label parameter how do I style it?

Answer 1

You style it using properties on the BottomNavigationBar.
Example:
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'First',
),
BottomNavigationBarItem(
icon: Icon(Icons.exit_to_app),
label: 'Second',
),
],
selectedLabelStyle: TextStyle(fontSize: 22),
selectedItemColor: Colors.red,
),
There are of course more properties. Check the documentation on: https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html

Answer 2

As the message already indicates that the 'title' property is deprecated, it has been replace with 'label'.
Concerning the selected color not changing, you need to add a function call 'onItemTapped' to change the color by setting the state.
The following is the working code:
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 = 'TEST';
#override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const 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: First',
style: optionStyle,
),
Text(
'Index 1: Second',
style: optionStyle,
),
];
//METHOD TO SET STATE
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'First',
),
BottomNavigationBarItem(
icon: Icon(Icons.exit_to_app),
label: 'Second',
),
],
selectedLabelStyle: TextStyle(fontSize: 22),
selectedItemColor: Colors.red,
//THIS METHOD NEEDS TO BE CALLED TO CHANGE THE STATE
onTap: _onItemTapped,
currentIndex: _selectedIndex),
);
}
}

Answer 3

There is a bit differences and changes in new flutter for BottomNavigationBar for example title has been changed to label , style in that title moved from BottomNavigationBarItem to BottomNavigationBar as selectedLabelStyle and unselectedLabelStyle etc. So the new solution will something like below:
#override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
currentIndex: currentTab,
onTap: (index) => setState(() => currentTab = index),
type: BottomNavigationBarType.fixed,
selectedLabelStyle: Archivo_12_0xff002245,
unselectedLabelStyle: Archivo_12_grey,
items: [
_buildItem(),
],
),
);
}
BottomNavigationBarItem _buildItem(
{TabItem tabItem, String tabText, IconData iconData}) {
return BottomNavigationBarItem(
icon: Icon(
iconData,
color: widget.currentTab == tabItem ? active_button_color : Colors.grey,
),
label: tabText,
);
}