Flutter: Giving a Size to a CircularProgressIndicator

Updated: August 24, 2023 By: A Goodman 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 a 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 of 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: