timeline_tile 0.1.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 95

TimelineTile #

A package to help build customisable timelines in Flutter.


Example #

Some use cases:


Timeline Showcase

Football Timeline

Activity Timeline

Success Timeline

Delivery Timeline

Weather Timeline

Getting Started #

A Timeline consists in a group of TimelineTiles. To build a tile you can simply use:

TimelineTile()

This will build a default tile that aligns to the left, with a height of 100:

Simple Timeline

There are 4 types of alignment.

  • TimelineAlign.left
  • TimelineAlign.right
  • TimelineAlign.center
  • TimelineAlign.manual

The left and right 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 widh alignment to the center:

TimelineTile(
  alignment: TimelineAlign.center,
  rightChild: Container(
    constraints: const BoxConstraints(
      minHeight: 120,
    ),
    color: Colors.lightGreenAccent,
  ),
  leftChild: Container(
    color: Colors.amberAccent,
  ),
);

When providing children to the 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.

Centered Tile

Manual aligning the idicator #

With TimelineAlign.manual you can provide the lineX, which allows you to specify a value from 0.0 to 1.0, that represents a widht percentage. For example, aligning at 30% of the widht:

TimelineTile(
  alignment: TimelineAlign.manual,
  lineX: 0.3,
  rightChild: Container(
    constraints: const BoxConstraints(
      minHeight: 120,
    ),
    color: Colors.lightGreenAccent,
  ),
  leftChild: Container(
    color: Colors.amberAccent,
  ),
);

Manual align indicator

Is it the first or the last? #

You can decide if a tile is the first os the last in a timeline. This way you control whether a top or bottom line must be rendered.

First and last

See the implementation here

Start to make a timeline #

You 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.

Timeline

See the implementation here

Customize the indicator as you wish #

The default indicator is a circle, and you can customize it as you wish. With IndicatorStyle you can change the color, the Y position based on values from 0.0 to 1.0 or give it a padding. You must explicitly provide its width though.

Custom indicator

See the implementation here

Give an icon to the indicator #

With IconStyle you can provide an Icon to be rendered inside the default indicator.

Icon indicator

See the implementation here

Or provide your custom indicator #

With the indicator parameter you can customize the tile with your own indicator. However, you must control its size through both width and height parameters.

Custom indicator

See the implementation here

Customize the tile's line #

With LineStyle you can customize both topLine and bottomLine.

Custom line

See the implementation here

Connect tiles with TimelineDivider #

The TimelineDivider widget allows you to connect tiles that are aligned in different X axis, when combined with TimelineAlign.manual.

Timeline divider

See the implementation here

[0.1.2] #

  • Fixed assets from example 8

[0.1.1] #

  • Health changes to the package

[0.1.0] #

  • Initial release

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_fonts/google_fonts.dart';

import 'src/showcase_timeline_tile.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TimelineTile Showcase',
      theme: ThemeData(
        brightness: Brightness.dark,
        textTheme: GoogleFonts.nanumPenScriptTextTheme(
          Theme.of(context).textTheme,
        ).apply(bodyColor: Colors.white),
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: ShowcaseTimelineTile(),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  timeline_tile: ^0.1.2

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:timeline_tile/timeline_tile.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
89
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
95
Learn more about scoring.

We analyzed this package on Jul 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • timeline_tile that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test