CircularProgressIndicator widget and Attributes

CircularProgressIndicator widget and Attributes

ยท

1 min read

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:

  1. 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.
  2. backgroundColor (Color):

    • The background color of the indicator.
  3. 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.

ย