Flutter时间线展示插件flutter_timeline的使用

Flutter时间线展示插件flutter_timeline的使用

插件介绍

logo

一个基于实际应用参考的完全可定制的时间线小部件。

  • ✅ 完全可定制的指示点
  • ✅ 支持指示点与线条之间的间距
  • ✅ 支持事件（项目）之间的间距但保持线条连接
  • ✅ 使用自定义绘制，但指示器和主体都是完全可定制的。
  • ✅ 两个现实世界的应用示例
  • ✅ 支持从左到右（L2R）
  • ✅ 支持锚点
  • ✅ 支持全局偏移
  • ✅ 支持项目偏移
  • ✅ 被企业广泛使用并不断更新，用于生产应用。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_timeline: latest

使用方法

简单示例

首先，创建一个简单的事件显示：

TimelineEventDisplay get plainEventDisplay {
  return TimelineEventDisplay(
      child: TimelineEventCard(
        title: Text("just now"),
        content: Text("someone commented on your timeline ${DateTime.now()}"),
      ),
      indicator: TimelineDots.of(context).circleIcon);
}

List<TimelineEventDisplay> events;

Widget _buildTimeline() {
  return TimelineTheme(
      data: TimelineThemeData(lineColor: Colors.blueAccent),
      child: Timeline(
        indicatorSize: 56,
        events: events,
      ));
}

void _addEvent() {
  setState(() {
    events.add(plainEventDisplay);
  });
}

使用偏移

可以通过设置 altOffset 属性来调整时间线的位置：

Widget _buildTimeline() {
  return Timeline(
      indicatorSize: 56,
      events: events,
      altOffset: Offset(0, -24) // 设置偏移
  );
}

使用锚点和偏移

可以设置事件的锚点和偏移量：

TimelineEventDisplay get plainEventDisplay {
  return TimelineEventDisplay(
      anchor: IndicatorPosition.top,
      indicatorOffset: Offset(0, 24),
      child: TimelineEventCard(
        title: Text("multi\nline\ntitle\nawesome!"),
        content: Text("someone commented on your timeline ${DateTime.now()}"),
      ),
      indicator: randomIndicator);
}

更多关于Flutter时间线展示插件flutter_timeline的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter时间线展示插件flutter_timeline的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用flutter_timeline插件来展示时间线的示例代码。flutter_timeline是一个流行的Flutter插件，用于创建时间线视图。

首先，确保你已经在pubspec.yaml文件中添加了flutter_timeline依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_timeline: ^x.y.z  # 请替换为最新版本号

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

接下来，你可以在你的Flutter应用中创建一个时间线视图。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Timeline Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TimelineScreen(),
    );
  }
}

class TimelineScreen extends StatelessWidget {
  final List<TimelineEvent> events = [
    TimelineEvent(
      title: 'Event 1',
      description: 'This is the first event in the timeline.',
      dateTime: DateTime(2023, 10, 1),
      iconData: Icons.event,
      color: Colors.blue,
    ),
    TimelineEvent(
      title: 'Event 2',
      description: 'This is the second event in the timeline.',
      dateTime: DateTime(2023, 10, 5),
      iconData: Icons.announcement,
      color: Colors.green,
    ),
    TimelineEvent(
      title: 'Event 3',
      description: 'This is the third event in the timeline.',
      dateTime: DateTime(2023, 10, 10),
      iconData: Icons.whatshot,
      color: Colors.red,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Timeline Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Timeline(
          events: events,
          lineColor: Colors.grey.shade300,
          lineThickness: 2.0,
          dotColor: Colors.black,
          dotSize: 10.0,
          showDotIndicator: true,
          indicatorColor: Colors.white,
          indicatorStrokeWidth: 2.0,
          indicatorSize: 20.0,
          showConnectionLines: true,
          onEventTap: (TimelineEvent event) {
            // Handle event tap
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text('Tapped on ${event.title}'),
              ),
            );
          },
        ),
      ),
    );
  }
}

class TimelineEvent {
  final String title;
  final String description;
  final DateTime dateTime;
  final IconData iconData;
  final Color color;

  TimelineEvent({
    required this.title,
    required this.description,
    required this.dateTime,
    required this.iconData,
    required this.color,
  });

  TimelineMarker toMarker() {
    return TimelineMarker(
      title: title,
      description: description,
      dateTime: dateTime,
      iconData: iconData,
      color: color,
    );
  }
}

在这个示例中，我们定义了一个TimelineEvent类来存储时间线事件的数据，包括标题、描述、日期时间、图标数据和颜色。然后，在TimelineScreen中，我们创建了一个事件列表，并将其传递给Timeline小部件。

Timeline小部件接收多个参数来定制时间线的外观和行为，例如线条颜色、线条粗细、点颜色、点大小、是否显示点指示器、指示器颜色、指示器粗细、指示器大小、是否显示连接线以及事件点击时的回调函数。

你可以根据需求进一步定制和扩展这个示例。

回到顶部