progress_bar_steppers 0.0.2+2 copy "progress_bar_steppers: ^0.0.2+2" to clipboard
progress_bar_steppers: ^0.0.2+2 copied to clipboard

Open source Flutter package, bar indicator made of a series of selected and unselected steps including Horizontal and Vertical Progress Steppers

GitHub: Namnpse

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

Horizontal Steppers (Error)

Horizontal Steppers Error

Vertical Steppers (Normal)

Vertical Steppers

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.

10
likes
150
pub points
79%
popularity

Publisher

unverified uploader

Open source Flutter package, bar indicator made of a series of selected and unselected steps including Horizontal and Vertical Progress Steppers

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on progress_bar_steppers