Flutter 选择时更改 NavigationBarThemeData labelTextStyle 颜色

Question

I used the NavigationBarTheme in my bottomNavigationBar. I would like to ask if its possible to change the labelTextStyle when selected? Currently, I only have the grey color.

 bottomNavigationBar: NavigationBarTheme( data: NavigationBarThemeData( height: 65, indicatorColor: Colors.transparent, backgroundColor: Colors.white, labelTextStyle: MaterialStateProperty.all( const TextStyle( fontSize: 13.0, fontWeight: FontWeight.w700, color: Colors.grey, letterSpacing: 1.0, ), ), ),

Answer 1

Hy there is property called selectedLableStyle for BottomNavigationBar , you can use it like below -

bottomNavigationBar: BottomNavigationBar(
  // this is the property use to style lable
  selectedLabelStyle: TextStyle(fontSize: 22),
  selectedItemColor: Colors.red,
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.business),
      label: 'Business',
    ),
  ],
),

if you wants to use NavigationBarTheme as in your question then use MaterialStateProperty.resolveWith instead of MaterialStateProperty.all like below -

bottomNavigationBar: NavigationBarTheme(
        data: NavigationBarThemeData(
          height: 65,
          indicatorColor: Colors.transparent,
          backgroundColor: Colors.white,
          labelTextStyle: MaterialStateProperty.resolveWith((states) {
            if (states.contains(MaterialState.selected)) {
              return const TextStyle(
                fontSize: 13.0,
                fontWeight: FontWeight.w700,
                color: Colors.red,
                letterSpacing: 1.0,
              );
            }
            return const TextStyle(
              fontSize: 13.0,
              fontWeight: FontWeight.w700,
              color: Colors.grey,
              letterSpacing: 1.0,
            );
          }
          ),
        ),

For more info - BottomNavigationBar , MaterialStateProperty