{"id":13471127,"url":"https://github.com/chulwoo-park/timelines","last_synced_at":"2025-10-23T03:50:35.664Z","repository":{"id":45791024,"uuid":"313313294","full_name":"chulwoo-park/timelines","owner":"chulwoo-park","description":"A powerful \u0026 easy to use timeline package for Flutter! 🚀","archived":false,"fork":false,"pushed_at":"2023-02-06T17:24:53.000Z","size":3417,"stargazers_count":745,"open_issues_count":29,"forks_count":199,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-03-26T13:38:55.087Z","etag":null,"topics":["dart","flutter","flutter-package","flutter-ui","flutter-widget","flutter-widgets","timeline","timeline-component","timelines"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/timelines","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chulwoo-park.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-11-16T13:35:48.000Z","updated_at":"2025-03-24T01:59:06.000Z","dependencies_parsed_at":"2023-02-17T22:45:37.996Z","dependency_job_id":null,"html_url":"https://github.com/chulwoo-park/timelines","commit_stats":{"total_commits":46,"total_committers":3,"mean_commits":"15.333333333333334","dds":0.04347826086956519,"last_synced_commit":"7be49590321c2b3f6e06d67c3b4b196c11cc23e8"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/chulwoo-park/timelines","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chulwoo-park%2Ftimelines","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chulwoo-park%2Ftimelines/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chulwoo-park%2Ftimelines/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chulwoo-park%2Ftimelines/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chulwoo-park","download_url":"https://codeload.github.com/chulwoo-park/timelines/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chulwoo-park%2Ftimelines/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280557084,"owners_count":26350569,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-23T02:00:06.710Z","response_time":142,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dart","flutter","flutter-package","flutter-ui","flutter-widget","flutter-widgets","timeline","timeline-component","timelines"],"created_at":"2024-07-31T16:00:40.262Z","updated_at":"2025-10-23T03:50:35.619Z","avatar_url":"https://github.com/chulwoo-park.png","language":"Dart","funding_links":[],"categories":["Components","Dart","组件","UI [🔝](#readme)"],"sub_categories":["UI"],"readme":"[![banner](https://raw.github.com/chulwoo-park/timelines/main/design/feature_graphic.png)](https://github.com/chulwoo-park/timelines)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://pub.dartlang.org/packages/timelines\"\u003e\n    \u003cimg src=\"https://img.shields.io/pub/v/timelines.svg\" alt=\"Pub\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/Solido/awesome-flutter\"\u003e\n    \u003cimg alt=\"Awesome Flutter\" src=\"https://img.shields.io/badge/Awesome-Flutter-blue.svg?longCache=true\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg\" alt=\"License: MIT\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eA powerful \u0026 easy to use timeline package for Flutter! 🚀\u003c/p\u003e\n\n\u003e ***Caveat***: This package is an early stage. Not enough testing has been done to guarantee stability. Some APIs may change.\n\n# Examples\n\nCheck it out on the [web](https://chulwoo.dev/timelines/) or look at the [source code](https://github.com/chulwoo-park/timelines/tree/main/example).\n\n| Timeline status | Package delivery tracking | Process timeline |\n| - | - | - |\n| [![timeline_status](https://raw.github.com/chulwoo-park/timelines/main/screenshots/timeline_status.gif)](https://chulwoo.dev/timelines/#/timeline_status) | [![package_delivery_tracking.gif](https://raw.github.com/chulwoo-park/timelines/main/screenshots/package_delivery_tracking.gif)](https://chulwoo.dev/timelines/#/package_delivery_tracking) | [![process_timeline.gif](https://raw.github.com/chulwoo-park/timelines/main/screenshots/process_timeline.gif)](https://chulwoo.dev/timelines/#/process_timeline) |\n\n\u003cp align=\"center\"\u003eMore examples\u003cbr/\u003e🚧 WIP 🚧\u003c/p\u003e\n\n# Features\n\n### The [timeline](#timeline) and each [components](#components) are all WIDGET.\n\n* Common styles can be easily implemented with predefined components.\n* Vertical, horizontal direction.\n* Alternating contents.\n* Combination with Flutter widgets(Row, Column, CustomScrollView, etc).\n* Customize each range with themes.\n\n# Getting started\n\n- [Installation](#installation)\n- [Basic Usage](#basic-usage)\n- [Components](#components)\n  - [Theme](#theme)\n  - [Indicator](#indicator)\n  - [Connector](#connector)\n  - [TimelineNode](#timelinenode)\n  - [TimelineTile](#timelinetile)\n  - [Timeline](#timeline)\n  - [TimelineTileBuilder](#timelinetilebuilder)\n\n## Installation\n\n#### 1. Depend on it\n\nAdd this to your package's pubspec.yaml file:\n``` yaml\ndependencies:\n  timelines: ^[latest_version]\n```\n\n#### 2. Install it\nYou can install packages from the command line:\n\nwith Flutter:\n``` console\n$ flutter pub get\n```\n\nAlternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.\n\n#### 3. Import it\nNow in your Dart code, you can use:\n``` dart\nimport 'package:timelines/timelines.dart';\n```\n\n## Basic Usage\n\n``` dart\n@override\nWidget build(BuildContext context) {\n  return Timeline.tileBuilder(\n    builder: TimelineTileBuilder.fromStyle(\n      contentsAlign: ContentsAlign.alternating,\n      contentsBuilder: (context, index) =\u003e Padding(\n        padding: const EdgeInsets.all(24.0),\n        child: Text('Timeline Event $index'),\n      ),\n      itemCount: 10,\n    ),\n  );\n}\n```\n\nCheck the [Example](https://github.com/chulwoo-park/timelines/tree/main/example) or the [API reference](https://pub.dev/documentation/timelines/latest/) for more details.\n\n## Components\n\n### Theme\n\nCheck out [Theme Demo](https://chulwoo.dev/timelines/#/theme) to see how the values inside TimelineTile work with the theme.\n\nTo customize the timeline component with a theme, do the following:\n\n``` dart\nTimelineTheme(\n  data: TimelineThemeData(...),\n  child: DotIndicator(...),\n);\n```\n\nIf you only want to change part of the parent theme, use `TimelineTheme.of(context)`:\n\n``` dart\nTimelineTheme(\n  data: TimelineThemeData.of(context).copyWith(...),\n  child: DotIndicator(...),\n);\n```\n\nIf the component you want to customize is `Timeline` or `FixedTimeline`, this is also possible:\n\n``` dart\nFixedTimeline(\n  theme: TimelineThemeData(...),\n  children: [...],\n);\n```\n\n### Indicator\n\n\u003ctable\u003e\n  \u003cth colspan=\"2\"\u003eContainerIndicator\u003c/th\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.github.com/chulwoo-park/timelines/main/screenshots/container_indicator.png\" alt=\"ContainerIndicator\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cpre lang=\"dart\"\u003e\nContainerIndicator(\n  child: Container(\n    width: 15.0,\n    height: 15.0,\n    color: Colors.blue,\n  ),\n)\u003c/pre\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003cth colspan=\"2\"\u003eDotIndicator\u003c/th\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.github.com/chulwoo-park/timelines/main/screenshots/dot_indicator.png\" alt=\"DotIndicator\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\u003cpre lang=\"dart\"\u003eDotIndicator()\u003c/pre\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003cth colspan=\"2\"\u003eOutlinedDotIndicator\u003c/th\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.github.com/chulwoo-park/timelines/main/screenshots/outlined_dot_indicator.png\" alt=\"OutlinedDotIndicator\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\u003cpre lang=\"dart\"\u003eOutlinedDotIndicator()\u003c/pre\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### Connector\n\n\u003ctable\u003e\n  \u003cth colspan=\"2\"\u003eSolidLineConnector\u003c/th\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.github.com/chulwoo-park/timelines/main/screenshots/solid_line_connector.png\" alt=\"SolidLineConnector\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cpre lang=\"dart\"\u003e\nSizedBox(\n  height: 20.0,\n  child: SolidLineConnector(),\n)\u003c/pre\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003cth colspan=\"2\"\u003eDashedLineConnector\u003c/th\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.github.com/chulwoo-park/timelines/main/screenshots/dashed_line_connector.png\" alt=\"DashedLineConnector\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cpre lang=\"dart\"\u003e\nSizedBox(\n  height: 20.0,\n  child: DashedLineConnector(),\n)\u003c/pre\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003cth colspan=\"2\"\u003eDecoratedLineConnector\u003c/th\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.github.com/chulwoo-park/timelines/main/screenshots/decorated_line_connector.png\" alt=\"DecoratedLineConnector\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cpre lang=\"dart\"\u003e\nSizedBox(\n  height: 20.0,\n  child: DecoratedLineConnector(\n    decoration: BoxDecoration(\n      gradient: LinearGradient(\n        begin: Alignment.topCenter,\n        end: Alignment.bottomCenter,\n        colors: [Colors.blue, Colors.lightBlueAccent[100]],\n      ),\n    ),\n  ),\n)\u003c/pre\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\n### TimelineNode\n\nPure timeline UI component with no content.\n\nThe TimelineNode contains an indicator and two connectors on both sides of the indicator:\n\n\u003ctable\u003e\n  \u003cth colspan=\"2\"\u003eSimple TimelineNode\u003c/th\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.github.com/chulwoo-park/timelines/main/screenshots/simple_timeline_node.png\" alt=\"Simple TimelineNode\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cpre lang=\"dart\"\u003e\nSizedBox(\n  height: 50.0,\n  child: TimelineNode.simple(),\n)\u003c/pre\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003cth colspan=\"2\"\u003eComplex TimelineNode\u003c/th\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.github.com/chulwoo-park/timelines/main/screenshots/complex_timeline_node.png\" alt=\"Complex TimelineNode\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cpre lang=\"dart\"\u003e\nSizedBox(\n  height: 80.0,\n  child: TimelineNode(\n    indicator: Card(\n      margin: EdgeInsets.zero,\n      child: Padding(\n        padding: EdgeInsets.all(8.0),\n        child: Text('Complex'),\n      ),\n    ),\n    startConnector: DashedLineConnector(),\n    endConnector: SolidLineConnector(),\n  ),\n)\u003c/pre\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### TimelineTile\n\nDisplays content on both sides of the node:\n\n\u003ctable\u003e\n  \u003cth colspan=\"2\"\u003eTimelineTile\u003c/th\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.github.com/chulwoo-park/timelines/main/screenshots/timeline_tile.png\" alt=\"TimelineTile\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cpre lang=\"dart\"\u003e\nTimelineTile(\n  oppositeContents: Padding(\n    padding: const EdgeInsets.all(8.0),\n    child: Text('opposite\\ncontents'),\n  ),\n  contents: Card(\n    child: Container(\n      padding: EdgeInsets.all(8.0),\n      child: Text('contents'),\n    ),\n  ),\n  node: TimelineNode(\n    indicator: DotIndicator(),\n    startConnector: SolidLineConnector(),\n    endConnector: SolidLineConnector(),\n  ),\n)\u003c/pre\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\n### TimelineTileBuilder\n\nTimelineTileBuilder provides powerful build features.\n\n#### Connection\n\nEach tile draws only half of the line connecting the neighboring tiles.\nUsing the `connected` constructor, lines connecting adjacent tiles can build as one index.\n\n\u003ctable\u003e\n  \u003cth colspan=\"2\"\u003eConnectionDirection.before\u003c/th\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.github.com/chulwoo-park/timelines/main/screenshots/connection_direction_before.png\" alt=\"Connection direction before\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cpre lang=\"dart\"\u003e\nFixedTimeline.tileBuilder(\n  builder: TimelineTileBuilder.connectedFromStyle(\n    connectionDirection: ConnectionDirection.before,\n    connectorStyleBuilder: (context, index) {\n      return (index == 1) ? ConnectorStyle.dashedLine : ConnectorStyle.solidLine;\n    },\n    indicatorStyleBuilder: (context, index) =\u003e IndicatorStyle.dot,\n    itemExtent: 40.0,\n    itemCount: 3,\n  ),\n)\u003c/pre\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003cth colspan=\"2\"\u003eConnectionDirection.after\u003c/th\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.github.com/chulwoo-park/timelines/main/screenshots/connection_direction_after.png\" alt=\"Connection direction after\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cpre lang=\"dart\"\u003e\nFixedTimeline.tileBuilder(\n  builder: TimelineTileBuilder.connectedFromStyle(\n    connectionDirection: ConnectionDirection.after,\n    connectorStyleBuilder: (context, index) {\n      return (index == 1) ? ConnectorStyle.dashedLine : ConnectorStyle.solidLine;\n    },\n    indicatorStyleBuilder: (context, index) =\u003e IndicatorStyle.dot,\n    itemExtent: 40.0,\n    itemCount: 3,\n  ),\n)\u003c/pre\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\n#### ContentsAlign\n\nThis value determines how the contents of the timeline will be built:\n\n\u003ctable\u003e\n  \u003cth colspan=\"2\"\u003eContentsAlign.basic\u003c/th\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.github.com/chulwoo-park/timelines/main/screenshots/contents_align_basic.png\" alt=\"Basic contents align\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cpre lang=\"dart\"\u003e\nFixedTimeline.tileBuilder(\n  builder: TimelineTileBuilder.connectedFromStyle(\n    contentsAlign: ContentsAlign.basic,\n    oppositeContentsBuilder: (context, index) =\u003e Padding(\n      padding: const EdgeInsets.all(8.0),\n      child: Text('opposite\\ncontents'),\n    ),\n    contentsBuilder: (context, index) =\u003e Card(\n      child: Padding(\n        padding: const EdgeInsets.all(8.0),\n        child: Text('Contents'),\n      ),\n    ),\n    connectorStyleBuilder: (context, index) =\u003e ConnectorStyle.solidLine,\n    indicatorStyleBuilder: (context, index) =\u003e IndicatorStyle.dot,\n    itemCount: 3,\n  ),\n)\u003c/pre\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003cth colspan=\"2\"\u003eContentsAlign.reverse\u003c/th\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.github.com/chulwoo-park/timelines/main/screenshots/contents_align_reverse.png\" alt=\"Reverse contents align\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cpre lang=\"dart\"\u003e\nFixedTimeline.tileBuilder(\n  builder: TimelineTileBuilder.connectedFromStyle(\n    contentsAlign: ContentsAlign.reverse,\n    oppositeContentsBuilder: (context, index) =\u003e Padding(\n      padding: const EdgeInsets.all(8.0),\n      child: Text('opposite\\ncontents'),\n    ),\n    contentsBuilder: (context, index) =\u003e Card(\n      child: Padding(\n        padding: const EdgeInsets.all(8.0),\n        child: Text('Contents'),\n      ),\n    ),\n    connectorStyleBuilder: (context, index) =\u003e ConnectorStyle.solidLine,\n    indicatorStyleBuilder: (context, index) =\u003e IndicatorStyle.dot,\n    itemCount: 3,\n  ),\n)\u003c/pre\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003cth colspan=\"2\"\u003eContentsAlign.alternating\u003c/th\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://raw.github.com/chulwoo-park/timelines/main/screenshots/contents_align_alternating.png\" alt=\"Alternating contents align\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cpre lang=\"dart\"\u003e\nFixedTimeline.tileBuilder(\n  builder: TimelineTileBuilder.connectedFromStyle(\n    contentsAlign: ContentsAlign.alternating,\n    oppositeContentsBuilder: (context, index) =\u003e Padding(\n      padding: const EdgeInsets.all(8.0),\n      child: Text('opposite\\ncontents'),\n    ),\n    contentsBuilder: (context, index) =\u003e Card(\n      child: Padding(\n        padding: const EdgeInsets.all(8.0),\n        child: Text('Contents'),\n      ),\n    ),\n    connectorStyleBuilder: (context, index) =\u003e ConnectorStyle.solidLine,\n    indicatorStyleBuilder: (context, index) =\u003e IndicatorStyle.dot,\n    itemCount: 3,\n  ),\n)\u003c/pre\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\n### Timeline\n\nThe timeline component has two widgets, `Timeline` similar to ScrollView and `FixedTimeline` similar to Flex.\n\nAlso their constructors are similar to ScrollView and Flex.\n\nThe main difference is that they has TimelineTheme as an ancestor.\n\nThe `tileBuilder` constructor provides more powerful features using [TimelineTileBuilder](https://pub.dev/documentation/timelines/latest/timelines/TimelineTileBuilder-class.html).\n\nIf you don't need TimelineTileBuilder, you can use other flutter widgets like ListView, Column, Row, etc.\n\nEven if you use the flutter widget, you can use TimelineTheme.\n\n\n# Documentation\n\nSee full [documentation](https://pub.dev/documentation/timelines/latest/)\n\n# Changelog\n\nSee [CHANGELOG.md](https://github.com/chulwoo-park/timelines/blob/main/CHANGELOG.md).\n\n# Code of conduct\n\nSee [CODE_OF_CONDUCT.md](https://github.com/chulwoo-park/timelines/blob/main/CODE_OF_CONDUCT.md).\n\n# License\n\n[MIT](https://github.com/chulwoo-park/timelines/blob/main/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchulwoo-park%2Ftimelines","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchulwoo-park%2Ftimelines","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchulwoo-park%2Ftimelines/lists"}