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?

score 201 · Accepted Answer · edited Dec 09 '18 at 18:27

201

You can wrap your CircularProgressIndicator inside a SizedBox widget

   @override
    Widget build(BuildContext context) {
      return Container(
        child: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              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,
              )
            ],
          ),
        ),
      );

edited Dec 09 '18 at 18:27

hankchiutw

1,288
1
9
15

answered Aug 17 '18 at 19:01

diegoveloper

79,114
19
208
182

3

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

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
1

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

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

59

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

13,091
17
83
137

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
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 33 · Answer 3 · answered Oct 09 '20 at 21:25

33

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

4,874
1
33
39

1

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

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

25

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,179
2
14
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

score 7 · 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 6 · Answer 6 · answered Feb 28 '21 at 20:12

6

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

81
1
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,
          ))),

score 1 · Answer 8 · 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 9 · 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 -1 · Answer 10 · 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

How to set size to CircularProgressIndicator?

10 Answers10

Linked

Related