interactive_stepper 1.0.0+1

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

example/lib/main.dart

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Interactive Stepper Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const StepperDemoPage(),
    );
  }
}

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

  @override
  State<StepperDemoPage> createState() => _StepperDemoPageState();
}

class _StepperDemoPageState extends State<StepperDemoPage> {
  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.',
    ),
    StepperStep(
      number: '3',
      title: 'Implement Widget',
      shortDescription: 'Add stepper to your app',
      detailedTitle: 'Widget Integration',
      detailedDescription:
          'Import and use the InteractiveStepper widget in your application.',
      detailedSteps: [
        'Import the package',
        'Create StepperStep objects',
        'Add InteractiveStepper to widget tree',
      ],
      conclusion: 'Your interactive stepper is now live!',
    ),
    StepperStep(
      number: '4',
      title: 'Customize Theme',
      shortDescription: 'Style your stepper',
      detailedTitle: 'Theme Customization',
      detailedDescription:
          'Customize the appearance of your stepper with themes and colors.',
      detailedSteps: [
        'Create StepperTheme instance',
        'Set custom colors and fonts',
        'Apply theme to stepper',
      ],
      conclusion: 'Your stepper now has a unique look!',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Interactive Stepper Demo'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            // Layout Comparison
            Card(
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'Layout Comparison:',
                      style: Theme.of(context).textTheme.titleLarge,
                    ),
                    const SizedBox(height: 12),
                    ElevatedButton.icon(
                      onPressed: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) =>
                                const LayoutComparisonExample(),
                          ),
                        );
                      },
                      icon: const Icon(Icons.compare_arrows),
                      label: const Text('Compare Layouts'),
                    ),
                  ],
                ),
              ),
            ),

            const SizedBox(height: 24),

            // Data and Layout Configuration
            Card(
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'Data and Layout Configuration:',
                      style: Theme.of(context).textTheme.titleLarge,
                    ),
                    const SizedBox(height: 16),
                    InteractiveStepper(
                      steps: steps,
                      title: 'Flutter Development Guide',
                      currentStep: currentStep,
                      onStepTap: (index) {
                        setState(() {
                          currentStep = index;
                        });
                      },
                    ),
                    const SizedBox(height: 24),
                    InteractiveStepper(
                      steps: steps,
                      title: 'Horizontal Layout',
                      currentStep: currentStep,
                      isHorizontal: true,
                      onStepTap: (index) {
                        setState(() {
                          currentStep = index;
                        });
                      },
                    ),
                    const SizedBox(height: 16),
                    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'),
                        ),
                      ],
                    ),
                    const SizedBox(height: 8),
                    Text(
                      'Current Step: ${currentStep + 1} of ${steps.length}',
                      style: Theme.of(context).textTheme.bodyLarge,
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}