Flutter 中新的导航栏标签颜色

Question

我有一个导航栏，我想更改其颜色，但我似乎在文档中找不到有关更改标签颜色的任何内容，关于如何执行此操作的任何想法？我当前的代码：

bottomNavigationBar: NavigationBar(
    backgroundColor: Colors.lightBlue[100]!,
    destinations: const [
      NavigationDestination(
        icon: Icon(Icons.home, color: Colors.white,),
        label: 'Home',
      ),
      NavigationDestination(
        icon: Icon(Icons.money, color: Colors.white),
        label: 'Expenses',
      ),
    ],
  ),

据我所知，标签是一个字符串，但是如何更改该字符串的颜色？我的第一个想法是使用 Text()，但 label 只接受字符串。

提前非常感谢！

Answer 1

您可以用 包裹NavigationBar小部件NavigationBarTheme，然后可以根据需要应用样式。要更改标签颜色，您可以执行以下操作：

bottomNavigationBar: NavigationBarTheme(
    data: NavigationBarThemeData(
      labelTextStyle: MaterialStateProperty.resolveWith<TextStyle>(
        (Set<MaterialState> states) => states.contains(MaterialState.selected)
            ? const TextStyle(color: Colors.blue)
            : const TextStyle(color: Colors.black),
      ),
    ),
    child: NavigationBar(
    backgroundColor: Colors.lightBlue[100]!,
    destinations: const [
      NavigationDestination(
        icon: Icon(Icons.home, color: Colors.white,),
        label: 'Home',
      ),
      NavigationDestination(
        icon: Icon(Icons.money, color: Colors.white),
        label: 'Expenses',
      ),
    ],
  ),)

Answer 2

您必须执行以下操作：

1. 创建“your_file_name”_theme.dart。（可以根据自己的喜好更改颜色）

final ThemeData myappTheme = ThemeData(
  navigationBarTheme: NavigationBarThemeData(
    labelTextStyle: MaterialStateProperty.resolveWith((state) {
      if (state.contains(MaterialState.selected)) {
        return const TextStyle(color: Colors.orange);
      }
      return const TextStyle(color: Colors.green);
    }),
  ),
);

2. 在您的 MaterialApp 小部件中，添加以下内容。（就我而言，我将其称为 myappTheme）

MaterialApp(
    theme: myappTheme,

3. 重新启动应用程序