插件详情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