tips n tracks
Image default
Flutter Development

How to set size of CircularProgressIndicator in flutter

CircularProgressIndicator in Flutter help us better to point user with waiting process in your application. Flutter CircularProgressIndicator displays a circular shape rotating ring indicator for the ongoing progress indication. Flutter CircularProgressIndicator is extremely useful flutter widget which indicates user that there are some processing happening within the background together with your flutter app and user has got to wait till flutter and dart code finishing their task.

In this flutter recipe we are going to set size or resize CircularProgressIndicator flutter widget width and height. Yes, you there’s a way to make CircularProgressIndicator flutter widget bigger in height and width, if you feels it too small.

By simply placing the CircularProgressIndicator in a SizedBox, or a Container you can set size of CircularProgressIndicator in flutter.

Set CircularProgressIndicator flutter widget width and height with a SizedBox

@override
    Widget build(BuildContext context) {
      return Container(
        child: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              SizedBox(
                child: CircularProgressIndicator(),
                height: 25.0,
                width: 25.0,
              ),
              SizedBox(
                child: CircularProgressIndicator(),
                height: 10.0,
                width: 10.0,
              )
            ],
          ),
        ),
      );

Set CircularProgressIndicator flutter widget width and height with a Container

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

How to Set CircularProgressIndicator Properties

Setting flutter CircularProgressIndicator Properties is quite an easy task. Below is that the list of obtainable properties that you’ll be able to pass as the constructor parameters for flutter CircularProgressIndicator.

  • Key key: The widget key, used to control if it’s should be replaced.
  • double value: A value from 0.0 to 1.0 representing the completion progress (for determinate).
  • Color backgroundColor: The background color of the flutter CircularProgressIndicator widget.
  • Animation<Color> valueColor: The progress indicator’s color as an animated value.
  • double strokeWidth: The width of the line used to draw the circle for flutter CircularProgressIndicator. Defaults to 4.0.
  • String semanticsLabel: ySemantics.label for the widgetyy.
  • String semanticsValueSemantics.value for the widget.

Leave a Comment