How can I set the backgroundColor of CircularProgressIndicator using the Flutter Theme widget

I can pass the backgroundColor as a parameter on creation of the CircularProgressIndicator, but I would like to do it in a Theme that I wrap around the Scaffold widget. Which value in the ThemeData is used to determine the backgroundColor of this widget?

Solution 1: Samet

If you want to set the background color and progress circle color, I recommend to use the following:

circularProgress<Widget>() {
  return Container(
    color: Colors.white,
    padding: EdgeInsets.only(top: 12.0),
    child: CircularProgressIndicator(
      valueColor: AlwaysStoppedAnimation(Colors.redAccent),

Solution 2: Thierry

It seems you will not manage to change the backgroundColor of your CircularProgressIndicator using Flutter ThemeData due to a bug in Flutter.

I opened an Issue on GitHub:

According to the documentation (, a CircularProgressIndicator's backgroundColor should be the current theme's ThemeData.backgroundColor by default.

While it's the case for the valueColor (ThemeData.accentColor by default) it does not work with the backgroundColor.

I think the problem resides in the _buildMaterialIndicator method were the backgroundColor is set to widget.backgroundColor instead of _getBackgroundColor(context).

  Widget _buildMaterialIndicator(BuildContext context, double headValue, double tailValue, double offsetValue, double rotationValue) {
    return widget._buildSemanticsWrapper(
      context: context,
      child: Container(
        constraints: const BoxConstraints(
          minWidth: _kMinCircularProgressIndicatorSize,
          minHeight: _kMinCircularProgressIndicatorSize,
        child: CustomPaint(
          painter: _CircularProgressIndicatorPainter(
            backgroundColor: widget.backgroundColor,
            valueColor: widget._getValueColor(context),
            value: widget.value, // may be null
            headValue: headValue, // remaining arguments are ignored if widget.value is not null
            tailValue: tailValue,
            offsetValue: offsetValue,
            rotationValue: rotationValue,
            strokeWidth: widget.strokeWidth,

Full source code to reproduce the issue:

enter image description here

import 'package:flutter/material.dart';

void main() {
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),

class HomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const SizedBox(height: 16.0),
            Text('BACKGROUND COLOR:'),
              backgroundColor: Colors.amber.shade300,
            const SizedBox(height: 16.0),
              data: Theme.of(context).copyWith(
                backgroundColor: Colors.amber.shade300,
              child: CircularProgressIndicator(backgroundColor: null),