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