The CircularProgressIndicator widget in Flutter is a circular progress indicator commonly used to indicate that a process is ongoing or to represent the progress of a task.
Attributes:
value (double):
- The current progress value of the indicator. If null, the indicator will spin indefinitely. If a value between 0.0 and 1.0 is provided, the indicator will display progress accordingly.
backgroundColor (Color):
- The background color of the indicator.
valueColor (Animation<Color>):
- The color of the indicator's value. It can be animated, allowing for smooth transitions between colors.
Example:
import 'package:flutter/material.dart';
class CircularProgressIndicatorExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('CircularProgressIndicator Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Processing...'),
SizedBox(height: 16),
CircularProgressIndicator(), // Default CircularProgressIndicator
SizedBox(height: 16),
CircularProgressIndicator(
value: 0.7, // Show progress at 70%
backgroundColor: Colors.grey,
valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
),
],
),
),
);
}
}
void main() {
runApp(
MaterialApp(
home: CircularProgressIndicatorExample(),
),
);
}
In this example, there are two CircularProgressIndicator widgets. The first one is the default indicator that spins indefinitely, indicating ongoing progress. The second one is customized with a progress value of 70%, a grey background, and a blue value color. This illustrates how you can adjust the appearance of the CircularProgressIndicator to match your app's design and provide feedback about ongoing processes.
ย