How to apply Theming to CircularProgressIndicator.adaptive() in Flutter for both Android and iOS?

Question

I'm currently working on a Flutter project and trying to incorporate Theming into my app. Specifically, I want to apply Theming to the CircularProgressIndicator.adaptive() widget. While I've successfully changed the color on Android using the regular CircularProgressIndicator, it seems that the adaptive version only responds to color changes on Android.

Nothing in the documentation is pointing me to a way to give the progress indicator a color using Theming. Is this a known limitation or possibly a bug in Flutter? I'm wondering if I'm missing something fundamental about Theming in Flutter.

Has anyone else encountered this issue, and is there a recommended workaround? I'd appreciate any insights or guidance on how to achieve consistent Theming for CircularProgressIndicator.adaptive() across both Android and iOS platforms.

Thank you!

I prepared a minimal example:

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

final myThemeData = ThemeData(
  progressIndicatorTheme: const ProgressIndicatorThemeData(
    color: Colors.red,
  ),
);

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Theme(
                  data: myThemeData.copyWith(platform: TargetPlatform.iOS),
                  child: const CircularProgressIndicator.adaptive()),
              const SizedBox(height: 50),
              Theme(
                  data: myThemeData.copyWith(platform: TargetPlatform.android),
                  child: const CircularProgressIndicator.adaptive()),
            ],
          ),
        ),
      ),
    );
  }
}

Which produces the following result:

I want both of the indicators to have a red color.

Answer 1

To achieve this just do

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}


class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        progressIndicatorTheme: const ProgressIndicatorThemeData(
          color: Colors.red,
        ),
      ),
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
            CircularProgressIndicator.adaptive(),
            ],
          ),
        ),
      ),
    );
  }
}

Setting the theme parameter in your MaterialApp gives it an app-wide theme, so now your progress indicator would always be red or whatever color you set to it.

Answer 2

There seem to be no working way to set the color of CircularProgressIndicator.adaptive() for iOS as the set value will be ignored and it will be shown in native gray color always. However, you can make your code conditional and use CupertinoActivityIndicator instead for iOS:

@override
  Widget build(BuildContext context) {
    return Container(          
            width: 50.0,
            height: 50.0,
            child:  Platform.isIOS ? CupertinoActivityIndicator(color: Colors.red): 
         CircularProgressIndicator.adaptive(
        strokeWidth: 7,
              backgroundColor: Colors.grey,
              valueColor: Colors.red,
              
            ));
  }

Note that you need to import platform from Dart IO package inside the file for making it work:

import 'dart:io' show Platform;