How to set size to CircularProgressIndicator?

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?

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,
              )
            ],
          ),
        ),
      );

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

Simple is always powerful, wrap it with transform widget

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

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),
        ),
      ),
    ),
  ],
);

This is the solution, which worked for me

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

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

This could be useful

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

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.

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.

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