Flutter: Giving a Size to a CircularProgressIndicator

Last updated on May 28, 2022 A Goodman Loading... Post a comment

In Flutter, the CircularProgressIndicator widget, as its name implies, helps you implement a circle progress indicator that lets the user know that something is loading. This widget doesn’t ship options to set its size like width, height, radius, etc. In fact, the size of a CircularProgressIndicator depends on its parent. So, we can adjust the size of a CircularProgressIndicator by simply using a Container or a SizedBox widget.

Note: It would be best if you give the Container or SizedBox the width equal to the height. If the width and height are different, the CircularProgressIndicator will become an ellipse. If you place a CircularProgressIndicator in a Center widget or a Container widget with alignment, the size of CircularProgress will be as minimal as possible regardless its parent’s size.

Example Preview:

The Code:

Scaffold(
      appBar: AppBar(title: const Text('KindaCode.com')),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            const SizedBox(
              width: 200,
              height: 200,
              child: CircularProgressIndicator(
                color: Colors.blue,
                strokeWidth: 10,
              ),
            ),
            Container(
              width: 300,
              height: 300,
              decoration: const BoxDecoration(
                  shape: BoxShape.circle, color: Colors.amber),
              child: const CircularProgressIndicator(
                color: Colors.red,
                strokeWidth: 20,
              ),
            )
          ],
        ),
      ),
);

Further reading:

You can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You May Also Like