goal_progress_indicator 1.0.0

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

Goal Progress Indicator

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

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

---