CODEWITHSUNDEEP
flutter
Teun K
Teun K

Reputation: 73

Set backgroundColor of CircularProgressIndicator using Theme widget

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?

Upvotes: 1

Views: 1929

Answers (2)

Thierry
Thierry

Reputation: 8393

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: https://github.com/flutter/flutter/issues/77647

According to the documentation (https://api.flutter.dev/flutter/material/ProgressIndicator/backgroundColor.html), 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() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text('DEFAULT:'),
            CircularProgressIndicator(),
            const SizedBox(height: 16.0),
            Text('BACKGROUND COLOR:'),
            CircularProgressIndicator(
              backgroundColor: Colors.amber.shade300,
            ),
            const SizedBox(height: 16.0),
            Text('THEME:'),
            Theme(
              data: Theme.of(context).copyWith(
                accentColor: Colors.green.shade300,
                canvasColor: Colors.red.shade300,
                backgroundColor: Colors.amber.shade300,
              ),
              child: CircularProgressIndicator(backgroundColor: null),
            ),
          ],
        ),
      ),
    );
  }
}

Upvotes: 3

Samet
Samet

Reputation: 73

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,
    alignment: Alignment.center,
    padding: EdgeInsets.only(top: 12.0),
    child: CircularProgressIndicator(
      valueColor: AlwaysStoppedAnimation(Colors.redAccent),
    ),
  );
}

Upvotes: 0

Related Questions