173

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?

14 Answers 14

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,
                  )
                ],
              ),
            ),
          );
10
  • 5
    Doing that, the circle is not correctly displayed and is cropped with Box dimensions.
    – fvisticot
    Dec 18, 2018 at 22:46
  • 65
    Make sure your child is Center(child: CircularProgressIndicator()) or the indicator will not fit the size box. Apr 19, 2019 at 13:16
  • 1
    @AndresCastro do you have any idea why the progress indicator has to be inside a Center widget?
    – Andrei
    Jun 26, 2019 at 17:31
  • 2
    could be in Center or Align , but it should have a parent with constraints Jun 26, 2019 at 17:32
  • 2
    add Center or Align as a parent of your SizedBox Jun 26, 2019 at 21:06
83

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

4
  • 1
    This was super helpful, thank you! Even if you replace SizedBox with Container, then too the UI works! Aug 6, 2020 at 8:53
  • It doesn't @AshwinBalani. Atleast did not work in my case, so can safely conclude that your assumption is not correct. Nov 28, 2020 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. github.com/flutter/website/issues/4992#event-4033238437
    – user48956
    Dec 1, 2020 at 17:22
  • @rahulserver can you share your code buddy? May be I can help Dec 9, 2020 at 13:13
61

Simple is always powerful, wrap it with transform widget

Transform.scale(
  scale: 0.5,
  child: CircularProgressIndicator(),
)
4
  • 2
    This works. Other solutions result in an oval instead of a circle.
    – Nero
    Dec 2, 2020 at 3:52
  • This works good. Other Solution may or may not work depend on your Widget Tree/Parent Widgets. Aug 28, 2021 at 9:35
  • This is the Perfect One! Jan 11 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 Jul 7 at 17:48
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),
        ),
      ),
    ),
  ],
);
3
  • 1
    You are definitely right. This is the correct answer Apr 22, 2021 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, 2021 at 7:56
  • I love Flutter but Flutter can be just so annoying sometime... lol
    – chichi
    Feb 6 at 0:30
16

This is the solution, which worked for me

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

10

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,
   )
  )
),
5

This could be useful

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

Add alignment property inside the Container

Container(
       alignment: Alignment.topCenter,
       child:CircularProgressIndicator()
    ),
1
  • 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.
    – Community Bot
    Aug 1, 2022 at 21:22
1

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.

1

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.

0

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,
      ),
    )
0
const SizedBox(
      height: 16,
      width: 16,
      child: CircularProgressIndicator(
        strokeWidth: 1.5,
      ),
    ),

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

-1
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,
    ),
  ) ;
}

1
  • 3
    Please give some description about your answer. Oct 3, 2019 at 5:14
-1

This easiest way for me.

CircularProgressIndicator(
    color = AppForeGroundColor,
    strokeWidth = 3.dp, // --> Circle stroke size
    modifier = Modifier.size(16.dp) // --> Width/Height
)
1
  • 2
    The question was about Flutter, not Compose.
    – solru
    May 2 at 11:20

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.