Linear Progress Bar #

A powerful and customizable linear progress bar widget for Flutter. Supports linear progress bars, dots indicators, titled progress bars with labels, gradient colors, and smooth animations.

Features #

• ✅ Linear Progress Bar - Traditional horizontal progress indicator
• ✅ Dots Progress Indicator - Step-based dots indicator
• ✅ Titled Progress Bar - Progress bar with customizable labels
• ✅ Gradient Support - Apply beautiful gradients to progress bars
• ✅ Smooth Animations - Animated progress transitions with customizable curves
• ✅ Multiple Label Types - Text, percentage, step count, or custom widgets
• ✅ Flexible Label Positioning - Center, start, end, top, or bottom
• ✅ Interactive Dots - Tap handlers for dots indicator
• ✅ Customizable Appearance - Colors, sizes, shapes, borders, and more
• ✅ Horizontal/Vertical Dots - Choose dots orientation
• ✅ Accessibility Support - Semantic labels and values

Installation #

Add this to your pubspec.yaml:

dependencies:
  linear_progress_bar: ^2.0.0+2

Then run:

flutter pub get

Quick Start #

Import the package:

import 'package:linear_progress_bar/linear_progress_bar.dart';

Basic Linear Progress Bar #

LinearProgressBar(
  maxSteps: 6,
  progressType: ProgressType.linear,
  currentStep: 3,
  progressColor: Colors.blue,
  backgroundColor: Colors.grey,
  borderRadius: BorderRadius.circular(10),
  minHeight: 12,
)

Dots Progress Indicator #

LinearProgressBar(
  maxSteps: 5,
  progressType: ProgressType.dots,
  currentStep: 2,
  progressColor: Colors.blue,
  backgroundColor: Colors.grey,
  dotsActiveSize: 12,
  dotsInactiveSize: 8,
)

Titled Progress Bar with Percentage #

TitledProgressBar(
  maxSteps: 100,
  currentStep: 75,
  progressColor: Colors.green,
  backgroundColor: Colors.grey.shade300,
  labelType: LabelType.percentage,
  labelColor: Colors.white,
  labelFontWeight: FontWeight.bold,
  minHeight: 24,
  borderRadius: BorderRadius.circular(12),
)

Usage Examples #

Linear Progress Bar #

Basic Usage

LinearProgressBar(
  maxSteps: 10,
  progressType: ProgressType.linear,
  currentStep: 5,
  progressColor: Colors.blue,
  backgroundColor: Colors.grey.shade300,
)

With Border Radius

LinearProgressBar(
  maxSteps: 10,
  progressType: ProgressType.linear,
  currentStep: 5,
  progressColor: Colors.blue,
  backgroundColor: Colors.grey.shade300,
  borderRadius: BorderRadius.circular(8),
  minHeight: 16,
)

With Gradient

LinearProgressBar(
  maxSteps: 100,
  progressType: ProgressType.linear,
  currentStep: 65,
  progressGradient: LinearGradient(
    colors: [Colors.blue, Colors.purple, Colors.pink],
  ),
  backgroundColor: Colors.grey.shade300,
  borderRadius: BorderRadius.circular(10),
  minHeight: 16,
)

With Animation

LinearProgressBar(
  maxSteps: 100,
  progressType: ProgressType.linear,
  currentStep: currentStep,
  progressColor: Colors.blue,
  backgroundColor: Colors.grey.shade300,
  animateProgress: true,
  animationDuration: Duration(milliseconds: 500),
  animationCurve: Curves.easeInOut,
)

Dots Progress Indicator #

Horizontal Dots

LinearProgressBar(
  maxSteps: 5,
  progressType: ProgressType.dots,
  currentStep: 2,
  progressColor: Colors.blue,
  backgroundColor: Colors.grey,
  dotsActiveSize: 12,
  dotsInactiveSize: 8,
  dotsSpacing: EdgeInsets.symmetric(horizontal: 8),
)

Vertical Dots

LinearProgressBar(
  maxSteps: 5,
  progressType: ProgressType.dots,
  currentStep: 2,
  progressColor: Colors.purple,
  backgroundColor: Colors.grey,
  dotsAxis: Axis.vertical,
  dotsActiveSize: 12,
  dotsInactiveSize: 8,
)

