progress_timeline 0.0.5

Flutter Android iOS web

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 #

ParamsTypedefault-value
heightdouble100
checkedIconIconIcon ( Icons.check_circle, color: Colors.green, size:25 );
currentIconIconIcon ( Icons.adjust, color: Colors.green, size:25 );
failedIconIconIcon ( Icons.highlight_off, color: Colors.redAccent, size:25 );
uncheckedIconIconIcon ( Icons.radio_button_unchecked, color: Colors.green, size:25 );
connectorColorColorColors.green
connectorLengthdouble40
connectorWidthdouble5
iconSizedouble25
textStyleTextStyleTextStyle()
1
likes
110
pub points
42%
popularity

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

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

akshayarora.10.6.97@gmail.com

License

MIT (LICENSE)

Dependencies

flutter, scrollable_positioned_list

More

Packages that depend on progress_timeline