Open source Flutter package, bar indicator made of a series of selected and unselected steps.
Made by Nguyen Phuong Nam (namnpse)
Check out the full source code here

Features

• Horizontal Steppers
• Vertical Steppers
• Customize Steppers style, indicator color, label max lines, and more ...

Getting started

Install the package.

dependencies:
  flutter:
    sdk: flutter
  progress_bar_steppers: ^0.0.2

Import the package

import 'package:progress_bar_steppers/steppers.dart';

Screenshots

Horizontal Steppers (Normal)

Horizontal Steppers (Error)

Vertical Steppers (Normal)

Usage

Horizontal Steppers

  var currentStep = 1;
  var totalSteps = 0;
  final stepsData = [
    StepperData(
      label: 'Step 1',
    ),
    StepperData(
      label: 'Step 2',
    ),
    StepperData(
      label: 'Step 3',
    ),
    StepperData(
      label: 'Step 4',
    ),
  ];

  @override
  void initState() {
    totalSteps = stepsData.length;
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Steppers(
            direction: StepperDirection.horizontal,
            labels: stepsData,
            currentStep: currentStep,
            stepBarStyle: StepperStyle(
                // activeColor: StepperColors.red500,
              maxLineLabel: 2,
                // inactiveColor: StepperColors.ink200s
            ),
          );
  }

Vertical Steppers

var currentStep = 1;
  var totalSteps = 0;
  late List<StepperData> stepsData;

  @override
  void initState() {
    super.initState();
    stepsData = [
      StepperData(
        label: 'Step 1',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur risus est, sed consequat libero luctus vitae. Duis ultrices magna quis risus porttitor luctus. Nulla vel tempus nisl, ultricies congue lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
        child: ElevatedButton(
          child: const Text('Button 1'),
          onPressed: () {},
        ),
      ),
      StepperData(
        label: 'Step 2',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur risus est, sed consequat libero luctus vitae. Duis ultrices magna quis risus porttitor luctus. Nulla vel tempus nisl, ultricies congue lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
      ),
      StepperData(
        label: 'Step 3',
      ),
      StepperData(
        label: 'Step 4',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur risus est, sed consequat libero luctus vitae. Duis ultrices magna quis risus porttitor luctus. Nulla vel tempus nisl, ultricies congue lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
      ),
    ];
    totalSteps = stepsData.length;
  }
  @override
  Widget build(BuildContext context) {
    return Steppers(
          direction: StepperDirection.vertical,
          labels: stepsData,
          currentStep: currentStep,
          stepBarStyle: StepperStyle(
            //   activeColor: DSColors.red500,
            maxLineLabel: 2,
            //   inactiveColor: DSColors.purple100
          ),
        );
  }

License

MIT License, see the LICENSE.md file for details. 1