A versatile and easy-to-use Flutter package for implementing progress tracking and status visualization in your applications.

Pub Version CI popularity GitHub stars style: effective dart GitHub license GitHub last commit

Features

Progress Tracking Widgets: Easy-to-use widgets for visualizing and tracking progress within your Flutter application.

User-Friendly Components: User-friendly components for indicating status, completion, or progression in various scenarios.

Open Source and Community-Driven: Open source nature that encourages community contributions, fostering collaboration and improvement over time.

Showcase

How to get started? 🤔

1. Add the latest version of package to your pucspec.yaml:

dependencies:
  progress_tracker:

2. Install packages from the comman line:

$ flutter pub get

3. Import the package and use it in your Flutter App.

import 'package:progress_tracker/progress_tracker.dart';

How to use? 🤔

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

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

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

  @override
  State<ExampleProgressTracker> createState() => _MyAppState();
}

class _MyAppState extends State<ExampleProgressTracker> {
  // List of Status objects representing the steps or statuses in the progress tracker.
  // Each Status object includes a name, icon, and an optional 'active' parameter to indicate its current status.
  // The 'name' field represents the label or title of the status.
  // The 'icon' field is the IconData representing the visual representation of the status.
  // The 'active' field, when set to true, indicates that the status is currently active or completed.

  final List<Status> statuList = [
    Status(name: 'SHIPPED', icon: Icons.shopping_bag),
    Status(name: 'Out for Delivery', icon: Icons.local_shipping),
    Status(name: 'Delivered', icon: Icons.check_circle),
  ];

  // The index representing the currently active step in the progress tracker.
  // It determines which step is currently highlighted or marked as completed.

  int index = 0;

  void nextButton() {
    setState(() {
      index++;
      statuList[index].active = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Example Progress Tracker'),
        ),
        body: Column(
          children: [
            ProgressTracker(
              trackerAtStart: false,
              currentIndex: index,
              statusList: statuList,
              activeColor: Colors.green,
              inActiveColor: Colors.grey,
              horizontalPadding: 16,
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: index != statuList.length - 1 ? nextButton : null,
              child: const Text('NEXT'),
            ),
          ],
        ),
      ),
    );
  }
}

Feedback

  • Please raise an issue here.

Contact me 📨

Libraries

progress_tracker