In this article, we’ll practically learn how to change Flutter circularProgressIndicator size by using an easy Flutter example code.
After reading this post, you’ll have a detailed practical knowledge of how to easily customize Flutter circularProgressIndicator size in your own Flutter code as well.
So what are we both waiting for? Let’s jump right into it.
What is Flutter CircularProgressIndicator Size?
Flutter circular progress indicator widget is used to show a circular animation in Flutter app screen. It can be used to show a loading animation in app’s screen where we are waiting for some data to be fetched.
In this post, we’ll see how to change the size of our progress indicator widget. So let’s get right into it.
Customizing Progress Indicator Widget Size
First we have to implement a simple Flutter circular progress indicator widget. See below code:
CircularProgressIndicator()

You can see in the above image that we now have a circular indicator on our screen. Implement it in your own code and you will see it animating in a circular direction.
Now in order to change its size. We’ll wrap it with Flutter sizedBox widget. Then by using the height and width constructors of sizedBox widget class, we can easily change our Flutter circularProgressIndicator size. See below examples:
Example 1
SizedBox( height: 100, width: 100, child: CircularProgressIndicator(), )
Example 2
SizedBox( height: 50, width: 100, child: CircularProgressIndicator(), )
Example 3
SizedBox( height: 100, width: 20, child: CircularProgressIndicator(), )
Custom Flutter CircularProgressIndicator Size 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: 200, width: 100, child: CircularProgressIndicator(), )), )); } }
Conclusion
In conclusion, hope you now have an in-depth practical knowledge of how to properly customize Flutter circularProgressIndicator size. I’ll be looking forward at your feedback on this post.
I’d also highly encourage you to visit my other articles. Thank you for reading this post.