How to use CircularProgressIndicator in Flutter

Key takeaways:

• CircularProgressIndicator is a widget in Flutter used to show loading or processing status.

• It is commonly used for displaying loading states during data fetching, network requests, and other asynchronous tasks.

• The indicator can be customized using properties like backgroundColor, valueColor, strokeWidth, and semanticsLabel.

• To create a CircularProgressIndicator, use a Center widget to position it and customize its appearance with colors and size.

• Common use cases for CircularProgressIndicator include loading screens, list loading, network requests, file uploads/downloads, and form submissions.

Flutter is a powerful toolkit created by Google to build fast mobile, web, and desktop applications using just one Codebase. It offers an easy-to-use and flexible development environment, making it a popular choice for developers to create beautiful and responsive user interfaces across multiple platforms.

The CircularProgressIndicator widget

CircularProgressIndicator is a built-in widget used to indicate that the application is busy processing or loading content. It displays a circular progress indicator commonly seen when loading data or performing background tasks. It conveys a message to the user to wait for the application until the task is completed.

Customization of CircularProgressIndicator

We can customize the appearance of the CircularProgressIndicator using various properties:

• backgroundColor: Allows you to change the background color of the indicator.

• valueColor: Defines the color of the indicator. You can use AlwaysStoppedAnimation<Color> to specify a single color or Animation<Color> to specify an animated color.

• strokeWidth: Specifies the width of the circular progress indicator’s lines.

• semanticsLabel: Sets a label for the progress indicator for accessibility purposes.

Creating a CircularProgressIndicator

Let’s follow the steps below to create an CircularProgressIndicator in the Flutter application:

1- Create a Flutter project

Let’s start by creating a new Flutter project. For this, open the terminal and execute the following commands:

2- Create the user interface

Let’s create a Scaffold inside the MaterialApp and inside that, we define the AppBar with the title as “CircularProgressIndicator Implementation.” Inside that, we will add a Center widget, which moves the CircularProgressIndicator in center. We have set the backgroundColor of indicator to Colors.grey[300], strokeWidth to 5, and valueColor to AlwaysStoppedAnimation<Color>(Colors.red). This is displayed in the following code:

We can place it wherever you want to display the loading indicator, such as during data fetching or any other asynchronous operation.

3- Complete implementation

Following is the complete code of the Flutter application with the implementation of a CircularProgressIndicator:

Note: You can find your application running at the given link once you run the code widget above.

Code explanation

• Lines 15–17: We can set the title of the AppBar to “CircularProgressIndicator Implementation.”

• Line 18: We have used the Center widget to center the indicator.

• Lines 19–23: We have created a customized CircularProgressIndicator.

Uses of CircularProgressIndicator

Following are some of the major uses of CircularProgressIndicator:

• Loading screens: Indicating that data is being fetched or processed.

• List loading: Showing progress while loading more items in a list or grid.

• Network requests: Displaying progress while waiting for responses from network requests.

• Refreshing data: Indicating ongoing data refresh when implementing pull-to-refresh functionality.

• File uploads/downloads: Showing progress during file uploads or downloads.

• Form submissions: Indicating that a form submission is in progress.

• Image loading: Displaying progress while loading images from a remote server.

Conclusion

In conclusion, the CircularProgressIndicator in Flutter is a simple yet effective way to visually communicate that the app is busy processing a task. By customizing its appearance and integrating it in various parts of your app, you can provide a smoother and more informative user experience. Whether it’s for loading data, processing background tasks, or indicating network activity, the CircularProgressIndicator enhances the overall interactivity and usability of your application.