How To Easily Change 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()

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(),
      )

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

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

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(),
      )),
    ));
  }
}