如何修改FlutterFire UI的强调色

FlutterFire UI组件不会直接继承全局ThemeData的配色，需要通过自定义FirebaseUIAuthTheme来覆盖默认的强调色配置，具体实现方式如下：

• 在使用Firebase UI登录组件（如SignInScreen）时，直接传入theme参数自定义配色：

SignInScreen(
  theme: FirebaseUIAuthTheme(
    primaryColor: Colors.purple, // 设置目标Material紫色
    accentColor: Colors.purpleAccent,
    // 可针对具体组件细化样式
    buttonTheme: FirebaseUIButtonTheme(
      buttonColor: Colors.purple,
      disabledButtonColor: Colors.purple.shade300,
      textStyle: TextStyle(color: Colors.white),
    ),
    inputDecorationTheme: InputDecorationTheme(
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Colors.purple),
      ),
    ),
  ),
  // 其他组件配置项
);

• 若需要全局统一配置，可在MaterialApp的builder中设置Firebase UI的全局主题：

MaterialApp(
  builder: (context, child) {
    return FirebaseUIAuth(
      theme: FirebaseUIAuthTheme(
        primaryColor: Colors.purple,
        accentColor: Colors.purpleAccent,
      ),
      child: child,
    );
  },
  // 全局主题及其他配置
);

通过以上方式即可替换默认的蓝色强调色，改为你需要的Material紫色系配色。

内容的提问来源于stack exchange，提问作者Garv Shah