smart_stepper 0.0.7

A lightweight and customizable Flutter widget for building modern step indicators with full styling and interactive navigation support.

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.

---

📄 License

MIT License © 2025
Feel free to use in personal and commercial projects.