K-Learn

Flutter CircularProgressIndicator Widget

Posted on Friday, 03 March 2023 04:04 PM

The CircularProgressIndicator widget in Flutter is a widget that displays a spinning wheel to indicate that the app is currently performing some task or loading data. It is commonly used in situations where data is being fetched from a remote server or some processing is taking place in the background.

Here's an example of how to use the CircularProgressIndicator widget:

@override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'CircularProgressIndicator Example',
        home: Scaffold(
          appBar: AppBar(
            title: Text(‘CircularProgressIndicator Demo’),
          ),
          body: Center(
            child: CircularProgressIndicator(),
          ),
        ));
  }

In the above code,

We have imported the necessary package and created a simple Flutter app with an AppBar and a CircularProgressIndicator in the body of the Scaffold widget.

Various properties to customize its appearance, such as:

backgroundColor: Sets the background color of the progress indicator.

valueColor: Sets the color of the progress indicator.

strokeWidth: Sets the width of the progress indicator's stroke.

value: Sets the current progress value of the indicator, between 0.0 and 1.0.

Here's an example of using some of these properties:

CircularProgressIndicator(
  backgroundColor: Colors.grey,
  valueColor: AlwaysStoppedAnimation(Colors.blue),
  strokeWidth: 5,
  value: 0.5,
)