dynamic_timeline

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

DynamicTimeline is a Flutter widget designed to visualize daily timelines, timetables, and Gantt charts with dynamic layout capabilities. It enables developers to represent time-based data in an interactive and customizable way, supporting horizontal or vertical orientation. The widget adapts to varying content lengths and allows for flexible styling of events, intervals, and labels. Ideal for scheduling applications, project management tools, or any app requiring time-ordered visualizations.

Use cases

Scheduling apps
Project management dashboards
Event planning interfaces
Time-based data visualization
Daily planner implementations

Key features

Customizable timeline layout
Support for horizontal and vertical orientation
Dynamic event rendering
Extensible styling options
Responsive design for varying screen sizes

Suitable for

Developers building calendar features
Teams managing project timelines
Apps requiring visual time tracking
UI designers seeking interactive time displays
Educational or productivity applications

Considerations

Limited platform-specific optimizations
Requires manual handling of complex event overlaps
May need performance tuning for large datasets
No built-in support for drag-and-drop interactions
Depends on external state management for dynamic updates

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

A widget to create daily timelines, timetables, gantt charts* and more.

Note: This package is in early stage and has not been tested with large amount of data.

Daily timeline

Weekly timetable

Gantt chart

Features

Easy to use API.
Rezizable timeline items.
Custom label builder.

Usage

Installation

Add the following line to pubspec.yaml:

dependencies:
  dynamic_timeline: ^0.1.2

Basic set up

Make sure to check out the example for more details.

Dynamic timeline requires you to provide firstDateTime, lastDateTime, labelBuilder and a list of items.

labelBuilder: Used to build the label of each mark, normally a dateFormat will be used.
items: The events of the timeline, who are positioned according to its start and end date times.

Another important property is intervalDuration, that is the lenght of time between each mark.

Example of a daily timeline.

DynamicTimeline(
    firstDateTime: DateTime(1970, 1, 1, 7),
    lastDateTime: DateTime(1970, 1, 1, 22),
    labelBuilder: DateFormat('HH:mm').format,
    intervalDuration: const Duration(hours: 1),
    children: [
      TimelineItem(
        startDateTime: DateTime(1970, 1, 1, 7),
        endDateTime: DateTime(1970, 1, 1, 8),
        child: const Event(title: 'Event 1'),
      ),
      TimelineItem(
        startDateTime: DateTime(1970, 1, 1, 10),
        endDateTime: DateTime(1970, 1, 1, 12),
        child: const Event(title: 'Event 2'),
      ),
      TimelineItem(
        startDateTime: DateTime(1970, 1, 1, 15),
        endDateTime: DateTime(1970, 1, 1, 17),
        child: const Event(title: 'Event 3'),
      ),
    ],
),

Search packages, repositories and app categories

Install package