bg_vertical_stepper 1.0.2 copy "bg_vertical_stepper: ^1.0.2" to clipboard
bg_vertical_stepper: ^1.0.2 copied to clipboard

Vertical Stepper with Dotted Line in Flutter use to create vertical staper like amazon, flipkart product tracking.

Vertical Stepper with Dotted Line in Flutter 👍 #

bg_vertical_stepper is a useful widget to display a process from one step to another in a vertical manner. It is particularly useful for showing progress in multi-step processes, such as forms, checkouts, or onboarding flows.

Features #

  • Customizable stepper with vertical orientation.
  • Dotted line connecting each step.
  • Easy to integrate and use in your Flutter projects.

ScreenShots #

Image 1
Image 2
Image 3

Installation #

To use this package, add bg_bg_vertical_stepper as a dependency in your project's pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  bg_vertical_stepper: ^1.0.0 # Use the latest version available

Then, run flutter pub get to install the package.

Usage #

Here's a basic example of how to use the bg_bg_vertical_stepper package in your Flutter project:

import 'package:flutter/material.dart';
import 'package:bg_vertical_stepper/src/step.dart' as step;

void main() => runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    ));

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //Create a list of stepper

    List<step.Step> stepper = [
      step.Step(
        shimmer: false,
        title: "first",
        iconStyle: Colors.green,
        content: Align(
          alignment: Alignment.centerLeft,
          child: Text("Content 1"),
        ),
      ),
      step.Step(
        shimmer: false,
        title: "second",
        iconStyle: Colors.green,
        content: Align(
          alignment: Alignment.centerLeft,
          child: Text("Content 2"),
        ),
      ),
      step.Step(
        shimmer: false,
        title: "third",
        iconStyle: Colors.green,
        content: Align(
          alignment: Alignment.centerLeft,
          child: Text("Content 3"),
        ),
      ),
      step.Step(
        shimmer: false,
        title: "fourth",
        iconStyle: Colors.green,
        content: Align(
          alignment: Alignment.centerLeft,
          child: Text("Content 4"),
        ),
      ),
      step.Step(
        shimmer: false,
        title: "fifth",
        iconStyle: Colors.red,
        content: Align(
          alignment: Alignment.centerLeft,
          child: Text("Content 5"),
        ),
      ),
      step.Step(
        shimmer: false,
        title: "Last",
        content: Align(
          alignment: Alignment.centerLeft,
          child: Text("Content 6"),
        ),
      )
    ];

    //Pass the list of steppers into VerticalStepper class

    return Scaffold(
        body: Padding(
      padding: const EdgeInsets.fromLTRB(10, 130, 10, 2),
      child: step.VerticalStepper(
        steps: stepper,
        dashLength: 2,
      ),
    ));
  }
}

Testing #

To run tests for the bg_vertical_stepper package, use the following command:

flutter test

Make sure to write comprehensive tests to cover all functionalities of the stepper.

Contributing #

Contributions are welcome! If you find any issues or have suggestions for improvements, please create an issue or submit a pull request.

License #

This project is licensed under the MIT License - see the LICENSE file for details.

2
likes
150
points
42
downloads

Publisher

unverified uploader

Weekly Downloads

Vertical Stepper with Dotted Line in Flutter use to create vertical staper like amazon, flipkart product tracking.

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on bg_vertical_stepper