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(), )
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, )
Custom Flutter CircularProgressIndicator Color Source Code
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.
