How to set size to CircularProgressIndicator?

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

Tags:

Flutter