CODEWITHSUNDEEP
flutterdartcolors
Arash
Arash

Reputation: 12465

How to change color of CircularProgressIndicator

How can I change the color of CircularProgressIndicator?

The value of the color is an instance of Animation<Color>, but I am hoping there is a simpler way to change the color without trouble of the animation.

Upvotes: 222

Views: 150830

Answers (18)

codrikaz
codrikaz

Reputation: 293

 static CircularProgressIndicator buildCircularProgressIndicator() {
    return CircularProgressIndicator(
      strokeWidth: 1,
      backgroundColor: BrandColors.kWhite,
      valueColor:
      AlwaysStoppedAnimation(BrandColors.brandColor),
    );

Upvotes: 0

Rasel Khan
Rasel Khan

Reputation: 4299

Use like this--->

CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation(Colors.grey[500]),)),

Upvotes: 2

My Car
My Car

Reputation: 4566

Try this:

CircularProgressIndicator(
  color: Colors.yellow, // Change your color here
),

Upvotes: 1

ASAD HAMEED
ASAD HAMEED

Reputation: 2900

Using progressIndicatorTheme allows to define a theme for progress indicator.

ThemeData(
      progressIndicatorTheme: ProgressIndicatorThemeData(color: Colors.white),
    )

Upvotes: 22

Tomas Baran
Tomas Baran

Reputation: 1983

accentColor is deprecated and no longer works.

To have it globally in ThemeData, set it like this:

LIGHT THEME:

theme: ThemeData(
                 colorScheme: ColorScheme.dark(
                    primary: Colors.pink,
                    ),
                ),

DARK THEME:

theme: ThemeData(
                 colorScheme: ColorScheme(
                    primary: Colors.pink,
                    ),
                ),

LOCALLY:

Or if you want it only for that one widget locally, just set the property of the CircularProgressIndicator like this:

CircularProgressIndicator(
        backgroundColor:Colors.white,
        valueColor: AlwaysStoppedAnimation<Color>(Colors.pink),
                    ),

Upvotes: 7

Code With AK
Code With AK

Reputation: 51

just write this code in your theme data of your app

    ThemeData(
        progressIndicatorTheme: ProgressIndicatorThemeData(
            color: Colors.grey.shade700,),)

Upvotes: 4

Sanjayrajsinh
Sanjayrajsinh

Reputation: 17249

Three way to solve your problem

1) Using valueColor property

CircularProgressIndicator(
     valueColor: new AlwaysStoppedAnimation<Color>(Colors.blue),
),

2) Set accentColor in your main MaterialApp widget. This is best way because you dont want to set color all the time when you use CircularProgressIndicator widget

MaterialApp(
        title: 'My App',
        home: MainPAge(),
        theme: ThemeData(accentColor: Colors.blue),
),

3) Using Theme Widget

Theme(
      data: Theme.of(context).copyWith(colorScheme: ColorScheme(
            primary: Colors.red,
            // You should set other properties too
        )),
      child: new CircularProgressIndicator(),
)

Upvotes: 141

BeHappy
BeHappy

Reputation: 4008

If you want to change it globally, in latest version of flutter you should change colorScheme:

void main() => runApp(
  MaterialApp(
    title: 'App',
    home: Home(),
    theme: ThemeData(
            colorScheme: ColorScheme(
                primary: Colors.red,
                // You should set other properties too
            )
        ),
  ),
);

Upvotes: 2

Diksha Pruthi
Diksha Pruthi

Reputation: 354

CircularProgressIndicator(
  backgroundColor: Colors.amberAccent,
  semanticsLabel: 'Linear progress indicator',
),

Upvotes: 0

Mito
Mito

Reputation: 4001

This worked for me:

CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(Colors.white))

Upvotes: 400

Pat Lee
Pat Lee

Reputation: 1658

<com.google.android.material.progressindicator.CircularProgressIndicator app:indicatorColor="@color/primaryColor" />

Upvotes: -4

Mr Bhati
Mr Bhati

Reputation: 789

backgroundColor set light color it saw like light background color on the circle, valueColor it is loading color it will show compile loading circle over the gray color

 CircularProgressIndicator(
        backgroundColor: Colors.gray,
        valueColor: AlwaysStoppedAnimation<Color>(Colors.black)
        )

Upvotes: 14

Shirsh Shukla
Shirsh Shukla

Reputation: 5993

for a sigle color set,

enter image description here

 CircularProgressIndicator(
     valueColor:AlwaysStoppedAnimation<Color>(Colors.red),
   );

for multi color change/set.

enter image description here

class MyApp extends StatefulWidget {
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyApp> with TickerProviderStateMixin {
      AnimationController animationController;
      @override
      void dispose() {
        // TODO: implement dispose
        super.dispose();
        animationController.dispose();
      }
      @override
      void initState() {
        super.initState();
        animationController =
            AnimationController(duration: new Duration(seconds: 2), vsync: this);
        animationController.repeat();
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Color Change CircularProgressIndicator"),
          ),
          body:  Center(
            child: CircularProgressIndicator(
              valueColor: animationController
                  .drive(ColorTween(begin: Colors.blueAccent, end: Colors.red)),
            ),
          ),
        );
      }
    }

Upvotes: 57

Musfiq Shanta
Musfiq Shanta

Reputation: 1625

valueColor:new AlwaysStoppedAnimation<Color>(Colors.yellow),

Upvotes: 7

Pepe Valdivia
Pepe Valdivia

Reputation: 39

In main.dart set the theme accentColor, the CircularProgressIndicator will use that color

void main() => runApp(new MaterialApp(
  theme: ThemeData(primaryColor: Colors.red, **accentColor:  Colors.yellowAccent**),
  debugShowCheckedModeBanner: false,
  home: SplashPage()
));

Upvotes: 3

Swaroop Maddu
Swaroop Maddu

Reputation: 4884

By default, it inherits accentColor from Themedata

  void main() => runApp(new MaterialApp(
  theme: ThemeData(
                 primaryColor: Colors.blue,
                 accentColor:  Colors.blueAccent,
                 //This will be the color for CircularProgressIndicator color
               ),
  home: Homepage()
    ));

You can change this accentColor property with your new color. Other way is using with predefined ThemeData like this

void main() => runApp(new MaterialApp(
  theme: ThemeData.light().copyWith(
                 accentColor:  Colors.blueAccent,
                 //change the color for CircularProgressIndicator color here
               ),
  home: Homepage()
    ));

Or else you can directly change this color property in CircularProgressIndicator as shown below

CircularProgressIndicator(
         valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
                    ),

Upvotes: 3

Haileapp
Haileapp

Reputation: 775

accentColor can be used for foreground color of Widgets.It changes the color any foreground widgets including circularprogressbar You can use like this:

void main() => runApp(
  MaterialApp(
    title: 'Demo App',
    home: MainClass(),
    theme: ThemeData(accentColor: Colors.black),
  ),
);

Upvotes: 17

Akshay Nandwana
Akshay Nandwana

Reputation: 1292

A theme is a widget that you can insert anywhere in your widget tree. It overrides the current theme with custom values Try this:

new Theme(
      data: Theme.of(context).copyWith(accentColor: Colors.yellow),
      child: new CircularProgressIndicator(),
    );

reference: https://gitter.im/flutter/flutter?at=5a84cf9218f388e626a51c2d

Upvotes: 11

Related Questions