progress_timeline 0.0.5

A Timeline widget which can be used to show different stages in a bigger process.

timeline_horizontal

A Flutter Widget to make interactive Progress Timeline.

This widget can be used to make provide an interactive timeline view of a bigger process. Fluid Animations while switching between stages.

Installation

To use this package:

Add the following to your pubspec.yaml file:

dependencies:
    progress_timeline: ^0.0.5

How to Use

Import the library

import 'package:progress_timeline/progress_timeline.dart';

Create a ProgressTimeline object in the state of your Activity

class _MyPageState extends State<MyPage> {
  ProgressTimeline progressTimeline;
.
.
.
}

Create a list of all the stages in your entire process and initialize the progressTimeline variable in initState.

@override
  void initState() {
  List<SingleState> allStages = [
    SingleState(stateTitle: "Stage 1"),
    SingleState(stateTitle: "Stage 2"),
    SingleState(stateTitle: "Stage 3"),
    SingleState(stateTitle: "Stage 4"),
  ];
    screenProgress = new ProgressTimeline(
        states: allStages,
    );
    super.initState();
  }

Add progressTimeline to your build method.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: <Widget>[
           //add the widget
           progressTimeline,
        ],
      ),
    );
  }

Features

Goto Next Stage

call the .gotoNextStage() method to move forward to the next stage in the process.

.
  onPressed: () {
    screenProgress.gotoNextStage();
  },
.

Goto Previous Stage

call the .gotoPreviousStage() method to move back to the last stage in the process.

.
  onPressed: () {
    screenProgress.gotoPreviousStage();
  },
.

Fail Current Stage

call the .failCurrentStage() method to mark the current stage as failed.

.
  onPressed: () {
    screenProgress.failCurrentStage();
  },
.

Customization

You can pass your own Icons, Colors and Sizes for the respective parts of the timeline.

Pass Custom Icons for each type of stage

While initializing the ProgressTimeline widget, pass Icon values for these stages: checked, unchecked, failed, current

@override
  void initState() {
    screenProgress = new ProgressTimeline(
      states: allStages,
      //pass custom icons for each stage.
      checkedIcon: Icon(
        Icons.check_box,
        color: Colors.greenAccent,
      ),
      uncheckedIcon: ..,
      currentIcon: ..,
      failedIcon: ..,
      
    );
    super.initState();
  }

Customize Connector properties

While initializing the ProgressTimeline widget, customize the connector properties to suit your need.

@override
  void initState() {
    screenProgress = new ProgressTimeline(
      states: allStages,
      connectorColor: Colors.blueAccent,
      connectorLength: 120.0,
      connectorWidth: 10.0,
    );
    super.initState();
  }

Customize Icon Size

While initializing the ProgressTimeline widget, customize the Icon Size according to your preference.

@override
  void initState() {
    screenProgress = new ProgressTimeline(
      states: allStages,
      iconSize: 20.0,
      //NOTE: when using bigger icon sizes, modify the height parameter accordingly
      //default value is 100
      height: 200,
    );
    super.initState();
  }

Customize Stage Title TextStyle

While initializing the ProgressTimeline widget, customize the TextStyle of how the stage title is displayed

@override
  void initState() {
    screenProgress = new ProgressTimeline(
      states: allStages,
      textStyle: TextStyle(
        fontSize: 24,
        color: Colors.pink
      ),
    );
    super.initState();
  }

List of all customizable params

Params	Type	default-value
height	double	100
checkedIcon	Icon	Icon ( Icons.check_circle, color: Colors.green, size:25 );
currentIcon	Icon	Icon ( Icons.adjust, color: Colors.green, size:25 );
failedIcon	Icon	Icon ( Icons.highlight_off, color: Colors.redAccent, size:25 );
uncheckedIcon	Icon	Icon ( Icons.radio_button_unchecked, color: Colors.green, size:25 );
connectorColor	Color	Colors.green
connectorLength	double	40
connectorWidth	double	5
iconSize	double	25
textStyle	TextStyle	TextStyle()