progress_bar_steppers

Description:

progress bar steppers

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
copied to clipboard
Import the package
import 'package:progress_bar_steppers/steppers.dart';
copied to clipboard
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
),
);
}
copied to clipboard
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
),
);
}
copied to clipboard
License #
MIT License, see the LICENSE.md file for details.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter