How do I create a horizontal timeline with the timelines package?

Use the horizontal direction support in Timeline or FixedTimeline widgets, as mentioned in the flexible layouts feature. You can combine it with Row or adjust the builder patterns for horizontal alignment.

Timelines package vs flutter_timeline: which one should I use?

Timelines offers more customization with its widget-based architecture and theme system, while flutter_timeline might be simpler for basic needs. Choose Timelines if you need fine-grained control over indicators and connectors, but prefer alternatives for drop-in simplicity.

How to customize the connector style between timeline items?

Use ConnectorStyle builders in TimelineTileBuilder or directly set connectors like DashedLineConnector, as demonstrated in the connector section with code examples for SolidLineConnector and DecoratedLineConnector.

Is the timelines package ready for production apps?

Due to its early stage warning, it's best for prototypes or projects that can handle API changes. Check the changelog for updates and consider testing thoroughly in your environment before deployment.

Can I use timelines with dynamic data from an API?

Yes, TimelineTileBuilder is designed for dynamic item counts, allowing you to build timelines based on data sources. Use the itemCount parameter and contentsBuilder to map data to timeline events.

What are the system requirements for using timelines?

It requires Flutter and Dart, with no additional dependencies beyond standard Flutter widgets. Ensure your Flutter version is compatible with the latest package release from pub.dev.

How to add animations to timeline indicators?

The package focuses on static components, so you'd need to wrap indicators like DotIndicator with Flutter's animation widgets (e.g., AnimatedContainer) or request animation features from the developer, as it's not built-in.

Open-Awesome

Timelines

MITDart0.1.0

A powerful and easy-to-use Flutter package for building customizable vertical and horizontal timelines.

Visit Website GitHub

800 stars234 forks0 contributors

What is Timelines?

Timelines is a Flutter package that provides a collection of widgets for building customizable vertical and horizontal timelines. It solves the problem of creating timeline-based UIs—such as order tracking, process steps, or event histories—by offering pre-built components and a flexible theme system. Developers can easily implement common timeline patterns while retaining full control over appearance and behavior.

Target Audience

Flutter developers building mobile or web applications that require timeline visualizations, such as delivery tracking apps, project management tools, or onboarding flows.

Value Proposition

It offers a balance of power and simplicity with its widget-based architecture, extensive customization options, and seamless integration with Flutter's layout system, reducing the need to build timeline components from scratch.

Overview

A powerful & easy to use timeline package for Flutter! 🚀

Use Cases

Best For

Building delivery tracking interfaces in e-commerce apps
Creating process or onboarding step visualizations
Displaying chronological event histories in social or news apps
Implementing project management timelines with status indicators
Developing educational apps with sequential lesson flows
Visualizing order status updates in food delivery or logistics apps

Not Ideal For

Production applications requiring long-term stability and no breaking changes
Projects needing complex, interactive animations beyond static or basic connector styles
Teams wanting out-of-the-box, pre-styled timeline components with minimal configuration effort
Non-Flutter projects, as it's tightly coupled with the Flutter ecosystem

Pros & Cons

Pros

Widget-Based Composability

All timeline components are Flutter widgets, allowing seamless integration with standard layouts like Row, Column, and CustomScrollView, as highlighted in the features section.

Deep Customization via Themes

TimelineThemeData enables global or per-component styling, with examples for indicators like DotIndicator and connectors such as DashedLineConnector, providing fine-grained control.

Flexible Layout Directions

Supports both vertical and horizontal timelines with options like ContentsAlign.alternating, demonstrated in the web examples and screenshots.

Dynamic Builder Patterns

TimelineTileBuilder simplifies creating timelines from dynamic data, with connection handling and alignment controls, as shown in the builder patterns section.

Comprehensive Documentation

Offers live web demos, detailed API references, and component-specific code snippets, making it easy to learn and implement.

Cons

Early Stage Instability

The README includes a caveat warning of insufficient testing and potential API changes, making it risky for production use without careful versioning.

Complex Setup for Simplicity

For very basic timelines, the extensive component hierarchy and theme system might be overkill compared to crafting a simple custom widget in Flutter.

Limited Built-in Animations

Focuses on static or basic connectors; implementing advanced animations would require additional Flutter animation work, not covered in the package.

Frequently Asked Questions

Related Projects

Flyer Chat

Free and open-source chat SDK. Build fast, real-time apps and generative AI agents with a high-performance, customizable, cross-platform UI.

Stars2,369

Forks862

Last commit28 days ago

Flutter Neumorphic

A complete, ready to use, Neumorphic ui kit for Flutter, 🕶️ dark mode compatible

Stars2,192

Forks414

Last commit2 years ago

Smooth Page Indicator

Flutter Smooth PageView indicators

Stars1,458

Forks163

Last commit2 months ago

Liquid Pull To Refresh

🔁 A custom refresh indicator for flutter.

Stars1,298

Forks90

Last commit3 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub