progress_bar_steppers 0.0.2+2

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

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:progress_bar_steppers/steppers.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Steppers Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: StepBarPage(),
    );
  }
}

class StepBarPage extends StatefulWidget {
  StepBarPage({Key? key}) : super(key: key);

  @override
  State<StepBarPage> createState() => _StepBarPageState();
}

class _StepBarPageState extends State<StepBarPage> {
  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 Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            const SizedBox(
              height: 16,
            ),
            Text(
              'Horizontal Steppers',
              style:
                  StepperStyles.t16SB.copyWith(color: StepperColors.grey500s),
            ),
            const SizedBox(
              height: 16,
            ),
            Steppers(
              direction: StepperDirection.horizontal,
              labels: stepsData,
              currentStep: currentStep,
              stepBarStyle: StepperStyle(
                // activeColor: StepperColors.red500,
                maxLineLabel: 2,
                // inactiveColor: StepperColors.grey400
              ),
            ),
            const SizedBox(
              height: 40,
            ),
            Text(
              'Vertical Steppers',
              style:
                  StepperStyles.t16SB.copyWith(color: StepperColors.grey500s),
            ),
            const SizedBox(
              height: 16,
            ),
            Steppers(
              direction: StepperDirection.vertical,
              labels: stepsData,
              currentStep: currentStep,
              stepBarStyle: StepperStyle(
                //   activeColor: DSColors.red500,
                maxLineLabel: 2,
                //   inactiveColor: DSColors.grey400
              ),
            ),
            const SizedBox(
              height: 16,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  child: const Text('Next'),
                  onPressed: () {
                    setState(() {
                      _nextStep();
                    });
                  },
                ),
                ElevatedButton(
                  child: const Text('Fix Error'),
                  onPressed: () {
                    setState(() {
                      _fixError();
                    });
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  _nextStep() {
    _doWork();
    if (currentStep > totalSteps) return;
    // check if current step has no error, then move to the next step
    if (stepsData[currentStep - 1].state != StepperState.error) {
      currentStep++;
    }
  }

  _doWork() {
    if (currentStep == 3) {
      // fake error happens at step 3 when do work
      stepsData[2].state = StepperState.error;
    }
  }

  _fixError() {
    // fix error at the step 3 to continue to step 4
    if (stepsData[2].state == StepperState.error) {
      stepsData[2].state = StepperState.normal;
      currentStep++;
    }
  }
}