套件詳情v0.1.1

timeline_list

用於建立高度可自訂時間軸的 Flutter 小工具。非常適合引導流程、進度追蹤和互動式歷史顯示。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文件原始碼

近 30 天下載: 4070
喜歡數: 222
Pub 分數: 160

安裝套件

flutter pub add timeline_list

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

一個高度可自訂的 Flutter 小工具，用於建立互動式時間軸，非常適合視覺化引導流程、進度追蹤與歷史事件顯示等序列。它支援多種版面選項與樣式，讓開發者能在多個平台創造吸引人的使用者體驗。此套件設計具有彈性，允許自訂時間軸項目、連接器與標記。它能輕鬆整合至 Flutter 應用中，設定簡單。

適用情境

引導流程
進度追蹤
History displays
事件順序
使用者旅程視覺化
互動式教程

主要特色

高度可自訂的設計
對多平台的支援
靈活項目和連接器樣式
平滑動畫
與 Flutter 的輕鬆整合
響應式版面選項

適合對象

應用啟用畫面
任務完成追蹤器
依時間順序的資料呈現
教育類應用
使用者活動記錄

使用建議

複雜佈局需要手動設定
有限的內建主題
可能需要額外的樣式以確保可訪問性
大資料集的效能影響
在密集時間軸中未針對垂直捲動進行優化

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

Flutter Timeline Widget

A highly customizable Flutter widget for displaying vertical timelines with custom markers, icons, and flexible positioning options.

[!WARNING] 🦚 The documentation was created using LLMs. If you notice any errors or typos, please submit a Pull Request or create an issue.

Features

🎯 Three timeline positions: start (left), center, or end (right)
🎨 Fully customizable markers with any widget as content or icon
📍 Flexible icon alignment: top, center, or bottom of markers
🎯 Individual marker positioning for centered timelines
🔄 Support for reversed timeline order
📱 Custom scroll physics and controller support

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  timeline_list: ^0.1.0

Usage

Simple Timeline

import 'package:timeline_list/timeline_list.dart';

Timeline(
  children: [
    Marker(child: Text("Step 1")),
    Marker(child: Text("Step 2")),
    Marker(child: Text("Step 3"))
  ],
)

Onboarding Example

Here's a more advanced example showing an onboarding timeline with custom icons:

var checkIcon = Container(
    width: 16,
    height: 16,
    decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.green),
    child: Icon(Icons.check, color: Colors.white, size: 12));
var emptyIcon = Container(
    width: 16,
    height: 16,
    decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.grey));
return Scaffold(
    appBar: AppBar(title: const Text("Onboarding example")),
    body: Column(children: [
      Timeline.builder(
        context: context,
        markerCount: 10,
        properties: TimelineProperties(
            iconAlignment: MarkerIconAlignment.center,
            iconSize: 16,
            timelinePosition: TimelinePosition.start),
        markerBuilder: (context, index) => Marker(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text("Step ${index + 1}"),
          ),
          icon: index >= 8 ? emptyIcon : checkIcon,
          position: MarkerPosition.left,
        ),
      ),
    ]));

Customization

Timeline Properties

timelinePosition: Controls the overall timeline position (start, center, end)
iconAlignment: Sets icon alignment relative to marker content
iconSize: Defines the size of marker icons
lineWidth: Sets the width of connecting lines
lineColor: Customizes the color of connecting lines
itemGap: Controls spacing between markers
iconGap: Sets gap between icon and marker content