progress_timeline

Description:

progress timeline

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
copied to clipboard
How to Use #
Import the library
import 'package:progress_timeline/progress_timeline.dart';
copied to clipboard
Create a ProgressTimeline object in the state of your Activity
class _MyPageState extends State<MyPage> {
ProgressTimeline progressTimeline;
.
.
.
}
copied to clipboard
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();
}
copied to clipboard
Add progressTimeline to your build method.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: <Widget>[
//add the widget
progressTimeline,
],
),
);
}
copied to clipboard
Features #
Goto Next Stage #
call the .gotoNextStage() method to move forward to the next stage in the process.
.
onPressed: () {
screenProgress.gotoNextStage();
},
.
copied to clipboard
Goto Previous Stage #
call the .gotoPreviousStage() method to move back to the last stage in the process.
.
onPressed: () {
screenProgress.gotoPreviousStage();
},
.
copied to clipboard
Fail Current Stage #
call the .failCurrentStage() method to mark the current stage as failed.
.
onPressed: () {
screenProgress.failCurrentStage();
},
.
copied to clipboard
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();
}
copied to clipboard
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();
}
copied to clipboard
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();
}
copied to clipboard
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();
}
copied to clipboard
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()