timeline_view 是一个用于在 Flutter 应用中展示时间线的插件。它可以帮助你创建漂亮的时间线布局，适用于展示事件、任务、进度等。以下是使用 timeline_view 的基本步骤和示例代码。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 timeline_view 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  timeline_view: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 基本使用

以下是一个简单的示例，展示如何使用 timeline_view 创建一个时间线。

import 'package:flutter/material.dart';
import 'package:timeline_view/timeline_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Timeline View Example'),
        ),
        body: TimelineView(
          events: [
            TimelineEvent(
              title: 'Event 1',
              description: 'This is the first event',
              time: '10:00 AM',
            ),
            TimelineEvent(
              title: 'Event 2',
              description: 'This is the second event',
              time: '11:00 AM',
            ),
            TimelineEvent(
              title: 'Event 3',
              description: 'This is the third event',
              time: '12:00 PM',
            ),
          ],
        ),
      ),
    );
  }
}

3. 自定义时间线

你可以通过自定义 TimelineView 的属性来调整时间线的外观和行为。以下是一些常用的属性：

• lineColor: 设置时间线的颜色。
• lineWidth: 设置时间线的宽度。
• eventGap: 设置事件之间的间距。
• eventBuilder: 自定义事件的构建方式。

TimelineView(
  lineColor: Colors.blue,
  lineWidth: 2.0,
  eventGap: 20.0,
  events: [
    TimelineEvent(
      title: 'Event 1',
      description: 'This is the first event',
      time: '10:00 AM',
    ),
    TimelineEvent(
      title: 'Event 2',
      description: 'This is the second event',
      time: '11:00 AM',
    ),
  ],
  eventBuilder: (context, event) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              event.title,
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 8),
            Text(event.description),
            SizedBox(height: 8),
            Text(event.time),
          ],
        ),
      ),
    );
  },
)

4. 处理事件点击

你还可以为时间线中的事件添加点击事件处理。

TimelineView(
  events: [
    TimelineEvent(
      title: 'Event 1',
      description: 'This is the first event',
      time: '10:00 AM',
      onTap: () {
        print('Event 1 tapped');
      },
    ),
    TimelineEvent(
      title: 'Event 2',
      description: 'This is the second event',
      time: '11:00 AM',
      onTap: () {
        print('Event 2 tapped');
      },
    ),
  ],
)

5. 更多自定义

你可以根据需要进一步自定义时间线的外观和行为。例如，你可以使用 TimelineEvent 的 icon 属性为事件添加图标，或者使用 TimelineView 的 indicatorBuilder 自定义时间线指示器。

TimelineView(
  events: [
    TimelineEvent(
      title: 'Event 1',
      description: 'This is the first event',
      time: '10:00 AM',
      icon: Icon(Icons.check_circle, color: Colors.green),
    ),
    TimelineEvent(
      title: 'Event 2',
      description: 'This is the second event',
      time: '11:00 AM',
      icon: Icon(Icons.error, color: Colors.red),
    ),
  ],
  indicatorBuilder: (context, index) {
    return Container(
      width: 20,
      height: 20,
      decoration: BoxDecoration(
        color: Colors.blue,
        shape: BoxShape.circle,
      ),
      child: Center(
        child: Text(
          '${index + 1}',
          style: TextStyle(color: Colors.white, fontSize: 12),
        ),
      ),
    );
  },
)