timeline_tree

Description:

timeline tree

The Dart TimelineTree widget provides a hierarchical visualization of chronological events or activities, designed specifically for tracking a user's mission history. Currently in its early stages, the project aims to evolve with community contributions for enhanced functionality.
Inspired by the app at https://schoolofnewafrica.com/, the Dart TimelineTree seeks to offer an intuitive solution for mission tracking, inviting collaborative efforts to refine and expand its capabilities.
All the credit to my product design lead Tagoe Kingston (https://dribbble.com/niimantse), who is the brain behind the UI concept.
Features #

• Progress indicator
• Highly customisable nodes
• Customisable styling options
Getting started #
To install the package, run this command:
$ flutter pub add timeline_tree

copied to clipboard
This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):
dependencies:
timeline_tree: ^0.0.5

copied to clipboard
Import it and use it in your dart code:
import 'package:timeline_tree/timeline_tree.dart';

copied to clipboard
Usage #
Timeline Model list
List<TimelinePluginModel> items = [];
copied to clipboard
Node Arrangements
• Position Node Left
var rightModel = TimelinePluginModel(
isActive: true,
position: TimelinePluginViewPosition.right,
child: _timelineItemView(element));
copied to clipboard
• Position Node Right
var rightModel = TimelinePluginModel(
isActive: false,
position: TimelinePluginViewPosition.left,
child: _timelineItemView(element));
copied to clipboard
• Add Models to List
items.add(rightModel);
items.add(rightModel);
copied to clipboard
TIMELINE TREE
• Create Timeline Tree
TimelinePlugin(
items: items,
lineWidth: 5,
shrinkWrap: true,
primary: false,
overlapFactor: 0.6,
activelineColor: AppResourses.appColors.primaryColor,
physics: const NeverScrollableScrollPhysics(),
),
copied to clipboard
Example #
• Import the package
//import the plugin
import 'package:timeline_tree/timeline_tree.dart';
copied to clipboard
List<TimelinePluginModel> timelinePluginModels = [];
copied to clipboard
• Extracting and Preparing Data
List<TimelinePluginModel> items = [];
//itereating over the list of data
for (int index = 0; index < responseItems.length; index++) {
MissionTimelineItem element = responseItems[index];
var positionedRight = index % 2 != 0;
var model = TimelinePluginModel(
isActive: !element.locked,
position: positionedRight ? TimelinePluginViewPosition.right :
TimelinePluginViewPosition.left,
child: _timelineItemView(element));
items.add(model);

//updating the view
setState(() {
timelinePluginModels = items;
});
}
copied to clipboard
• Creating the View
Widget _timelineView() {
return Container(
margin: const EdgeInsets.all(16),
child: TimelinePlugin(
items: timelinePluginModels,
lineWidth: 5,
shrinkWrap: true,
primary: false,
overlapFactor: 0.6,
activelineColor: AppResourses.appColors.primaryColor,
physics: const NeverScrollableScrollPhysics(),
),
);
}
copied to clipboard
Additional information #
• Timeline Tree
@items, list of model items to be displayed in the timeline
@lineWidth, the width of the line in the timeline
@inactivelineColor, color of the line for inactive region
@activelineColor, color of the line for active regions
@overlapFactor, the fraction for which the oncoming view should overlap
class TimelinePlugin {
final List<TimelinePluginModel> items,
final bool primary,
final bool shrinkWrap,
final ScrollPhysics? physics,
final double lineWidth,
final Color inactivelineColor,
final Color activelineColor,
final double overlapFactor
}
copied to clipboard
• Timeline Model
@position, is an enum that tells if to position the node to left and right
@isActive, tells if the that object is active or not. This helps for people who want the timeline have states
@child, the view to attached to the tree
class TimelinePluginModel(
final bool isActive,
final TimelinePluginViewPosition position,
final Widget child)
copied to clipboard
• Timeline Position Enum
Indicate the position of arrangement
enum TimelinePluginViewPosition {
left,
right
}
copied to clipboard