Flutter – Set Size to CircularProgressIndicator

In Flutter, we can simply wrap the CircularProgressIndicator widget as a Container widget and gives the height and width of the container that result in the increase and decrease in the size of the CircularProgressIndicator. A sample video is given below to get an idea about what we will do in this article.

How to Use?

Dart

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

This code creates a SizedBox widget with a child CircularProgressIndicator widget and sets the height and width of the SizedBox to 50.0 each.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add the material package that gives us the important methods and then call the runApp method in the main function that will call our application.

import 'package:flutter/material.dart';

void main() {
runApp(RunMyApp());
}

Step 3: Now we have to make a stateless widget RunMyApp Because our application does not go to change its state and then return the MaterialApp widget which allows us the set the title and theme and many more.

class RunMyApp extends StatelessWidget {

    const RunMyApp({super.key});
    
    @override
    Widget build(BuildContext context) {
      return MaterialApp(home:);
    }
}

Step 4: Give the home property and there can be a scaffold widget that has the property of AppBar and body. AppBar allows us to give the title of AppBar, color, leading, and trailing icon. Body contains the Container and has a child Column. Then we can use SizedBox and have a child CircularProgressIndicator, we can give the height and width of the container to set the size of the CircularProgressIndicator.

 Scaffold(
        appBar: AppBar(
          title: Text('Size of circular progress Indicator'),
        ),
        body: Container(
          child: Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: const [
                SizedBox(
                  child: CircularProgressIndicator(),
                  height: 200.0,
                  width: 200.0,
                ),
                SizedBox(
                  child: CircularProgressIndicator(),
                  height: 50.0,
                  width: 50.0,
                ),
                SizedBox(
                  child: CircularProgressIndicator(),
                  height: 10.0,
                  width: 10.0,
                )
              ],
            ),
          ),
        ),
      ),

Code Example

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(RunMyApp());
}

class RunMyApp extends StatelessWidget {
  const RunMyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Size of circular progress Indicator'),
        ),
        body: Container(
          child: Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: const [
                SizedBox(
                  child: CircularProgressIndicator(),
                  height: 200.0,
                  width: 200.0,
                ),
                SizedBox(
                  child: CircularProgressIndicator(),
                  height: 50.0,
                  width: 50.0,
                ),
                SizedBox(
                  child: CircularProgressIndicator(),
                  height: 10.0,
                  width: 10.0,
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Output