Giter VIP home page Giter VIP logo

gsstepper's Introduction

GSStepper

GSStepper is a Flutter package that provides a custom stepper widget. It allows you to create a step-by-step process in your application, guiding users through multiple stages or tasks. The widget offers the flexibility to choose between scrolling or fixing the stepper based on your needs.

You can customize the stepper to fit your application's design by setting various properties such as colors, sizes, icons, and labels. Plus, you can easily track the user's progress by updating the status and progress values of each step.

Installation

To use this package, add gsstepper as a dependency in your pubspec.yaml file.

flutter pub add gsstepper
dependencies:
  gsstepper: ^0.0.4

Usage

Import the package into your Dart code:

import 'package:gsstepper/gsstepper.dart';

Create a GSStepper widget and pass a list of GSStep widgets to it:

stepper = GSStepper.scrollable(
                currentIndex: currentStep,
                style: StepperStyle(),
                steps: widget.stepperItemList,
                stepperData: GSStepperData(),
                stepWidth: 100,
                onComplete: () {
                  // on complete steps
                },
                onNextStep: (index) {
                  currentStep = index;
                  setState(() {});
                },
              ),
            )

Alt Text

Or you can use this way if you want fixed GSStepper:

stepper = GSStepper.fixed(
                currentIndex: currentStep,
                style: StepperStyle(),
                steps: widget.stepperItemList,
                stepperData: GSStepperData(),
                stepWidth: 100,
                onComplete: () {
                  // on complete steps
                },
                onNextStep: (index) {
                  currentStep = index;
                  setState(() {});
              },
            ),
          )

Alt Text

Customization

To create an instance of GSStepModel, you can pass the following parameters:

  • globalKey (required): This is a GlobalKey used to identify the step.
  • icon (optional): An Icon widget representing the icon for the step.
  • status (optional): An enum value of GSStepStatusEnum representing the status of the step. It has a default value of inActive.
  • progress (optional): An integer representing the progress of the step.
  • stepName (optional): A string representing the name or description of the step.
  • stepNumber (optional): A string representing the step number.

Here's an example of how to create an instance of GSStepModel:

List<GSStepModel> stepperItemList = [
  GSStepModel(
    globalKey: GlobalKey(),
    icon: const Icon(Icons.store,
      color: Colors.white,
      size: 12,
    ),
    status: GSStepStatusEnum.inActive,
    progress: 0,
    stepName: 'User Information Step',
    stepNumber: 'Step 1',
  ),
  // Add more GSStepModel objects here...
];

Conclusion

GSSTEPPER provides a simple and customizable way to create a step-by-step process in your Flutter application. It can be used for user onboarding, form submission, or any other multi-step tasks.

Contributors

gsstepper's People

Contributors

saeeddastras avatar mohammadbarati avatar ritagroup avatar ahmadazarnia avatar farhadprz avatar vahidesparham avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.