interactive_stepper 1.0.0

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.0

Then run:

flutter pub get

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;
    });
  },
)

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

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 different use cases:

Vertical Stepper (Default)

The traditional vertical stepper layout with expandable steps.

Horizontal Stepper

A horizontal layout similar to modern web applications, perfect for desktop and tablet interfaces.

Compact Horizontal Stepper

A space-efficient horizontal stepper ideal for mobile applications.

Complete Example

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

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int currentStep = 0;

  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.',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Interactive Stepper Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            InteractiveStepper(
              steps: steps,
              title: 'Flutter Development Guide',
              currentStep: currentStep,
              onStepTap: (index) {
                setState(() {
                  currentStep = index;
                });
              },
            ),
            const SizedBox(height: 32),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  onPressed: currentStep > 0
                      ? () => setState(() => currentStep--)
                      : null,
                  child: const Text('Previous'),
                ),
                ElevatedButton(
                  onPressed: currentStep < steps.length - 1
                      ? () => setState(() => currentStep++)
                      : null,
                  child: const Text('Next'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

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

// Custom horizontal stepper implementation
// See example/lib/horizontal_stepper_example.dart for full implementation

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].