vertical_timeline_widget #

A customizable Timeline widget for Flutter to display chronological data with time information, titles, and visual indicators.

Features #

• 📅 Display chronological events with time, title, and content
• 🎨 Customizable colors per timeline entry
• ⚙️ Flexible theming via TimelineTheme and TimelineThemeData
• 📏 Configurable spacing, dot size, connector thickness
• 🔄 Circular or square indicator dots
• 📝 Custom text styles for time, title, and content

Screenshots #

Installation #

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

dependencies:
  vertical_timeline_widget: ^0.0.4

Usage #

Basic Usage #

import 'package:flutter/material.dart';
import 'package:vertical_timeline_widget/vertical_timeline_widget.dart';

Timeline(
  data: [
    TimelineData(
      time: Text('9:00 AM'),
      title: Text('Morning Standup'),
      content: Text('Daily team sync to discuss progress and blockers.'),
      color: Colors.green,
    ),
    TimelineData(
      time: Text('2:00 PM'),
      title: Text('Code Review'),
      content: Text('Review pull requests and provide feedback.'),
      color: Colors.blue,
    ),
  ],
);

With Custom Styling #

You can customize individual timeline properties directly:

Timeline(
  spacing: 20.0,
  dotSize: 16.0,
  rowGap: 24.0,
  color: Colors.purple,
  timeConstraints: BoxConstraints(minWidth: 80, maxWidth: 120),
  data: [
    TimelineData(
      time: Text('Jan 1'),
      title: Text('Project Kickoff'),
      content: Text('Initial meeting to discuss project scope.'),
    ),
    // More entries...
  ],
);

Using Theme #

Wrap your widget tree with TimelineThemeData to apply consistent styling:

TimelineThemeData(
  theme: TimelineTheme(
    dotSize: 16,
    spacing: 20,
    rowGap: 24,
    color: Colors.teal,
    useCircularDots: true,
    timeTextStyle: TextStyle(
      fontWeight: FontWeight.bold,
      fontSize: 14,
      color: Colors.teal,
    ),
    titleTextStyle: TextStyle(
      fontWeight: FontWeight.w700,
      fontSize: 16,
    ),
    contentTextStyle: TextStyle(
      fontSize: 14,
      color: Colors.grey[600],
    ),
  ),
  child: Timeline(
    data: [
      TimelineData(
        time: Text('9:00 AM'),
        title: Text('Morning Standup'),
        content: Text('Daily sync with the team.'),
      ),
      // More entries...
    ],
  ),
);

API Reference #

Timeline #

The main widget for displaying a vertical timeline.

TimelineData #

Data model for individual timeline entries.

TimelineTheme #

Theme configuration for Timeline widgets.

License #

This project is licensed under the MIT License.