dynamic_timeline

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

DynamicTimeline 是一个 Flutter 小部件，旨在以动态布局功能可视化每日时间线、时刻表和甘特图。它使开发者能够以交互式和可自定义的方式表示基于时间的数据，支持水平或垂直方向。该小部件可根据内容长度自动调整，并允许灵活设置事件、时间段和标签的样式。非常适合用于日程安排应用程序、项目管理工具或任何需要时间顺序可视化的应用。

适合场景

调度应用
项目管理仪表板
活动策划界面
基于时间的数据可视化
每日计划实施

主要特点

可自定义的时间线布局
支持横向和纵向方向
动态事件渲染
可扩展的样式选项
适用于不同屏幕尺寸的响应式设计

适合对象

开发日历功能的开发者
管理项目时间表的团队
需要视觉时间跟踪的应用程序
寻求交互式时间显示的UI设计师
教育类或生产力应用

使用建议

有限的平台特定优化
需要手动处理复杂的事件重叠
大型数据集可能需要性能调优
无内置的拖放交互支持
依赖外部状态管理以实现动态更新

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

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'),
      ),
    ],
),

搜索插件、代码仓与 APP 分类

安装插件