如何为Flutter的CircularProgressIndicator.adaptive()实现跨平台统一主题？

这是Flutter的设计逻辑，并非bug。CircularProgressIndicator.adaptive()在Android端调用的是Material风格的CircularProgressIndicator，会响应Material主题的颜色配置；但在iOS端会切换为CupertinoActivityIndicator，该组件默认不读取Material主题的颜色，需要单独配置Cupertino相关主题或直接指定颜色。

以下是几种可行的解决方法：

方法一：直接指定color参数 #

这是最直接的方式，给adaptive组件显式传入颜色值，两端都会生效：

CircularProgressIndicator.adaptive(
  color: Theme.of(context).colorScheme.primary, // 可使用主题色或自定义颜色
)

方法二：全局配置Cupertino主题 #

如果需要全局统一iOS端的指示器颜色，可以在MaterialApp中嵌套CupertinoTheme，或者通过主题配置指定Cupertino相关样式：

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),
  ),
  home: CupertinoTheme(
    data: CupertinoThemeData(
      activityIndicatorColor: Colors.red, // 也可从Material主题中取色
    ),
    child: const YourHomeScreen(),
  ),
);

若要全局生效，也可通过MaterialApp的builder参数统一包裹页面：

MaterialApp(
  builder: (context, child) {
    return CupertinoTheme(
      data: CupertinoThemeData(
        activityIndicatorColor: Theme.of(context).colorScheme.primary,
      ),
      child: child!,
    );
  },
  // 其他配置项...
);

方法三：自定义自适应指示器组件 #

如果需要更灵活的平台适配逻辑，可以自行封装组件，完全控制两端的样式：

class AdaptiveProgressIndicator extends StatelessWidget {
  const AdaptiveProgressIndicator({super.key, this.color});

  final Color? color;

  @override
  Widget build(BuildContext context) {
    final targetColor = color ?? Theme.of(context).colorScheme.primary;
    final platform = Theme.of(context).platform;

    if (platform == TargetPlatform.iOS || platform == TargetPlatform.macOS) {
      return CupertinoActivityIndicator(color: targetColor);
    } else {
      return CircularProgressIndicator(color: targetColor);
    }
  }
}

之后直接使用AdaptiveProgressIndicator()即可，两端颜色会保持一致。

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