step_tracker 1.1.0

A Flutter Step Tracker plugin for collect information from user and display progress through a sequence of steps.

step_tracker plugin

A Flutter step_tracker plugin is collect information from user and display progress through a sequence of steps. this plugin also have privilege for fully customization from user side.

Usage

Add dependency

Please check the latest version before installation. If there is any problem with the new version, please use the previous version.

dependencies:
  flutter:
    sdk: flutter
  # add step_tracker
  step_tracker: ^{latest version}

copied to clipboard

Add the following imports to your Dart code

import 'package:step_tracker/step_tracker.dart';

copied to clipboard

How to use

Simply create a step_tracker widget, and pass the required params and List of steps[]:

StepTracker(
  dotSize: 10,
  circleIconSize: 24,
  showIcon: true,
  selectedColor: Colors.green,
  unSelectedColor: Colors.red,
  stepTrackerType: StepTrackerType.dotVertical,
  pipeSize: 30,
  steps: [
    Steps(title: Text("your text"), state: TrackerState.none),
    Steps(title: Text("your text"), state: TrackerState.complete),
    Steps(title: Text("your text"), state: TrackerState.disabled),
  ],
)

copied to clipboard

Change tracker state

Here we have three state on Steps Widget complete disabled and one more is none which is default set. Following attributes are below:

state: TrackerState.none
state: TrackerState.complete
state: TrackerState.disable

copied to clipboard

Types of tracker

In this widget, currently we have two types of tracker indexedVertical & dotVertical, default set is dotVertical.

stepTrackerType: StepTrackerType.indexedVertical
stepTrackerType: StepTrackerType.dotVertical
stepTrackerType: StepTrackerType.indexedHorizontal
stepTrackerType: StepTrackerType.dotHorizontal

copied to clipboard

Icon Stepper Guide

To use the icon stepper with StepTrackerType.indexedVertical and StepTrackerType.indexedHorizontal:

• Set showIcon: true
• Provide the image URL in the iconAsset property of Steps

StepTracker(
  type: StepTrackerType.indexedVertical, //StepTrackerType.indexedHorizontal
  showIcon: true,
  circleIconSize: 24;
  steps: [
    Steps(title: "Order Placed", description: "description text", iconAsset: "assets/step1.png"),
    Steps(title: "Shipped", iconAsset: "assets/step2.png"),
    Steps(title: "Delivered", iconAsset: "assets/step3.png"),
  ],
)

copied to clipboard

Feedback

• Please raise an issue here.
• For more information please connect with me.

Contect with me