Flutter Change NavigationBarThemeData labelTextStyle color when selected-CodePudding

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

CodePudding user response：

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