Flutter CircularProgressIndicator

CircularProgressIndicator is a built-in widget in Flutter that shows a circular progress indicator. It is often used to indicate that a process is ongoing, and that the user will need to wait for it to complete.

Basic Usage

The CircularProgressIndicator widget is very easy to use. Simply create a widget with the CircularProgressIndicator constructor, and pass in any options that you would like to customize.

CircularProgressIndicator(
  backgroundColor: Colors.grey,
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
  strokeWidth: 5.0,
);

This code will create a CircularProgressIndicator with a grey background color, a blue progress color, and a stroke width of 5.0.

Options

Here are a few of the most common options that you will want to use when customizing your CircularProgressIndicator.

backgroundColor

The backgroundColor option allows you to set the background color of the CircularProgressIndicator.

CircularProgressIndicator(
  backgroundColor: Colors.grey,
);

value

The value option allows you to set the current progress value of the CircularProgressIndicator. This should be a value between 0.0 and 1.0.

CircularProgressIndicator(
  value: 0.5,
);

valueColor

The valueColor option allows you to set the color of the progress indicator. This should be an Animation<Color> object.

CircularProgressIndicator(
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
);

strokeWidth

The strokeWidth option allows you to set the width of the progress indicator.

CircularProgressIndicator(
  strokeWidth: 5.0,
);

Conclusion

CircularProgressIndicator is a powerful and flexible widget that can be easily customized to fit the needs of your application. Whether you are building a simple loading screen, or a complex multi-step progress indicator, CircularProgressIndicator has the tools you need to get the job done.