Interactive Stepper

A beautiful and customizable interactive stepper widget for Flutter applications with smooth animations and modern design.

Developed by ConviSaas Inc

Features

  • ✨ Beautiful Design: Modern, clean UI with smooth animations
  • 🎨 Customizable: Extensive theming options with light and dark themes
  • 📱 Interactive: Tap to navigate between steps
  • 🔄 Animated: Smooth transitions and micro-interactions
  • 📝 Rich Content: Support for detailed descriptions, sub-steps, and conclusions
  • 🎯 Accessible: Built with accessibility in mind

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  interactive_stepper: ^1.0.1

Then run:

flutter pub get

Running the Demo

To see the interactive stepper in action, you can run the included demo:

Option 1: Run from the package directory

cd example
flutter run

Option 2: Run with specific device

cd example
flutter run -d chrome  # For web
flutter run -d macos   # For macOS
flutter run -d windows # For Windows
flutter run -d linux   # For Linux

Option 3: Run with web server (for sharing)

cd example
flutter run -d web-server --web-port=3000

The demo includes:

  • Data and Layout Configuration: Shows how to structure step data
  • Layout Comparison: Toggle between vertical and horizontal layouts
  • Interactive Navigation: Navigate through steps with tap and buttons
  • Theme Examples: See different styling options

Quick Start

import 'package:interactive_stepper/interactive_stepper.dart';

// Create your steps
final List<StepperStep> steps = [
  StepperStep(
    number: '1',
    title: 'Setup Project',
    shortDescription: 'Initialize your Flutter project',
    detailedTitle: 'Project Initialization',
    detailedDescription: 'Start by creating a new Flutter project.',
    detailedSteps: ['Run flutter create my_app', 'Open in IDE'],
    conclusion: 'Your project is ready!',
  ),
  // Add more steps...
];

// Use the widget
InteractiveStepper(
  steps: steps,
  title: 'Development Guide',
  currentStep: 0,
  onStepTap: (index) {
    // Handle step tap
  },
)

Usage

Basic Usage

InteractiveStepper(
  steps: yourSteps,
  currentStep: currentIndex,
)

With Title

InteractiveStepper(
  steps: yourSteps,
  title: 'My Process',
  currentStep: currentIndex,
)

With Custom Theme

InteractiveStepper(
  steps: yourSteps,
  currentStep: currentIndex,
  theme: StepperTheme(
    primaryColor: Colors.blue,
    successColor: Colors.green,
    borderRadius: 20.0,
  ),
)

With Step Tap Callback

InteractiveStepper(
  steps: yourSteps,
  currentStep: currentIndex,
  onStepTap: (index) {
    setState(() {
      currentIndex = index;
    });
  },
)

With Horizontal Layout

InteractiveStepper(
  steps: yourSteps,
  currentStep: currentIndex,
  isHorizontal: true,
  onStepTap: (index) {
    setState(() {
      currentIndex = index;
    });
  },
)

API Reference

InteractiveStepper

The main widget that displays the interactive stepper.

Properties

Property Type Required Default Description
steps List<StepperStep> Yes - List of steps to display
currentStep int No 0 Currently active step index
title String? No null Optional title for the stepper
showTitle bool No true Whether to show the title
theme StepperTheme No StepperTheme() Theme configuration
onStepTap void Function(int)? No null Callback when a step is tapped
isHorizontal bool No false Whether to display in horizontal layout

StepperStep

Represents a single step in the stepper.

Properties

Property Type Required Default Description
number String Yes - Step number (can be custom text)
title String Yes - Main title of the step
shortDescription String Yes - Short description
detailedTitle String Yes - Detailed title for expanded view
detailedDescription String Yes - Detailed description
detailedSteps List<String>? No null List of sub-steps
conclusion String? No null Conclusion text

Methods

  • StepperStep.fromMap(Map<String, dynamic> map): Create from map
  • toMap(): Convert to map

StepperTheme

Configuration for the stepper's appearance.

Properties

Property Type Default Description
primaryColor Color Color(0xFF2563EB) Primary color for active steps
successColor Color Color(0xFF10B981) Color for completed steps
inactiveColor Color Color(0xFFF3F4F6) Color for inactive steps
textColor Color Color(0xFF1F2937) Text color
fontFamily String 'Inter' Font family
borderRadius double 25.0 Border radius for containers

Predefined Themes

  • StepperTheme.light: Light theme with default colors
  • StepperTheme.dark: Dark theme with appropriate colors

Examples

The package includes multiple examples demonstrating data and layout configuration:

Vertical Layout (Default)

Traditional vertical stepper with expandable steps and rich content display.

Horizontal Layout

Compact horizontal layout with progress bar, ideal for desktop and tablet interfaces.

Data Configuration

Examples showing how to structure step data with titles, descriptions, and detailed content.

Data Configuration Example

// Define your step data
final List<StepperStep> steps = [
  StepperStep(
    number: '1',
    title: 'Setup Project',
    shortDescription: 'Initialize your Flutter project',
    detailedTitle: 'Project Initialization',
    detailedDescription: 'Start by creating a new Flutter project and setting up the basic structure.',
    detailedSteps: [
      'Run flutter create my_app',
      'Navigate to project directory',
      'Open in your preferred IDE',
    ],
    conclusion: 'Your project is now ready for development!',
  ),
  StepperStep(
    number: '2',
    title: 'Add Dependencies',
    shortDescription: 'Include required packages',
    detailedTitle: 'Package Management',
    detailedDescription: 'Add the necessary dependencies to your pubspec.yaml file.',
    detailedSteps: [
      'Open pubspec.yaml',
      'Add interactive_stepper dependency',
      'Run flutter pub get',
    ],
    conclusion: 'Dependencies are now installed and ready to use.',
  ),
];

// Use with vertical layout (default)
InteractiveStepper(
  steps: steps,
  title: 'Flutter Development Guide',
  currentStep: currentStep,
  onStepTap: (index) => setState(() => currentStep = index),
)

// Use with horizontal layout
InteractiveStepper(
  steps: steps,
  title: 'Flutter Development Guide',
  currentStep: currentStep,
  isHorizontal: true,
  onStepTap: (index) => setState(() => currentStep = index),
)

Custom Theme Example

InteractiveStepper(
  steps: steps,
  currentStep: currentStep,
  theme: StepperTheme(
    primaryColor: Colors.purple,
    successColor: Colors.teal,
    inactiveColor: Colors.grey[200]!,
    textColor: Colors.black87,
    fontFamily: 'Roboto',
    borderRadius: 30.0,
  ),
)

Dark Theme Example

InteractiveStepper(
  steps: steps,
  currentStep: currentStep,
  theme: StepperTheme.dark,
)

Horizontal Stepper Example

InteractiveStepper(
  steps: steps,
  currentStep: currentStep,
  isHorizontal: true,
  onStepTap: (index) {
    setState(() {
      currentStep = index;
    });
  },
)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Copyright (c) 2024 ConviSaas Inc

Support

If you encounter any issues or have questions, please file an issue on the GitHub repository or contact us at info@convisaas.com.

Libraries

interactive_stepper