{"id":13471138,"url":"https://github.com/JHBitencourt/timeline_tile","last_synced_at":"2025-03-26T13:30:51.486Z","repository":{"id":41103674,"uuid":"270100751","full_name":"JHBitencourt/timeline_tile","owner":"JHBitencourt","description":"A package to help build customisable timelines in Flutter.","archived":false,"fork":false,"pushed_at":"2024-08-02T08:33:22.000Z","size":15619,"stargazers_count":766,"open_issues_count":26,"forks_count":149,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-01T00:57:55.400Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/timeline_tile","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/JHBitencourt.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-06-06T20:50:25.000Z","updated_at":"2025-02-11T10:19:14.000Z","dependencies_parsed_at":"2024-10-30T01:51:54.061Z","dependency_job_id":null,"html_url":"https://github.com/JHBitencourt/timeline_tile","commit_stats":{"total_commits":20,"total_committers":2,"mean_commits":10.0,"dds":"0.19999999999999996","last_synced_commit":"b68f61bcfde1d04ddbfa9963f0a1f60ca5709c5e"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JHBitencourt%2Ftimeline_tile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JHBitencourt%2Ftimeline_tile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JHBitencourt%2Ftimeline_tile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JHBitencourt%2Ftimeline_tile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JHBitencourt","download_url":"https://codeload.github.com/JHBitencourt/timeline_tile/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245662750,"owners_count":20652074,"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","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":[],"created_at":"2024-07-31T16:00:40.386Z","updated_at":"2025-03-26T13:30:50.283Z","avatar_url":"https://github.com/JHBitencourt.png","language":"Dart","funding_links":[],"categories":["Components","组件","UI [🔝](#readme)","Dart"],"sub_categories":["UI"],"readme":"# TimelineTile\n\nA package to help build customisable timelines in Flutter.\n\n---\n\n## Example\n\n- You can access the [example](https://github.com/JHBitencourt/timeline_tile/tree/master/example) project for a Timeline Showcase.\n- The [Beautiful Timelines](https://github.com/JHBitencourt/beautiful_timelines) contains real world design examples.\n- Or try the [web demo](https://jhbitencourt.github.io/beautiful-timelines)\n\nSome use cases:\n\n\u003cdiv style=\"text-align: center\"\u003e\n    \u003ctable\u003e\n        \u003ctr\u003e\n            \u003ctd style=\"text-align: center\"\u003e\n                \u003cimg src=\"https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/gifs/showcase_timeline.gif\" width=\"200\"/\u003e\n      \u003c/br\u003e\u003cb\u003eTimeline Showcase\u003c/b\u003e\n            \u003c/td\u003e            \n            \u003ctd style=\"text-align: center\"\u003e\n                \u003cimg src=\"https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/gifs/football_timeline.gif\" width=\"200\"/\u003e\n      \u003c/br\u003e\u003cb\u003eFootball Timeline\u003c/b\u003e\n            \u003c/td\u003e\n            \u003ctd style=\"text-align: center\"\u003e\n                \u003cimg src=\"https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/gifs/activity_timeline.gif\" width=\"200\"/\u003e\n      \u003c/br\u003e\u003cb\u003eActivity Timeline\u003c/b\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd style=\"text-align: center\"\u003e\n                \u003cimg src=\"https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/gifs/success_timeline.gif\" width=\"200\"/\u003e\n      \u003c/br\u003e\u003cb\u003eSuccess Timeline\u003c/b\u003e\n            \u003c/td\u003e\n            \u003ctd style=\"text-align: center\"\u003e\n                \u003cimg src=\"https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/delivery_timeline.png\" width=\"200\"/\u003e\n  \u003c/br\u003e\u003cb\u003eDelivery Timeline\u003c/b\u003e\n            \u003c/td\u003e\n            \u003ctd style=\"text-align: center\"\u003e\n                \u003cimg src=\"https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/weather_timeline.png\" width=\"200\"/\u003e\n  \u003c/br\u003e\u003cb\u003eWeather Timeline\u003c/b\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n\t\t\t\t\u003ctr\u003e\n            \u003ctd style=\"text-align: center\"\u003e\n                \u003cimg src=\"https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/gifs/horizontal_timeline.gif\" width=\"200\"/\u003e\n      \u003c/br\u003e\u003cb\u003eHorizontal Timelines\u003c/b\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/table\u003e\n\u003c/div\u003e\n\n\n## Getting Started\n\nA Timeline consists in a group of TimelineTiles. To build a tile you can simply use:\n\n```dart\nTimelineTile()\n```\n\nWhich will build a default tile with a `vertical` axis, that aligns to the start, with a `height` of 100:\n\n![Simple Timeline](https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/simple_timeline.png)\n\nThe axis can be switched to render an `horizontal` tile, aligned to the start, with a default `width` of 100:\n\n```dart\nTimelineTile(axis: TimelineAxis.horizontal)\n```\n\n![Horizontal Simple Timeline](https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/horizontal_simple_timeline.png)\n\nThere are 4 types of alignment.\n\n- `TimelineAlign.start`\n- `TimelineAlign.end`\n- `TimelineAlign.center`\n- `TimelineAlign.manual`\n\nThe `start` and `end` alignment allows a child in their opposite sides. On the other hand, both `center` and `manual` allows children on both sides. For example, one tile with alignment to the center:\n\n```dart\nTimelineTile(\n  alignment: TimelineAlign.center,\n  endChild: Container(\n    constraints: const BoxConstraints(\n      minHeight: 120,\n    ),\n    color: Colors.lightGreenAccent,\n  ),\n  startChild: Container(\n    color: Colors.amberAccent,\n  ),\n);\n```\n\nWhen providing children to the `vertical` tile, the height will be as minimum as possible, so you can control it with a height constraint (at least minHeight). This way the tile knows how to size it properly.\n\n![Centered Tile](https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/centered_tile_with_children.png)\n\nIf the `axis` is `horizontal`, the things are the opposite. The width will be as minimum as possible, so you can control it with a width constraint (at least minWidth). This way the tile knows how to size it properly.\n\n```dart\nTimelineTile(\n  axis: TimelineAxis.horizontal,\n  alignment: TimelineAlign.center,\n  endChild: Container(\n    constraints: const BoxConstraints(\n      minWidth: 120,\n    ),\n    color: Colors.lightGreenAccent,\n  ),\n  startChild: Container(\n    color: Colors.amberAccent,\n  ),\n);\n```\n\n![Horizontal Centered Tile](https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/horizontal_centered_tile_with_children.png)\n\n### Manual aligning the idicator\n\nWith `TimelineAlign.manual` you can provide the `lineXY`, which allows you to specify a value from 0.0 to 1.0, that represents a size percentage. For example, aligning at 30% of the width or height:\n\n```dart\nTimelineTile(\n  alignment: TimelineAlign.manual,\n  lineXY: 0.3,\n  endChild: Container(\n    constraints: const BoxConstraints(\n      minHeight: 120,\n    ),\n    color: Colors.lightGreenAccent,\n  ),\n  startChild: Container(\n    color: Colors.amberAccent,\n  ),\n);\n```\n\n![Manual align indicator](https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/manual_align_indicator.png)\n\n```dart\nTimelineTile(\n  axis: TimelineAxis.horizontal,\n  alignment: TimelineAlign.manual,\n  lineXY: 0.3,\n  endChild: Container(\n    constraints: const BoxConstraints(\n      minWidth: 120,\n    ),\n    color: Colors.lightGreenAccent,\n  ),\n  startChild: Container(\n    color: Colors.amberAccent,\n  ),\n);\n```\n\n![Horizontal manual align indicator](https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/horizontal_manual_align_indicator.png)\n\n### Is it the first or the last?\n\nYou can decide if a tile is the first os the last in a timeline. This way you control whether a `before` or `after` line must be rendered.\n\n![First and last](https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/first_and_last.png)\n\n![Horizontal first and last](https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/horizontal_first_and_last.png)\n\nSee the implementation [here](https://github.com/JHBitencourt/timeline_tile/blob/master/example/lib/src/example/example_4.dart)\n\n### Start to make a timeline\n\nYou can finally start to combine some tiles to make a Timeline. The flag `hasIndicator` can control whether an indicator should or shouldn't be rendered.\n\n![Timeline](https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/start_to_make_timeline.png)\n\n![Horizontal timeline](https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/horizontal_start_to_make_timeline.png)\n\nSee the implementation [here](https://github.com/JHBitencourt/timeline_tile/blob/master/example/lib/src/example/example_5.dart)\n\n### Customize the indicator as you wish\n\nThe default indicator is a circle, and you can customize it as you wish. With `IndicatorStyle` you can change the color, the X/Y position based on values from 0.0 to 1.0 or give it a padding. You must explicitly provide its width (vertical) or height (horizontal) though.\n\n![Custom indicator](https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/customize_indicator.png)\n\n![Horizontal custom indicator](https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/horizontal_customize_indicator.png)\n\nSee the implementation [here](https://github.com/JHBitencourt/timeline_tile/blob/master/example/lib/src/example/example_6.dart)\n\n### Give an icon to the indicator\n\nWith `IconStyle` you can provide an Icon to be rendered inside the default indicator.\n\n![Icon indicator](https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/indicator_icon.png)\n\n![Horizontal icon indicator](https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/horizontal_indicator_icon.png)\n\nSee the implementation [here](https://github.com/JHBitencourt/timeline_tile/blob/master/example/lib/src/example/example_7.dart)\n\n### Or provide your custom indicator\n\nWith the indicator parameter you can customize the tile with your own indicator. However, you must control its size through both width and height parameters.\n\n![Custom indicator](https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/custom_indicator.png)\n\n![Horizontal custom indicator](https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/gifs/horizontal_custom_indicator.gif)\n\nSee the implementation [here](https://github.com/JHBitencourt/timeline_tile/blob/master/example/lib/src/example/example_8.dart)\n\n### Customize the tile's line\n\nWith `LineStyle` you can customize both `beforeLine` and `afterLine`.\n\n![Custom line](https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/custom_line.png)\n\n![Horizontal custom line](https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/horizontal_custom_line.png)\n\nSee the implementation [here](https://github.com/JHBitencourt/timeline_tile/blob/master/example/lib/src/example/example_9.dart)\n\n### Connect tiles with TimelineDivider\n\nThe `TimelineDivider` widget allows you to connect tiles that are aligned in different X/Y axis, when combined with `TimelineAlign.manual`.\n\n![Timeline divider](https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/timeline_divider.png)\n\n![Timeline divider](https://raw.githubusercontent.com/JHBitencourt/timeline_tile/master/screenshots/horizontal_timeline_divider.png)\n\nSee the implementation [here](https://github.com/JHBitencourt/timeline_tile/blob/master/example/lib/src/example/example_10.dart)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJHBitencourt%2Ftimeline_tile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJHBitencourt%2Ftimeline_tile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJHBitencourt%2Ftimeline_tile/lists"}