Goal Progress Indicator

A highly customizable goal progress indicator widget for Flutter. Perfect for tracking weight loss, savings goals, fitness targets, and more.

Demo

Features

✅ Animated progress bar with smooth transitions
✅ Customizable colors, dimensions, and typography
✅ Predefined themes (green, blue, purple, orange, gradient)
✅ Support for both increasing and decreasing goals
✅ Milestone circles with covered/uncovered states
✅ Dashed connecting lines
✅ Floating percentage pill
✅ Custom pill content with builder
✅ Theme inheritance with GoalProgressIndicatorTheme
✅ Accessibility support with semantic labels

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  goal_progress_indicator: ^1.0.0

Usage

Basic Usage

import 'package:goal_progress_indicator/goal_progress_indicator.dart';

GoalProgressIndicator(
  startValue: 85.0,
  currentValue: 78.5,
  targetValue: 70.0,
  unit: 'kg',
)

With Predefined Themes

GoalProgressIndicator(
  startValue: 85.0,
  currentValue: 78.5,
  targetValue: 70.0,
  unit: 'kg',
  style: GoalProgressIndicatorStyles.green,
)

Gradient Style

GoalProgressIndicator(
  startValue: 0,
  currentValue: 5000,
  targetValue: 10000,
  unit: '\$',
  startLabel: 'Saved',
  targetLabel: 'Goal',
  style: GoalProgressIndicatorStyles.gradient(
    colors: [Colors.blue, Colors.purple],
  ),
)

Custom Pill Content

GoalProgressIndicator(
  startValue: 0,
  currentValue: 75,
  targetValue: 100,
  pillBuilder: (percent, data) => Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.check_circle, size: 14, color: Colors.green),
      SizedBox(width: 4),
      Text('$percent%'),
    ],
  ),
)

Theming Multiple Indicators

GoalProgressIndicatorTheme(
  style: GoalProgressIndicatorStyles.purple,
  child: Column(
    children: [
      GoalProgressIndicator(...),
      GoalProgressIndicator(...),
      GoalProgressIndicator(...),
    ],
  ),
)

Full Customization

GoalProgressIndicator(
  startValue: 85.0,
  currentValue: 78.5,
  targetValue: 70.0,
  unit: 'kg',
  startLabel: 'Start',
  targetLabel: 'Goal',
  animate: true,
  showPill: true,
  showLabels: true,
  showDashedLines: true,
  showMilestoneCircles: true,
  decimalPlaces: 1,
  onProgressChanged: (progress) => print('Progress: $progress'),
  onAnimationComplete: () => print('Animation complete!'),
  style: GoalProgressIndicatorStyle(
    barHeight: 14.0,
    circleSize: 10.0,
    progressColor: Colors.teal,
    trackColor: Colors.grey.shade200,
    pillTextColor: Colors.teal,
    animationDuration: Duration(milliseconds: 800),
    animationCurve: Curves.easeOutBack,
  ),
)

Available Properties

Property	Type	Default	Description
`startValue`	`double`	required	The starting value
`currentValue`	`double`	required	The current value
`targetValue`	`double`	required	The target value
`unit`	`String`	`''`	Unit of measurement
`startLabel`	`String`	`'Start'`	Label for start value
`targetLabel`	`String`	`'Target'`	Label for target value
`style`	`GoalProgressIndicatorStyle?`	`null`	Custom style
`animate`	`bool`	`true`	Enable animations
`showPill`	`bool`	`true`	Show percentage pill
`showLabels`	`bool`	`true`	Show labels
`showDashedLines`	`bool`	`true`	Show dashed lines
`showMilestoneCircles`	`bool`	`true`	Show milestone circles
`decimalPlaces`	`int`	`1`	Decimal places for values

Predefined Styles

The package comes with several built-in styles for quick customization:

GoalProgressIndicatorStyles.standard — Default black style
GoalProgressIndicatorStyles.minimal — Compact size
GoalProgressIndicatorStyles.large — Larger size
GoalProgressIndicatorStyles.green — Green theme
GoalProgressIndicatorStyles.blue — Blue theme
GoalProgressIndicatorStyles.purple — Purple theme
GoalProgressIndicatorStyles.orange — Orange theme
GoalProgressIndicatorStyles.gradient(colors: [...]) — Gradient theme