How To Change Flutter CircularProgressIndicator Color – Easy Flutter Example Code

flutter circularprogressindicator color

In this tutorial, we’ll learn how to change Flutter CircularProgressIndicator color. We’ll be using multiple Flutter code examples to understand it practically.

Introduction: Flutter CircularProgressIndicator Color

As the name suggests, it specifies the color of  Flutter circular progress indicator widget. Let’s first see its default color then we’ll practically customize it.

Default Flutter CircularProgressIndicator Color

In order to see that, we’ve to define a simple Flutter circular progress indicator widget. See below code:

SizedBox(
        height: 100,
        width: 100,
        child: CircularProgressIndicator(),
      )
flutter circularprogressindicator default color
This is the default color of Flutter CircularProgressIndicator. We also have wrapped this progress indicator with Flutter sizedBox to give it some specific height and width. Let’s now understand how to change its color.

Customizing Flutter CircularProgressIndicator Color

For that, we’ve to use the color constructor of Flutter CircularProgressIndicator widget. This constructor takes a color so we’ve passed a red color to it for demonstration. See below code:

CircularProgressIndicator(
          color: Colors.red,
        )
flutter circularprogressindicator color
So this is how we can practically change the color of Flutter CircularProgressIndicator. You can give any color to it of your choice.
Below is the complete source code of customized CircularProgressIndicator color.

Custom Flutter CircularProgressIndicator Color Source Code

flutter circularprogressindicator color

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Center(
          child: SizedBox(
        height: 100,
        width: 100,
        child: CircularProgressIndicator(
          color: Colors.red,
        ),
      )),
    ));
  }
}

Conclusion

To conclude this post, hope you now have a proper and detailed practical knowledge of how to change the color of Flutter CircularProgressIndicator. I’ll be very glad to receive your feedback on this post.

I’d also welcome you to visit my other articles as well. Thank you for reading this post.

Leave a Comment

Your email address will not be published.