How to style BottomNavigationBarItem label

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?

Robert Sandberg · Answer 1 · 2020-10-21T18:03:21.347

36

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

edited Oct 21 '20 at 18:03

answered Oct 21 '20 at 17:51

Robert Sandberg

6,832
2
12
30

I think I should have mentioned that I use multi navigators as shown here;https://medium.com/coding-with-flutter/flutter-case-study-multiple-navigators-with-bottomnavigationbar-90eb6caa6dbf – Janaka Oct 21 '20 at 18:43
selectedLabelStyle does not seems to work in this case – Janaka Oct 21 '20 at 18:43
Why does it not seem to work? Is it the color property that doesn't work? If so, that is why I added the `selectedItemColor` part because of a potential bug in flutter. (https://github.com/flutter/flutter/issues/67897) – Robert Sandberg Oct 21 '20 at 18:50
the selected color of the fist tab label i load remain even if I change the tabs. Other tabs label does not change color even if they get selected – Janaka Oct 21 '20 at 18:55
Well do the same approach but with `selectedItemColor: some == expression? Colors.red : Colors.blue` – Robert Sandberg Oct 21 '20 at 19:00
we can also use unselectedItemColor: somecolor – Satheesh Guduri Nov 29 '20 at 07:19
1

If use CupertinoTabBar, it doesn't have the member ‘selectedLabelStyle’ or ‘ selectedItemColor'. So is there any other method to make it? – Alexweng Feb 23 '21 at 02:32

score 4 · Answer 2 · answered Apr 18 '21 at 22:54

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),
    );
  }
}

score 0 · Answer 3 · answered Aug 25 '22 at 20:16

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,
    );
  }

How to style BottomNavigationBarItem label

3 Answers3

Linked