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.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:goal_progress_indicator/goal_progress_indicator.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Goal Progress Indicator Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const DemoPage(),
    );
  }
}

class DemoPage extends StatefulWidget {
  const DemoPage({super.key});

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  double _currentWeight = 78.5;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Goal Progress Indicator'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildSection(
              'Weight Loss Tracker (Default)',
              GoalProgressIndicator(
                startValue: 85.0,
                currentValue: _currentWeight,
                targetValue: 70.0,
                unit: 'kg',
              ),
            ),
            _buildSection(
              'Green Theme',
              const GoalProgressIndicator(
                startValue: 85.0,
                currentValue: 78.5,
                targetValue: 70.0,
                unit: 'kg',
                style: GoalProgressIndicatorStyles.green,
              ),
            ),
            _buildSection(
              'Gradient Style',
              GoalProgressIndicator(
                startValue: 0,
                currentValue: 6500,
                targetValue: 10000,
                unit: '\$',
                startLabel: 'Saved',
                targetLabel: 'Goal',
                decimalPlaces: 0,
                style: GoalProgressIndicatorStyles.gradient(
                  colors: [Colors.blue, Colors.purple],
                ),
              ),
            ),
            _buildSection(
              'Custom Pill Content',
              GoalProgressIndicator(
                startValue: 0,
                currentValue: 75,
                targetValue: 100,
                unit: 'tasks',
                startLabel: 'Done',
                targetLabel: 'Total',
                decimalPlaces: 0,
                pillBuilder: (percent, data) => Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    const Icon(Icons.check_circle,
                        size: 14, color: Colors.green),
                    const SizedBox(width: 4),
                    Text(
                      '$percent%',
                      style: const TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.green,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            _buildSection(
              'Minimal Style',
              GoalProgressIndicator(
                startValue: 200,
                currentValue: 150,
                targetValue: 100,
                unit: 'lbs',
                style: GoalProgressIndicatorStyles.minimal.copyWith(
                  progressColor: Colors.orange,
                  pillTextColor: Colors.orange,
                ),
              ),
            ),
            _buildSection(
              'Large Style',
              GoalProgressIndicator(
                startValue: 0,
                currentValue: 8,
                targetValue: 10,
                unit: 'km',
                startLabel: 'Run',
                targetLabel: 'Goal',
                decimalPlaces: 0,
                style: GoalProgressIndicatorStyles.large.copyWith(
                  progressColor: Colors.red,
                  pillTextColor: Colors.red,
                ),
              ),
            ),
            _buildSection(
              'No Labels',
              const GoalProgressIndicator(
                startValue: 0,
                currentValue: 45,
                targetValue: 100,
                showLabels: false,
                style: GoalProgressIndicatorStyles.blue,
              ),
            ),
            _buildSection(
              'Themed (Purple)',
              const GoalProgressIndicatorTheme(
                style: GoalProgressIndicatorStyles.purple,
                child: Column(
                  children: [
                    GoalProgressIndicator(
                      startValue: 0,
                      currentValue: 30,
                      targetValue: 100,
                      unit: '%',
                      showLabels: false,
                    ),
                    SizedBox(height: 40),
                    GoalProgressIndicator(
                      startValue: 0,
                      currentValue: 60,
                      targetValue: 100,
                      unit: '%',
                      showLabels: false,
                    ),
                    SizedBox(height: 40),
                    GoalProgressIndicator(
                      startValue: 0,
                      currentValue: 90,
                      targetValue: 100,
                      unit: '%',
                      showLabels: false,
                    ),
                  ],
                ),
              ),
            ),
            const SizedBox(height: 40),
            _buildInteractiveDemo(),
            const SizedBox(height: 40),
          ],
        ),
      ),
    );
  }

  Widget _buildSection(String title, Widget child) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 40),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: const TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 16),
          child,
        ],
      ),
    );
  }

  Widget _buildInteractiveDemo() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          'Interactive Demo',
          style: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 16),
        GoalProgressIndicator(
          startValue: 85.0,
          currentValue: _currentWeight,
          targetValue: 70.0,
          unit: 'kg',
          style: GoalProgressIndicatorStyles.green,
          onProgressChanged: (progress) {
            // Handle progress changes
          },
        ),
        const SizedBox(height: 24),
        Row(
          children: [
            const Text('Current: '),
            Expanded(
              child: Slider(
                value: _currentWeight,
                min: 70,
                max: 85,
                divisions: 30,
                label: _currentWeight.toStringAsFixed(1),
                onChanged: (value) {
                  setState(() {
                    _currentWeight = value;
                  });
                },
              ),
            ),
            Text('${_currentWeight.toStringAsFixed(1)} kg'),
          ],
        ),
      ],
    );
  }
}