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?

I'll appreciate any feedback.

回答1:

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

回答2:

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:

This could be useful

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

回答4:

Please test your answers. 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 SizedBox, however, will:

main() =>
    runApp(Center(child: 
        SizedBox( width: 30, height: 30, child: CircularProgressIndicator())));

回答5:

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