时间线

一个强大且易于使用的 Flutter 时间线包！

注意：此包处于早期阶段。未经充分测试，无法保证稳定性。某些API可能会发生变化。

示例

在 网页 上查看，或查看 源代码。

时间线状态 包裹递送跟踪 流程时间线
timeline_status package_delivery_tracking.gif process_timeline.gif

更多示例
? 正在开发中 ?

功能

该 时间线 和每个 组件 都是WIDGET。

  • 常用样式可通过预定义组件轻松实现。
  • 垂直、水平方向。
  • 交替内容。
  • 与Flutter小部件（Row、Column、CustomScrollView等）结合使用。
  • 使用主题自定义每个范围。

安装

1. 依赖它

将此添加到您的 package 的 pubspec.yaml 文件中

dependencies:
  timelines: ^[latest_version]

2. 安装它

您可以从命令行安装包

使用 Flutter

$ flutter pub get

或者，您的编辑器可能支持flutter pub get。请查看您编辑器的文档以了解更多信息。

3. 导入它

现在，在您的 Dart 代码中，您可以使用

import 'package:timelines/timelines.dart';

基本用法

@override
Widget build(BuildContext context) {
  return Timeline.tileBuilder(
    builder: TimelineTileBuilder.fromStyle(
      contentsAlign: ContentsAlign.alternating,
      contentsBuilder: (context, index) => Padding(
        padding: const EdgeInsets.all(24.0),
        child: Text('Timeline Event $index'),
      ),
      itemCount: 10,
    ),
  );
}

查看 示例 或 API参考 获取更多详细信息。

组件

主题

查看 主题演示，了解TimelineTile中的值如何与主题配合使用。

要使用主题自定义时间线组件，请执行以下操作

TimelineTheme(
  data: TimelineThemeData(...),
  child: DotIndicator(...),
);

如果您只想更改父主题的某一部分，请使用 TimelineTheme.of(context)

TimelineTheme(
  data: TimelineThemeData.of(context).copyWith(...),
  child: DotIndicator(...),
);

如果您要自定义的组件是 Timeline 或 FixedTimeline，也可以做到

FixedTimeline(
  theme: TimelineThemeData(...),
  children: [...],
);

指示器

ContainerIndicator
ContainerIndicator 
ContainerIndicator(
  child: Container(
    width: 15.0,
    height: 15.0,
    color: Colors.blue,
  ),
)
DotIndicator
DotIndicator 
DotIndicator()
OutlinedDotIndicator
OutlinedDotIndicator 
OutlinedDotIndicator()

连接器

SolidLineConnector
SolidLineConnector 
SizedBox(
  height: 20.0,
  child: SolidLineConnector(),
)
DashedLineConnector
DashedLineConnector 
SizedBox(
  height: 20.0,
  child: DashedLineConnector(),
)
DecoratedLineConnector
DecoratedLineConnector 
SizedBox(
  height: 20.0,
  child: DecoratedLineConnector(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: [Colors.blue, Colors.lightBlueAccent[100]],
      ),
    ),
  ),
)

TimelineNode

纯时间线UI组件，不含内容。

TimelineNode包含一个指示器和指示器两侧的两个连接器

简单的TimelineNode
Simple TimelineNode 
SizedBox(
  height: 50.0,
  child: TimelineNode.simple(),
)
复杂的TimelineNode
Complex TimelineNode 
SizedBox(
  height: 80.0,
  child: TimelineNode(
    indicator: Card(
      margin: EdgeInsets.zero,
      child: Padding(
        padding: EdgeInsets.all(8.0),
        child: Text('Complex'),
      ),
    ),
    startConnector: DashedLineConnector(),
    endConnector: SolidLineConnector(),
  ),
)

TimelineTile

在节点两侧显示内容

