How to set size to CircularProgressIndicator?

Question

I'm trying to make a loading screen for my application, I'm using CircularProgressIndicator widget, but I want to know if there's a way to make it bigger in height and width, it's too small.

So, could someone help me with this?

diegoveloper · Accepted Answer · 2023-05-18T02:37:24.580

246

You can wrap your CircularProgressIndicator inside a Center and then SizedBox to define the size:

       @override
        Widget build(BuildContext context) {
          return Container(
            child: Center(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  SizedBox(
                    child: Center(
                      child: CircularProgressIndicator()
                    ),
                    height: 200.0,
                    width: 200.0,
                  ),
                  SizedBox(
                    child: Center(
                      child: CircularProgressIndicator()
                    ),
                    height: 50.0,
                    width: 50.0,
                  ),
                  SizedBox(
                    child: Center(
                      child: CircularProgressIndicator()
                    ),
                    height: 10.0,
                    width: 10.0,
                  )
                ],
              ),
            ),
          );

edited May 18 '23 at 02:37

answered Aug 17 '18 at 19:01

diegoveloper

93,875
20
236
194

5

Doing that, the circle is not correctly displayed and is cropped with Box dimensions. – fvisticot Dec 18 '18 at 22:46
65

Make sure your child is Center(child: CircularProgressIndicator()) or the indicator will not fit the size box. – Andres Castro Apr 19 '19 at 13:16
1

@AndresCastro do you have any idea why the progress indicator has to be inside a Center widget? – Andrei Jun 26 '19 at 17:31
2

could be in Center or Align , but it should have a parent with constraints – diegoveloper Jun 26 '19 at 17:32
@diegoveloper I tried SizedBox with width/height, but the progress indicator still got out of the parent. – Andrei Jun 26 '19 at 21:02
2

add Center or Align as a parent of your SizedBox – diegoveloper Jun 26 '19 at 21:06
@diegoveloper, may I ask you to have a look at a Flutter related question here : https://stackoverflow.com/questions/60565658/fluter-image-picker-package-show-images-one-after-another-with-delete-action ? – Istiaque Ahmed Mar 26 '20 at 20:51
Instead of Center or Align one may use an UnconstrainedBox (see https://flutter.dev/docs/development/ui/layout/constraints) – Robbendebiene Sep 07 '21 at 12:53
Thanks @AndresCastro for the Center(child: CircularProgressIndicator()), still true in 2023. – Lexon Li Mar 20 '23 at 13:15
On the contrary, @LexonLi, I found Andres' answer still made the circle oval-shaped. What solved it for me was wrapping the parent SizedBox in a Center, like here: https://stackoverflow.com/a/59030730/2063246. – Halogen May 18 '23 at 01:49

user48956 · Answer 2 · 2020-12-01T17:23:28.557

82

Please test your answers.

By simply placing the CircularProgressIndicator in a SizedBox, or a Container:

main() =>
    runApp(
        SizedBox(width: 30, height: 30, child: CircularProgressIndicator()));

... still results in the CircularProgressIndicator filling the available space. SizedBox does not constrain the CircularProgressIndicator (which seems like a bug in Flutter).

Wrapping it with Center, however, will make it work:

main() =>
    runApp(Center(child: 
        SizedBox( width: 30, height: 30, child: CircularProgressIndicator())));

I complained about this confusing behavior on Github. The flutter team helpfully responded with new docs explaining that a widget’s desired size may be ignored for if it’s alignment can’t be determined.

https://github.com/flutter/website/pull/5010/commits/3070c777a61b493b46cdde92fa7afc21de7adf25

edited Dec 01 '20 at 17:23

answered Feb 04 '20 at 01:14

user48956

14,850
19
93
154

1

This was super helpful, thank you! Even if you replace SizedBox with Container, then too the UI works! – Ashwin Balani Aug 06 '20 at 08:53
It doesn't @AshwinBalani. Atleast did not work in my case, so can safely conclude that your assumption is not correct. – rahulserver Nov 28 '20 at 11:23
1

Again -- its not about SizedBox or Container, and the accepted answer is incorrect. Without an alignment, the sizes of those widgets are ignored. Flutter *finally* added a note about it. https://github.com/flutter/website/issues/4992#event-4033238437 – user48956 Dec 01 '20 at 17:22
@rahulserver can you share your code buddy? May be I can help – Ashwin Balani Dec 09 '20 at 13:13

score 61 · Answer 3 · answered Oct 09 '20 at 21:25

61

Simple is always powerful, wrap it with transform widget

Transform.scale(
  scale: 0.5,
  child: CircularProgressIndicator(),
)

answered Oct 09 '20 at 21:25

Anees Hameed

5,916
1
39
43

2

This works. Other solutions result in an oval instead of a circle. – Nero Dec 02 '20 at 03:52
This works good. Other Solution may or may not work depend on your Widget Tree/Parent Widgets. – Purvik Rana Aug 28 '21 at 09:35
This is the Perfect One! – Sajad Rahmanipour Jan 11 '23 at 23:35
this should be the most voted answer because `transform` maintain the position of the widget while center widget does not maintain the constraint width and height – Michael Codes Jul 07 '23 at 17:48

score 31 · Answer 4 · answered Sep 18 '19 at 15:09

31

You can control the size of the indicator better if you wrap it with a Column Widget. It doesn't hurt, but gets the job done. In my case is was using a small loading indicator inside a button.

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Center(
      child: Container(
        height: 20,
        width: 20,
        margin: EdgeInsets.all(5),
        child: CircularProgressIndicator(
          strokeWidth: 2.0,
          valueColor : AlwaysStoppedAnimation(Colors.white),
        ),
      ),
    ),
  ],
);

