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 分類

安裝套件