使用 ThemeData 时 Flutter TabBar 的 labelColor 错误

Question

我尝试通过 ThemeData 更改 TabBar 的 labelColor 值。

child: MaterialApp(
        theme: ThemeData.light().copyWith(
          colorScheme: ColorScheme.fromSwatch(
            primarySwatch: Colors.deepPurple,
          ).copyWith(
            secondary: Colors.amber,
          ),
          tabBarTheme: ThemeData.light().tabBarTheme.copyWith(
                labelColor: ThemeData.light().colorScheme.secondary,
              ),
        ),
        home: const RootContainer(),),);

所以我的标签应该是琥珀色的。相反，它们是一些蓝色的……（下图）。 我做错了什么以及如何解决它？

结果：

Answer 1

颜色没有变化，因为ThemeData.light() returns ThemeData没有初始化。 要使用主题的颜色，请用 Builder 和 Theme.of(context) 包装您的小部件，如下所示。

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light().copyWith(
        colorScheme: ColorScheme.fromSwatch(
          primarySwatch: Colors.deepPurple,
        ).copyWith(
          secondary: Colors.amber,
        ),
      ),
      home: Builder(builder: (context) {
        final theme = Theme.of(context);
        
        return Theme(
          data: theme.copyWith(
            tabBarTheme: theme.tabBarTheme.copyWith(
              labelColor: theme.colorScheme.secondary,
            ),
          ),
          child: const RootContainer(),
        );
      }),
    );
  }
}