interactive_stepper 1.0.1

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

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 [e-mail].