answered Sep 18 '19 at 15:09

sh0umik

1,549
2
17
27

1

You are definitely right. This is the correct answer – Joseph Ofem Apr 22 '21 at 11:01
Yes that worked for me, too! And if you want to have a minimal dialog in terms of height, just give the column this additional attribute: mainAxisSize: MainAxisSize.min – stan May 17 '21 at 07:56
I love Flutter but Flutter can be just so annoying sometime... lol – chichi Feb 06 '23 at 00:30

score 16 · Answer 5 · answered Oct 06 '20 at 10:32

This is the solution, which worked for me

Center(
        heightFactor: 1,
        widthFactor: 1,
        child: SizedBox(
          height: 16,
          width: 16,
          child: CircularProgressIndicator(
            strokeWidth: 1.5,
          ),
        ),
      )

score 9 · Answer 6 · answered Feb 28 '21 at 20:12

9

This worked for me. The important thing was wrapping a center around the progress indicator

SizedBox(
  height: 16,
  width: 16,
  child: Center(
   child: CircularProgressIndicator(
    strokeWidth: 1.5,
   )
  )
),

answered Feb 28 '21 at 20:12

Archie

111
2
3

score 5 · Answer 7 · answered Aug 13 '19 at 08:51

This could be useful

Container(
          width: 50.0,
          height: 20.0,
          child: (CircularProgressIndicator(
            valueColor: AlwaysStoppedAnimation<Color>(
              Colors.green,
            ),
            backgroundColor: Colors.red,
            value: 0.2,
          ))),

Mizanu Zelalem Degu · Answer 8 · 2022-07-27T07:04:06.493

2

Add alignment property inside the Container

Container(
       alignment: Alignment.topCenter,
       child:CircularProgressIndicator()
    ),

edited Jul 27 '22 at 07:04

answered Jul 27 '22 at 07:02

Mizanu Zelalem Degu

21
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 01 '22 at 21:22

score 1 · Answer 9 · answered Dec 09 '20 at 16:44

The only way I could prevent the CircularProgressIndicator from being clipped at the top, bottom, left and right was by wrapping it in a Padding with padding set to half the stroke width of the indicator.

  Padding(
    padding: EdgeInsets.all(5),
    child: SizedBox(
      width: 100,
      height: 100,
      child: CircularProgressIndicator(
        strokeWidth: 10,
      )
    )
  )

Not sure why this was suddenly an issue though, I've been using circular progress indicators for years with no problems before.

score 1 · Answer 10 · answered May 17 '21 at 05:41

You can use this example to handle better the widget Indicator display.

SizedBox(
        height: 15.0,
        width: 15.0,
            child: Transform.scale(
              scale: 2,
              child: CircularProgressIndicator(
                strokeWidth: 2,
                    valueColor: AlwaysStoppedAnimation<Color>(
                      Color(Colors.blue),
                ),
              ),
            ),
          ),

This will allow you change the size of the indicator and control it better inside a box or button.

score 0 · Answer 11 · answered Aug 15 '22 at 14:16

You should give the Container or SizedBox the same width as the height. CircularProgressIndicator will become an ellipse if the width and height are different.

The container is only preferable when you want some customization with resizing.

 const SizedBox(
              width: 100,
              height: 100,
              child: CircularProgressIndicator(
                color: Colors.blue,
                strokeWidth: 10,
              ),
            ),

or

   const Container(
      width: 100,
      height: 100,
      decoration: const BoxDecoration(
          shape: BoxShape.circle, color: Colors.amber),
      child: const CircularProgressIndicator(
        color: Colors.red,
        strokeWidth: 20,
      ),
    )

score 0 · Answer 12 · answered Oct 12 '22 at 03:36

0

const SizedBox(
      height: 16,
      width: 16,
      child: CircularProgressIndicator(
        strokeWidth: 1.5,
      ),
    ),

you also set color for CircularProgressIndicator and some other properties as well.

answered Oct 12 '22 at 03:36

Muhammad Javed

21
2

score -1 · Answer 13 · answered Oct 03 '19 at 04:48

bool isLoading = false;

Widget build(BuildContext context) {
  return isLoading
    ? _loadingIndicator()
    : FlatButton.icon(
    icon: Icon(Icons.arrow_forward),
    label: Text('Go to'),
    onPressed: () async {
      setState(() => isLoading = true);
      // Async code ---> Then
      setState(() => isLoading = false);
    },
  );
}

Widget _loadingIndicator() {
  return Padding(
    padding: EdgeInsets.symmetric(vertical: 12.0),
    child: SizedBox(
      child: CircularProgressIndicator(
        valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
        strokeWidth: 3.0,
      ),
      height: 25.0,
      width: 25.0,
    ),
  ) ;
}

Please give some description about your answer. – Angel F Syrus Oct 03 '19 at 05:14 — Angel F Syrus, Oct 03 '19 at 05:14

score -1 · Answer 14 · answered Feb 03 '23 at 05:24

-1

This easiest way for me.

CircularProgressIndicator(
    color = AppForeGroundColor,
    strokeWidth = 3.dp, // --> Circle stroke size
    modifier = Modifier.size(16.dp) // --> Width/Height
)

answered Feb 03 '23 at 05:24

Binh Ho

3,690
1
31
31

2

The question was about Flutter, not Compose. – solru May 02 '23 at 11:20

How to set size to CircularProgressIndicator?

14 Answers14

Linked

Related