BubbleTimeline 是一個 Flutter 小工具,專為建立互動式、可自訂的時間軸介面而設計。它讓開發者能將事件顯示為可輕鬆樣式化與排列的動畫氣泡。每個氣泡支援自訂內容、顏色與互動,非常適合用來視覺化項目里程碑、歷史事件或使用者活動記錄等序列。此小工具輕巧且彈性高,可透過 pub.dev 簡單整合。其乾淨的 API 能快速設定,同時不犧牲設計控制權。
適用情境
顯示專案時間線
可視化歷史事件
顯示使用者活動串流
逐步展示流程
建立互動式敘事介面
主要特色
可自訂的事件氣泡
互動式觸控回應
輕鬆的樣式選項
平滑動畫
靈活的佈局控制
支援垂直和水平方向
適合對象
開發基於時間線應用程式的開發者
需要互動式 UI 元件的設計人員
需要事件可視化的應用
教育或作品集應用
具有順序數據展示的項目
使用建議
有限的平台特定優化
無內建日期格式化
需要手動處理大型資料集
未針對超長時間軸進行優化
可能需要額外的邏輯來處理動態更新
原始 README
以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。
Bubble Timeline Package
A Flutter Widget to make interactive timeline widget.
This widget can be used to make Event Timelines, or Timelines for certain travel journey. This widget provides easy customisation of individual event bubbles.
Screenshots
Installing
To use this package:
Add the following to your pubspec.yaml file:
dependencies:bubble_timeline:^1.0.5
How to Use
Simply create a BubbleTimeline widget, and pass the required params:
BubbleTimeline(
bubbleDiameter: 120,
// List of Timeline Bubble Items
items: [
TimelineItem(
title: 'Boat',
subtitle: 'Travel through Oceans',
child: Icon(
Icons.directions_boat,
color: Colors.white,
),
bubbleColor: Colors.grey,
),
TimelineItem(
title: 'Bike',
subtitle: 'Road Trips are best',
child: Icon(
Icons.directions_bike,
color: Colors.white,
),
bubbleColor: Colors.grey,
),
TimelineItem(
title: 'Bus',
subtitle: 'I like to go with friends',
child: Icon(
Icons.directions_bus,
color: Colors.white,
),
bubbleColor: Colors.grey,
),
],
stripColor: Colors.teal,
scaffoldColor: Colors.white,
)