Smart Stepper

A lightweight and customizable stepper widget for Flutter.
Easily build step indicators for multi-step processes like onboarding, forms, or checkout flows with full styling control.

📖 Table of Contents

Features
Installation
Usage
Properties
Examples
Preview
Notes
License

✨ Features

✅ Customizable colors for steps and connecting lines (completed, current, inactive)
✅ Adjustable step size, line thickness, and border radius
✅ Supports tap-to-jump step navigation
✅ Works seamlessly with your state management (setState, Bloc, Provider, etc.)
✅ Lightweight and easy to integrate

📦 Installation

Add the dependency in your pubspec.yaml:

dependencies:
  smart_stepper: ^0.0.7

Install it by running:

flutter pub get

🚀 Usage

Here’s a simple example:

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

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

  @override
  State<SmartStepperExample> createState() => _SmartStepperExampleState();
}

class _SmartStepperExampleState extends State<SmartStepperExample> {
  int currentStep = 2;
  int totalSteps = 4;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Smart Stepper Demo")),
      body: Center(
        child: SmartStepper(
          currentStep: currentStep,
          totalSteps: totalSteps,
          completeLineColor: Colors.green,
          currentLineColor: Colors.orange,
          inactiveLineColor: Colors.grey,
          stepWidth: 48,
          stepHeight: 48,
          onStepperTap: (index) {
            setState(() => currentStep = index);
          },
        ),
      ),
    );
  }
}

⚙️ Properties

Property	Type	Description
`currentStep`	`int`	The active step index (starting from 1).
`totalSteps`	`int`	Total number of steps.
`completeLineColor`	`Color`	Color of completed step lines.
`currentLineColor`	`Color`	Color of the current active line.
`inactiveLineColor`	`Color`	Color of upcoming (inactive) lines.
`lineHeight`	`double`	Height (thickness) of the line.
`lineWidth`	`double`	Width of each line segment.
`lineBorderRadius`	`double`	Corner radius of the line.
`linePadding`	`EdgeInsets`	Padding around the line.
`stepWidth`	`double`	Width of each step indicator.
`stepHeight`	`double`	Height of each step indicator.
`completeStepColor`	`Color`	Color of completed steps.
`currentStepColor`	`Color`	Color of the current active step.
`inactiveStepColor`	`Color`	Color of inactive steps.
`onStepperTap`	`Function(int)`	Callback when a step is tapped (returns tapped index).

🔥 Examples

Example – Line-Based Stepper

SmartStepper(
  currentStep: 2,
  totalSteps: 5,
  completeLineColor: Colors.blue,
  currentLineColor: Colors.red,
  inactiveLineColor: Colors.grey,
  lineHeight: 8,
  lineWidth: 50,
  lineBorderRadius: 10,
  onStepperTap: (index) {
    print("Tapped step: $index");
  },
)

Example – Block-Based Stepper

SmartStepper(
  currentStep: 1,
  totalSteps: 4,
  stepWidth: 40,
  stepHeight: 40,
  completeStepColor: Colors.green,
  currentStepColor: Colors.orange,
  inactiveStepColor: Colors.grey,
  onStepperTap: (index) {
    print("Tapped step: $index");
  },
)

Preview

📝 Notes

The widget is UI-only — it does not handle form validation or navigation logic.
You should manage step state manually using your preferred state management.