circle_stepper 1.3.0%2B2

Published Aug 12, 2025

SDKflutter

Platformandroidioswindowslinuxmacosweb

Best circle stepper for flutter

CircleStepper A customizable, animated circular stepper widget for Flutter, designed to visualize progress across multiple steps. With customizable colors, titles, descriptions, and progress directions, CircleStepper adds a visually appealing and interactive element to your Flutter applications.

Web

Android

Ios

Features

Animated Circular Progress: Smooth animations between steps, indicating progress visually.
Customizable Appearance: Easily configure colors, titles, descriptions, and fonts for each step.
Direction Control: Choose between clockwise or counter-clockwise progress directions.
Multiple Steps: Define the number of steps and track progress dynamically.
Responsiveness: Designed to adapt to different screen sizes.

Getting started

Installation Add circle_stepper to your project's pubspec.yaml dependencies:

dependencies:
  circle_stepper: ^1.3.0+2

Then, run:

flutter pub get

Usage

Include short and useful examples for package users. Add longer examples to /example folder.

Here is a simple example of how to use the CircleStepper widget:

    CircleStepper(
        fillDirection: FillDirection.clockwise,
        step: step,
        totalSteps: totalSteps,
        betweenStepText: 'of',
        stepTitles: const {
          1: 'Step 1',
          2: 'Step 2',
          3: 'Step 3',
          4: 'Step 4',
        },
        stepDescriptions: const {
          1: 'Description 1',
          2: 'Description 2',
          3: 'Description 3',
          4: 'Description 4',
        },
        progressColor: Colors.greenAccent,
        backgroundColor: Colors.grey.withAlpha(50),
        fontFamily: 'Poppins',
    ),

Parameters:

Parameter	Type	Description
`width`	`double?`	Width of the circular stepper. If null, defaults to a calculated height value.
`height`	`double?`	Height of the circular stepper. If null, defaults to a calculated width value.
`step`	`int`	The current step to display, must be between 1 and `totalSteps`.
`totalSteps`	`int`	Total number of steps to be shown in the stepper.
`betweenStepText`	`String`	Text to display between the current step and the total steps.
`stepTitles`	`Map<int, String>`	A map of step titles corresponding to each step number.
`stepDescriptions`	`Map<int, String>`	A map of step descriptions corresponding to each step number.
`progressColor`	`Color`	Color for the progress fill in the circular stepper.
`backgroundColor`	`Color`	Background color for the circular progress bar.
`textStyleStepper`	`TextStyle?`	Custom text style for the stepper text (e.g., "1 of 4").
`textStyleTitle`	`TextStyle?`	Custom text style for the step titles.
`textStyleDescriptions`	`TextStyle?`	Custom text style for the step descriptions.
`colorTextStepper`	`Color`	Color of the stepper text. Defaults to `Colors.black`.
`colorTitle`	`Color`	Color of the step titles. Defaults to `Colors.black`.
`colorDescriptions`	`Color`	Color of the step descriptions. Defaults to `Colors.grey`.
`fillDirection`	`FillDirection`	Direction in which the circular progress fills (clockwise or counterclockwise).
`strokeWidth`	`double?`	Width of the progress circle stroke. Default is 6.
`fontFamily`	`String?`	set font default 'Poppins'.

Advanced Usage

CircleStepper(
  step: 3,
  totalSteps: 5,
  betweenStepText: 'of',
  stepTitles: const {
    1: 'Intro',
    2: 'Basics',
    3: 'Intermediate',
    4: 'Advanced',
    5: 'Complete',
  },
  stepDescriptions: const {
    1: 'Introduction to the topic.',
    2: 'Learning the basic concepts.',
    3: 'Understanding intermediate topics.',
    4: 'Mastering advanced techniques.',
    5: 'Completion of the course.',
  },
  progressColor: Colors.greenAccent,
  backgroundColor: Colors.grey.withAlpha(50),
  colorTextStepper: Colors.blue,         // Custom text color
  colorTitle: Colors.black,              // Custom title color
  colorDescriptions: Colors.deepPurple,  // Custom description color
  textStyleStepper: const TextStyle(     // Custom text style for stepper text
    fontSize: 16,
    fontWeight: FontWeight.bold,
    fontFamily: 'Poppins',
  ),
  textStyleTitle: const TextStyle(       // Custom text style for title
    fontSize: 20,
    fontWeight: FontWeight.w600,
    fontFamily: 'Poppins',
  ),
  textStyleDescriptions: const TextStyle(// Custom text style for description
    fontSize: 16,
    fontStyle: FontStyle.italic,
    fontFamily: 'Poppins',
  ),
)

Additional information

For issues, feedback, or contributions, check out our GitHub repository.
You can submit issues or feature requests via the issue tracker.
Contributions are welcome! Fork the repository and create a pull request.