TimelineTile
TimelineTile 
TimelineTile(
  oppositeContents: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Text('opposite\ncontents'),
  ),
  contents: Card(
    child: Container(
      padding: EdgeInsets.all(8.0),
      child: Text('contents'),
    ),
  ),
  node: TimelineNode(
    indicator: DotIndicator(),
    startConnector: SolidLineConnector(),
    endConnector: SolidLineConnector(),
  ),
)

TimelineTileBuilder

TimelineTileBuilder提供强大的构建功能。

连接

每个瓦片只绘制连接相邻瓦片的一半线。
使用 connected 构造函数，连接相邻瓦片的线可以构建为一个索引。

ConnectionDirection.before
Connection direction before 
FixedTimeline.tileBuilder(
  builder: TimelineTileBuilder.connectedFromStyle(
    connectionDirection: ConnectionDirection.before,
    connectorStyleBuilder: (context, index) {
      return (index == 1) ? ConnectorStyle.dashedLine : ConnectorStyle.solidLine;
    },
    indicatorStyleBuilder: (context, index) => IndicatorStyle.dot,
    itemExtent: 40.0,
    itemCount: 3,
  ),
)
ConnectionDirection.after
Connection direction after 
FixedTimeline.tileBuilder(
  builder: TimelineTileBuilder.connectedFromStyle(
    connectionDirection: ConnectionDirection.after,
    connectorStyleBuilder: (context, index) {
      return (index == 1) ? ConnectorStyle.dashedLine : ConnectorStyle.solidLine;
    },
    indicatorStyleBuilder: (context, index) => IndicatorStyle.dot,
    itemExtent: 40.0,
    itemCount: 3,
  ),
)

ContentsAlign

此值决定了时间线的内容如何构建

ContentsAlign.basic
Basic contents align 
FixedTimeline.tileBuilder(
  builder: TimelineTileBuilder.connectedFromStyle(
    contentsAlign: ContentsAlign.basic,
    oppositeContentsBuilder: (context, index) => Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text('opposite\ncontents'),
    ),
    contentsBuilder: (context, index) => Card(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text('Contents'),
      ),
    ),
    connectorStyleBuilder: (context, index) => ConnectorStyle.solidLine,
    indicatorStyleBuilder: (context, index) => IndicatorStyle.dot,
    itemCount: 3,
  ),
)
ContentsAlign.reverse
Reverse contents align 
FixedTimeline.tileBuilder(
  builder: TimelineTileBuilder.connectedFromStyle(
    contentsAlign: ContentsAlign.reverse,
    oppositeContentsBuilder: (context, index) => Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text('opposite\ncontents'),
    ),
    contentsBuilder: (context, index) => Card(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text('Contents'),
      ),
    ),
    connectorStyleBuilder: (context, index) => ConnectorStyle.solidLine,
    indicatorStyleBuilder: (context, index) => IndicatorStyle.dot,
    itemCount: 3,
  ),
)
ContentsAlign.alternating
Alternating contents align 
FixedTimeline.tileBuilder(
  builder: TimelineTileBuilder.connectedFromStyle(
    contentsAlign: ContentsAlign.alternating,
    oppositeContentsBuilder: (context, index) => Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text('opposite\ncontents'),
    ),
    contentsBuilder: (context, index) => Card(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text('Contents'),
      ),
    ),
    connectorStyleBuilder: (context, index) => ConnectorStyle.solidLine,
    indicatorStyleBuilder: (context, index) => IndicatorStyle.dot,
    itemCount: 3,
  ),
)

时间线

时间线组件有两个小部件，一个类似于ScrollView的 Timeline 和一个类似于Flex的 FixedTimeline。

它们的构造函数也类似于ScrollView和Flex。

主要区别在于它们将TimelineTheme作为祖先。

tileBuilder 构造函数使用 TimelineTileBuilder 提供更强大的功能。

如果您不需要TimelineTileBuilder，可以使用ListView、Column、Row等其他Flutter小部件。

即使您使用Flutter小部件，您也可以使用TimelineTheme。

GitHub

https://github.com/chulwoo-park/timelines