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

timeline_tree

• 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.5

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 = [];
 //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;
    });
  }

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

Libraries

timeline_tree