timeline_tree 0.0.2

A timeline tree that displays events or activities.

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.

Features

• Progress indicator • Highly customisable nodes • Customisable styling options

Getting started

To install the package, run this command:

 $ flutter pub add timeline_tree

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.2

Import it and use it in your dart code:

import 'package:timeline_tree/timeline_tree.dart';

Usage

Timeline Model list

List<TimelinePluginModel> items = [];

Node Arrangements

• Position Node Left

 var rightModel = TimelinePluginModel(
            isActive: true,
            position: TimelinePluginViewPosition.right,
            child: _timelineItemView(element));

• Position Node Right

 var rightModel = TimelinePluginModel(
            isActive: false,
            position: TimelinePluginViewPosition.left,
            child: _timelineItemView(element));

• Add Models to List

 items.add(rightModel);
 items.add(rightModel);

TIMELINE TREE

• Create Timeline Tree

TimelinePlugin(
       items: items,
       lineWidth: 5,
       shrinkWrap: true,
       primary: false,
       overlapFactor: 0.6,
       activelineColor: AppResourses.appColors.primaryColor,
       physics: const NeverScrollableScrollPhysics(),
     ),

Example

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;
}

• 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(
            isActive,
            position,
            child)