carousel_steps 0.1.4

A customizable and animated step progress indicator widget for Flutter. Ideal for onboarding, stories, or other multi-step processes.

example/lib/main.dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: OnboardingScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  @override
  State<OnboardingScreen> createState() => _OnboardingScreenState();
}

class _OnboardingScreenState extends State<OnboardingScreen> {
  final PageController _pageController = PageController();
  int _nextPage = 0;
  bool _isRunning = true;
  bool _isPaused = false;
  final int _pages = 3;

  void _onCompleteStep() {
    setState(() {
      _nextPage += 1;
    });

    if (_nextPage < _pages) {
      _pageController.animateToPage(
        _nextPage,
        duration: const Duration(milliseconds: 400),
        curve: Curves.easeInOut,
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Step Indicator Demo')),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: CarouselSteps(
              Colors.grey.shade300,
              Colors.blue,
              steps: _pages,
              currentStep: _nextPage % _pages,
              isRunning: _isRunning,
              isPause: _isPaused,
              onCompleteStep: _onCompleteStep,
            ),
          ),
          Expanded(
            child: PageView.builder(
              controller: _pageController,
              itemCount: _pages,
              onPageChanged: (index) {
                setState(() {
                  _nextPage = index;
                });
              },
              itemBuilder: (context, index) {
                return Center(
                  child: Text(
                    'Page ${index + 1}',
                    style: const TextStyle(fontSize: 24),
                  ),
                );
              },
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _isPaused = !_isPaused;
                  });
                },
                child: Text(_isPaused ? 'Resume' : 'Pause'),
              ),
              const SizedBox(width: 16),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _isRunning = !_isRunning;
                  });
                },
                child: Text(_isRunning ? 'Stop' : 'Start'),
              ),
            ],
          ),
          const SizedBox(height: 16),
        ],
      ),
    );
  }
}