Percent Indicator Package

Introduction of Percent Indicator

The Percent Indicator Package in Flutter provides a set of widgets to create visually appealing and customizable progress indicators, such as linear and circular progress bars. These indicators can show a percentage of completion or any other proportional value in a graphical format.

Key Features:

• Linear and Circular Progress Indicators: Easily create both types of progress indicators.
• Customizable Appearance: Adjust colors, sizes, and other visual aspects.
• Animation Support: Animate the progress change for a smooth user experience.

Installation: To use the percent indicator package, add it to your pubspec.yaml file:

dependencies:
  percent_indicator: ^4.2.2  # Use the latest version

Run flutter pub get to install the package.

Importing the Package:

import 'package:percent_indicator/percent_indicator.dart';

Properties:

CircularPercentIndicator

percent: Specifies the completion percentage (0.0 to 1.0).

CircularPercentIndicator(
  percent: 0.7,
  // Other properties...
)

radius: The radius of the circular progress indicator.

CircularPercentIndicator(
  radius: 60.0,
  // Other properties...
)

lineWidth: The width of the progress line.

CircularPercentIndicator(
  lineWidth: 5.0,
  // Other properties...
)

backgroundColor: The color of the background circle.

CircularPercentIndicator(
  backgroundColor: Colors.grey,
  // Other properties...
)

progressColor: The color of the progress line.

CircularPercentIndicator(
  progressColor: Colors.blue,
  // Other properties...
)

center: A widget to be placed at the center of the circular progress indicator.

CircularPercentIndicator(
  center: Text('70%'),
  // Other properties...
)

animation: Whether to animate the progress change.

CircularPercentIndicator(
  animation: true,
  animationDuration: 1000,
  // Other properties...
)

LinearPercentIndicator

percent: Specifies the completion percentage (0.0 to 1.0).

LinearPercentIndicator(
  percent: 0.7,
  // Other properties...
)

lineHeight: The height of the linear progress bar.

LinearPercentIndicator(
  lineHeight: 8.0,
  // Other properties...
)

backgroundColor: The color of the background bar.

LinearPercentIndicator(
  backgroundColor: Colors.grey,
  // Other properties...
)

progressColor: The color of the progress bar.

LinearPercentIndicator(
  progressColor: Colors.blue,
  // Other properties...
)

center: A widget to be placed at the center of the linear progress bar.

LinearPercentIndicator(
  center: Text('70%'),
  // Other properties...
)

animation: Whether to animate the progress change.

LinearPercentIndicator(
  animation: true,
  animationDuration: 1000,
  // Other properties...
)

Usage:

CircularPercentIndicator Example:

CircularPercentIndicator(
  radius: 60.0,
  lineWidth: 5.0,
  percent: 0.7,
  center: Text('70%'),
  backgroundColor: Colors.grey,
  progressColor: Colors.blue,
  animation: true,
  animationDuration: 1000,
)

LinearPercentIndicator Example:

LinearPercentIndicator(
  lineHeight: 8.0,
  percent: 0.7,
  center: Text('70%'),
  backgroundColor: Colors.grey,
  progressColor: Colors.blue,
  animation: true,
  animationDuration: 1000,
)

Final Code: This is the final code with the combination of some above Percent Indicator Package properties.

import 'package:flutter/material.dart';
import 'package:percent_indicator/circular_percent_indicator.dart';
import 'package:percent_indicator/linear_percent_indicator.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromARGB(126, 255, 224, 178),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircularPercentIndicator(
                animation: true,
                animationDuration: 1000,
                radius: 200,
                lineWidth: 30,
                percent: 0.4,
                progressColor: Colors.orange,
                backgroundColor: Colors.orange.shade100,
                circularStrokeCap: CircularStrokeCap.round,
                center: Text(
                  '40%',
                  style: TextStyle(fontSize: 80, fontWeight: FontWeight.w700),
                ),
              ),
              SizedBox(
                height: 50,
              ),
              LinearPercentIndicator(
                animation: true,
                animationDuration: 1000,
                lineHeight: 30,
                percent: 0.6,
                progressColor: Colors.orange,
                backgroundColor: Colors.orange.shade100,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

In these Percent Indicator  examples, CircularPercentIndicator and LinearPercentIndicator widgets are configured with various properties, such as percent, lineHeight, radius, lineWidth, backgroundColor, progressColor, center, and animation. These properties allow you to customize the appearance and behavior of the progress indicators to fit your application’s design and functionality requirements.

Thank for visiting Hybrid App Development
Posted by Hussam HM