carousel_steps

pub version

A customizable and animated step progress indicator for Flutter.
Useful for onboarding flows, stories, or any linear multi-step progress UI.

✨ Features

  • Horizontal step progress bar
  • Animated progress per step
  • Auto-progress with timer
  • Pause/resume functionality
  • Customizable colors

🚀 Installation

Add the following to your pubspec.yaml:

dependencies:
  carousel_steps: ^0.1.0

Then run: flutter pub get

import and use the widget:


import 'package:carousel_steps/carousel_steps.dart';

CarouselSteps(
    Colors.grey,               // Background color
    Colors.blue,               // Progress color
    steps: 5,                  // Total number of steps
    currentStep: 2,            // Current active step (0-based)
    onCompleteStep: () {
      print('Step complete');
    },
    isRunning: true,           // Whether the progress animation is running
    isPause: false,            // Whether the progress is paused
);

Example UI

carousel demo

Each step is displayed as a thin progress bar arranged horizontally:

- Completed steps are full

- Current step animates from 0 to 100%

- Upcoming steps remain empty

- This creates a "story-like" linear animation effect, useful in onboarding, surveys, etc.

License

MIT

Libraries