Paketdetailsv0.1.0

timelines

Ein leistungsstarkes und einfach zu verwendendes Timeline-Paket für Flutter. Alle Benutzeroberflächenkomponenten in diesem Paket sind separate Widgets.

pub.dev API-Dokumentation Quellcode

30-Tage-Downloads: 8320
Likes: 1760
Pub-Punkte: 70

Paket installieren

flutter pub add timelines

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Das timelines-Paket ist eine flexible und benutzerfreundliche Flutter-Bibliothek, die zur Erstellung anpassbarer Zeitachsen-UIs entwickelt wurde. Es bietet modulare, eigenständige Widgets, mit denen Entwickler komplexe Zeitachsen problemlos erstellen können. Jeder Baustein – wie Zeitachsen-Elemente, Verbindungsstücke und Indikatoren – wird als separates Widget implementiert, was eine fein abgestimmte Kontrolle über Layout und Styling ermöglicht. Ideal für die Darstellung chronologischer Daten wie Projektfortschritt, Ereignisgeschichten oder Prozessabläufe, unterstützt es sowohl vertikale als auch horizontale Ausrichtungen. Das Paket legt Wert auf Einfachheit und Erweiterbarkeit und eignet sich daher hervorragend für Apps, die saubere, interaktive Zeitachsen benötigen.

Anwendungsfälle

Projektmeilensteine anzeigen
Ereignisverlauf in Apps anzeigen
Schritt-für-Schritt-Prozesse visualisieren
Onboarding-Sequenzen erstellen
Darstellung historischer Daten
Aufgabenverfolgungs-Schnittstellen erstellen

Hauptmerkmale

Modulare Widget-Komponenten
Unterstützung für vertikale und horizontale Layouts
Anpassbare Verbindungsstücke und Indikatoren
Einfache Integration in bestehende Flutter-Apps
Erweiterbares Design für benutzerdefinierte Stile
Leichte und fokussierte Funktionalität

Geeignet für

Entwickler, die chronologisch basierte Benutzeroberflächen erstellen
Apps, die eine visuelle Fortschrittsverfolgung benötigen
Bildungs- oder Produktivitätsanwendungen
Onboarding- oder Tutorials-Felder
Designer, die wiederverwendbare Zeitachsen-Elemente wollen

Hinweise

eingebaute Animationen begrenzt
Keine automatische Elementausrichtungsbearbeitung
Benötigt manuelle Layout-Verwaltung
Nicht für sehr lange Zeitachsen optimiert
Keine Unterstützung für Touch-Gesten bei Elementen
Am besten geeignet für statische oder einfache dynamische Zeitleisten

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

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

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.

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( child: Container( width: 15.0, height: 15.0, color: Colors.blue, ), )
DotIndicator
	DotIndicator()
OutlinedDotIndicator
	OutlinedDotIndicator()

Connector

SolidLineConnector
	SizedBox( height: 20.0, child: SolidLineConnector(), )
DashedLineConnector
	SizedBox( height: 20.0, child: DashedLineConnector(), )
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
	SizedBox( height: 50.0, child: TimelineNode.simple(), )
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(), ), )

Simple TimelineNode

SizedBox(
  height: 50.0,
  child: TimelineNode.simple(),
)

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

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

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

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