How To Easily Change Flutter CircularProgressIndicator Size

flutter circularprogressindicator size

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()
flutter circularprogressindicator default size

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

flutter circularprogressindicator custom size

SizedBox(
        height: 100,
        width: 100,
        child: CircularProgressIndicator(),
      )

Example 2

custom flutter circularprogressindicator size

 

SizedBox(
        height: 50,
        width: 100,
        child: CircularProgressIndicator(),
      )

Example 3

flutter circular progress indicator size

SizedBox(
        height: 100,
        width: 20,
        child: CircularProgressIndicator(),
      )
So this is how you can customize Flutter circularProgressIndicator size. You can also wrap it with Flutter container widget to customize its size. But sizedBox widget is recommended if you don’t want to apply any decoration to its background.
Don’t hesitate to ask if you still have any questions related to the customization of Flutter circularProgressIndicator size. I’ll be glad to answer all your questions.
The complete source code of custom Flutter circularProgressIndicator size is given in the below section.

Custom Flutter CircularProgressIndicator Size Source Code

flutter circularprogressindicator size

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.

Leave a Comment

Your email address will not be published.