animated_progress 1.0.2

animated_progress: ^1.0.2 copied to clipboard

A beautifully animated progress library for Flutter — smooth linear & circular progress bars with gradients, spinning, value transitions, and programmatic control.

Features #

Installation #

dependencies:
  animated_progress: ^1.0.1

Then import:

import 'package:animated_progress/animated_progress.dart';

Usage #

Linear — Basic #

LinearProgress(
  value: 0.65,
  height: 12,
  valueColor: Colors.green.shade900,
  backgroundColor: Colors.green.shade100,
)

Linear — With secondary value #

LinearProgress(
  value: 0.5,
  secondaryValue: 0.75,
  valueColor: Colors.green.shade900,
  secondaryValueColor: Colors.green.shade300,
  backgroundColor: Colors.green.shade100,
  height: 12,
)

Linear — Right to left #

LinearProgress(
  value: 0.6,
  direction: LinearDirection.rightToLeft,
  valueColor: Colors.blue,
  backgroundColor: Colors.blue.shade100,
  height: 12,
)

Linear — Gradient #

LinearProgress(
  value: 0.8,
  height: 14,
  borderRadius: 8,
  valueGradient: const LinearGradient(
    colors: [Colors.purple, Colors.pink],
  ),
  backgroundGradient: const LinearGradient(
    colors: [Colors.purple.shade50, Colors.pink.shade50],
  ),
)

Linear — With box shadow #

LinearProgress(
  value: 0.5,
  height: 14,
  valueColor: Colors.orange,
  backgroundColor: Colors.orange.shade50,
  boxShadow: BoxShadow(
    color: Colors.orange.withValues(alpha: 0.3),
    blurRadius: 4,
    offset: Offset(0, 2),
  ),
)

Circular — Basic determinate #

CircularProgress(
  value: 0.65,
  size: 80,
  valueColor: Colors.indigo,
  trackColor: Colors.grey.shade200,
)

Circular — Indeterminate #

Set value to null:

CircularProgress(
  size: 80,
  valueColor: Colors.pink,
  trackColor: Colors.deepPurple.shade900,
)

Circular — With spinning #

CircularProgress(
  value: 0.4,
  size: 80,
  spinning: true,
  spinDuration: Duration(seconds: 3),
  valueColor: Colors.pink,
  trackColor: Colors.deepPurple.shade900,
)

Circular — Gradient arc #

CircularProgress(
  value: 0.7,
  size: 80,
  valueGradient: SweepGradient(
    colors: [Colors.indigo, Colors.cyan, Colors.indigo],
  ),
  trackColor: Colors.grey.shade200,
)

Circular — With background gradient #

CircularProgress(
  value: 0.5,
  size: 80,
  valueGradient: SweepGradient(
    colors: [Colors.green, Colors.lime, Colors.green],
  ),
  backgroundGradient: LinearGradient(
    colors: [Colors.lightGreen, Colors.white],
  ),
  backgroundShape: BoxShape.rectangle,
  backgroundBorderRadius: BorderRadius.circular(12),
  trackColor: Colors.grey.shade300,
)

Circular — With center child #

CircularProgress(
  value: 0.75,
  size: 120,
  strokeWidth: 8,
  trackWidth: 12,
  valueColor: Colors.indigo,
  trackColor: Colors.grey.shade200,
  child: Text('75%', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
)

With animation controller #

final _controller = ProgressController();

// Pass to either LinearProgress or CircularProgress:
CircularProgress(
  value: 0.5,
  size: 80,
  controller: _controller,
)

// Control anywhere:
_controller.pause();
_controller.resume();
_controller.togglePlay();

API Reference #

CircularProgress #

LinearProgress #

ProgressController #

1.0.1 includes only bug fixes — no breaking changes from 1.0.0.

Migration from 0.x #