When an app is doing something that takes some time, users may not know if the app is frozen or if it's still working. To avoid confusion and keep the user informed, you can add a progress indicator to your app.
In Flutter, the
CircularProgressIndicator widget provides a circular progress bar. In this short guide, we'll cover the basics of using this widget in your app.
To create a
CircularProgressIndicator, simply add it to your widget tree:
You can customize the appearance of the progress indicator with different properties such as
strokeWidth. Here's an example:
1CircularProgressIndicator(2 valueColor: AlwaysStoppedAnimation<Color>(Colors.red),3 backgroundColor: Colors.grey,4 strokeWidth: 5,5)
This will display a red progress indicator with a gray background color and a stroke width of 5 pixels.
By default, the progress indicator animates continuously in a loop. However, you can control the progress with the
1CircularProgressIndicator(2 value: 0.5,3)
This indicates that the progress is half done.
If you want to show an indeterminate progress (when you don't know the duration or completion status), set the
value property to
1CircularProgressIndicator(2 value: null,3)
This will show an infinite progress loop.
You can add a label to the progress indicator by wrapping it with a
1Column(2 mainAxisAlignment: MainAxisAlignment.center,3 children: <Widget>[4 CircularProgressIndicator(),5 SizedBox(height: 20),6 Text('Loading...'),7 ],8)
CircularProgressIndicator widget is a simple way to add a visual indication of progress to your app's UI. By customizing its appearance and controlling its progress, you can make your app more user-friendly.