Interactive Dots

LinearProgressBar(
  maxSteps: 5,
  progressType: ProgressType.dots,
  currentStep: currentStep,
  progressColor: Colors.teal,
  backgroundColor: Colors.grey,
  onDotTap: (position) {
    setState(() {
      currentStep = position.toInt();
    });
  },
)

Titled Progress Bar #

Text Label

TitledProgressBar(
  maxSteps: 100,
  currentStep: 50,
  progressColor: Colors.blue,
  backgroundColor: Colors.grey.shade300,
  label: "Loading...",
  labelColor: Colors.white,
  minHeight: 24,
  borderRadius: BorderRadius.circular(12),
)

Percentage Label

TitledProgressBar(
  maxSteps: 100,
  currentStep: 75,
  progressColor: Colors.green,
  backgroundColor: Colors.grey.shade300,
  labelType: LabelType.percentage,
  labelColor: Colors.white,
  labelFontWeight: FontWeight.bold,
  minHeight: 28,
  borderRadius: BorderRadius.circular(14),
)

Step Count Label

TitledProgressBar(
  maxSteps: 10,
  currentStep: 7,
  progressColor: Colors.purple,
  backgroundColor: Colors.grey.shade300,
  labelType: LabelType.stepCount,
  labelColor: Colors.white,
  minHeight: 24,
  borderRadius: BorderRadius.circular(12),
)

Label at Top

TitledProgressBar(
  maxSteps: 100,
  currentStep: 65,
  progressColor: Colors.orange,
  backgroundColor: Colors.grey.shade300,
  labelType: LabelType.percentage,
  labelPosition: LabelPosition.top,
  labelColor: Colors.black87,
  minHeight: 12,
  borderRadius: BorderRadius.circular(6),
)

With Gradient and Animation

TitledProgressBar(
  maxSteps: 100,
  currentStep: currentStep,
  progressGradient: LinearGradient(
    colors: [Colors.pink, Colors.purple, Colors.blue],
  ),
  backgroundColor: Colors.grey.shade300,
  labelType: LabelType.percentage,
  labelColor: Colors.white,
  labelFontWeight: FontWeight.bold,
  minHeight: 28,
  borderRadius: BorderRadius.circular(14),
  animateProgress: true,
  animationDuration: Duration(milliseconds: 400),
)

API Reference #

LinearProgressBar #

TitledProgressBar #

Enums #

ProgressType

• ProgressType.linear - Traditional linear progress bar
• ProgressType.dots - Dots/step indicator

LabelType

• LabelType.text - Custom text label
• LabelType.percentage - Shows percentage (e.g., "75%")
• LabelType.stepCount - Shows step count (e.g., "7/10")
• LabelType.custom - Use customLabel widget

LabelPosition

• LabelPosition.center - Label centered in progress bar
• LabelPosition.start - Label at the start (left for LTR)
• LabelPosition.end - Label at the end (right for LTR)
• LabelPosition.top - Label above the progress bar
• LabelPosition.bottom - Label below the progress bar

DotsDecorator #

For advanced dots customization:

DotsDecorator(
  color: Colors.grey,
  activeColor: Colors.blue,
  size: Size.square(10),
  activeSize: Size.square(15),
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
  activeShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
  spacing: EdgeInsets.all(4),
)

Migration from v1.x #

If you're upgrading from version 1.x:

Breaking Changes #

1. ProgressType Enum: Replace integer constants with enum values:

// Old (deprecated)
progressType: LinearProgressBar.progressTypeLinear

// New
progressType: ProgressType.linear

2. TitledProgressBar: Now uses const constructor and has additional features.

New Features in v2.0 #

• animateProgress - Enable smooth progress animations
• progressGradient - Apply gradients to progress bars
• LabelType.percentage and LabelType.stepCount for TitledProgressBar
• LabelPosition for flexible label placement
• onDotTap callback for interactive dots
• Improved null safety and assertions

Example Project #

Check out the example folder for a complete demo app showcasing all features.

cd example
flutter run

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

License #

This project is licensed under the MIT License - see the LICENSE file for details.

Author #

Created by @maravilhosinga

• Twitter: @maravilhosinga
• Facebook: fb.com/maravilhosinga
• Website: angopapo.com