All Projects β†’ chulwoo-park β†’ Timelines

chulwoo-park / Timelines

Licence: mit
A powerful & easy to use timeline package for Flutter! πŸš€

Programming Languages

dart
5743 projects

Projects that are alternatives of or similar to Timelines

Kvkcalendar
A most fully customization calendar and timeline library for iOS πŸ“…
Stars: ✭ 160 (-34.96%)
Mutual labels:  timeline
Animated Timeline
πŸ”₯ Create timeline and playback based animations in React
Stars: ✭ 197 (-19.92%)
Mutual labels:  timeline
Midianimationtrack
SMF (.mid) file importer for Unity Timeline
Stars: ✭ 243 (-1.22%)
Mutual labels:  timeline
React Native Timeline Flatlist
FlatList based timeline component for React Native for iOS and Android
Stars: ✭ 163 (-33.74%)
Mutual labels:  timeline
Jquery.timeline
You can easily create the horizontal timeline with two types by using this jQuery plugin.
Stars: ✭ 179 (-27.24%)
Mutual labels:  timeline
React Chrono
πŸ•œ Modern Timeline component for React
Stars: ✭ 2,873 (+1067.89%)
Mutual labels:  timeline
Scenejs
🎬 Scene.js is JavaScript & CSS timeline-based animation library
Stars: ✭ 2,019 (+720.73%)
Mutual labels:  timeline
Stream Rails
Rails Client - Build Activity Feeds & Streams with GetStream.io
Stars: ✭ 250 (+1.63%)
Mutual labels:  timeline
React Timeline 9000
React Timeline
Stars: ✭ 184 (-25.2%)
Mutual labels:  timeline
Just Animate
Making Animation Simple
Stars: ✭ 242 (-1.63%)
Mutual labels:  timeline
Wcstimeline
Simple timeline with data model.
Stars: ✭ 165 (-32.93%)
Mutual labels:  timeline
Timeline
η€‘εΈƒζ΅εΌηš„ζ—Άι—΄θ½΄
Stars: ✭ 2,028 (+724.39%)
Mutual labels:  timeline
Mojs Timeline Editor
GUI for interactive `html`/`custom points`/`timeline` editing while crafting your animations
Stars: ✭ 215 (-12.6%)
Mutual labels:  timeline
React Timelines
React Timelines Library
Stars: ✭ 161 (-34.55%)
Mutual labels:  timeline
Timelinestoryteller
An expressive visual storytelling environment for presenting timelines on the web and in Power BI. Developed at Microsoft Research.
Stars: ✭ 244 (-0.81%)
Mutual labels:  timeline
Covid 19 Timeline
δ»₯ η€ΎδΌšε­¦εΉ΄ι‰΄ζ¨‘εΌδ½“δΎ‹θ§„θŒƒεœ°η»ŸηΌ–θ‡ͺ2019εΉ΄ζœ«θ΅·ζ–°ε† θ‚Ίη‚Žη–«ζƒ…θΏ›ε±•ηš„ζ—Άι—΄ηΊΏγ€‚
Stars: ✭ 1,887 (+667.07%)
Mutual labels:  timeline
Iky
OSINT Project
Stars: ✭ 203 (-17.48%)
Mutual labels:  timeline
Chataigne
Artist-friendly Modular Machine for Art and Technology
Stars: ✭ 251 (+2.03%)
Mutual labels:  timeline
Mojs Player
GUI player to control your animations
Stars: ✭ 243 (-1.22%)
Mutual labels:  timeline
Life
Life - a timeline of important events in my life
Stars: ✭ 2,627 (+967.89%)
Mutual labels:  timeline

banner

Pub License: MIT

A powerful & easy to use timeline package for Flutter! πŸš€

Caveat: This package is an early stage. Not enough testing has been done to guarantee stability. Some APIs may change.

Examples

Check it out on the web or look at the source code.

Timeline status Package delivery tracking Process timeline
timeline_status package_delivery_tracking.gif process_timeline.gif

More examples
🚧 WIP 🚧

Features

The timeline and each components are all WIDGET.

  • Common styles can be easily implemented with predefined components.
  • Vertical, horizontal direction.
  • Alternating contents.
  • Combination with Flutter widgets(Row, Column, CustomScrollView, etc).
  • Customize each range with themes.

Getting started

Installation

1. Depend on it

Add this to your package's pubspec.yaml file:

dependencies:
  timelines: ^[latest_version]

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:timelines/timelines.dart';

Basic Usage

@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,
    ),
  );
}

Check the Example or the API reference for more details.

Components

Theme

Check out Theme Demo to see how the values inside TimelineTile work with the theme.

To customize the timeline component with a theme, do the following:

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

If you only want to change part of the parent theme, use TimelineTheme.of(context):

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

If the component you want to customize is Timeline or FixedTimeline, this is also possible:

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

Indicator

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

Connector

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

Pure timeline UI component with no content.

The TimelineNode contains an indicator and two connectors on both sides of the indicator:

Simple TimelineNode
Simple TimelineNode
SizedBox(
  height: 50.0,
  child: TimelineNode.simple(),
)
Complex 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

Displays content on both sides of the node:

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 provides powerful build features.

Connection

Each tile draws only half of the line connecting the neighboring tiles. Using the connected constructor, lines connecting adjacent tiles can build as one index.

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

This value determines how the contents of the timeline will be built:

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,
  ),
)

Timeline

The timeline component has two widgets, Timeline similar to ScrollView and FixedTimeline similar to Flex.

Also their constructors are similar to ScrollView and Flex.

The main difference is that they has TimelineTheme as an ancestor.

The tileBuilder constructor provides more powerful features using TimelineTileBuilder.

If you don't need TimelineTileBuilder, you can use other flutter widgets like ListView, Column, Row, etc.

Even if you use the flutter widget, you can use TimelineTheme.

Documentation

See full documentation

Changelog

See CHANGELOG.md.

Code of conduct

See CODE_OF_CONDUCT.md.

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].