timeline_tree 0.0.3

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

• Import the package

 //import the plugin
 import 'package:timeline_tree/timeline_tree.dart';

 List<TimelinePluginModel> timelinePluginModels = [];

• Extracting and Preparing Data

 List<TimelinePluginModel> items = [];

 for (int index = 0; index < responseItems.length; index++) {
      MissionTimelineItem element = responseItems[index];
      if (index % 2 != 0) {
        var model = TimelinePluginModel(
            isActive: !element.locked,
            position: TimelinePluginViewPosition.right,
            child: _timelineItemView(element));
        items.add(model);
      } else {
        var model = TimelinePluginModel(
            isActive: !element.locked,
            position: TimelinePluginViewPosition.left,
            child: _timelineItemView(element));
        items.add(model);
      }
    //updating the view
    setState(() {
      timelinePluginModels = items;
    });
  }

• 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(),
      ),
    );
  }

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(
           final bool isActive,
           final TimelinePluginViewPosition position,
           final Widget child)

• Timeline Position Enum

Indicate the position of arrangement

enum TimelinePluginViewPosition {
  left,
  right
}