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 #

Timeline Widget #

Steps Widget #

VerticalStepper Widget #

Installation #

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

dependencies:
  vertical_timeline_widget: ^0.0.7

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.

Steps #

A vertical step progression widget with numbered indicators and connectors. Ideal for showing progress through multi-step processes, tutorials, or workflows.

Steps(
  children: [
    StepItem(
      title: Text('Create Account'),
      content: [Text('Sign up with your email address')],
    ),
    StepItem(
      title: Text('Verify Email'),
      content: [Text('Check your inbox for verification')],
    ),
    StepItem(
      title: Text('Complete Profile'),
      content: [Text('Add your personal information')],
    ),
  ],
)

StepItem #

A helper widget for step content, displaying a title and content items.

VerticalStepper #

A multi-step navigation component with visual progress indication. Supports both horizontal and vertical layouts with customizable visual styles.

final controller = StepperController();

VerticalStepper(
  controller: controller,
  direction: Axis.vertical,
  variant: StepVariant.circle,
  size: StepSize.medium,
  steps: [
    StepData(
      title: Text('Personal Info'),
      contentBuilder: (context) => PersonalInfoForm(),
    ),
    StepData(
      title: Text('Address'),
      contentBuilder: (context) => AddressForm(),
    ),
    StepData(
      title: Text('Confirmation'),
      contentBuilder: (context) => ConfirmationView(),
    ),
  ],
)

StepperController #

Controller for managing stepper state and navigation.

StepData #

Data model for individual stepper steps.

License #

This project is licensed under the MIT License.