Lecle Bubble Timeline Package #

A Flutter package provide interactive timeline widget for your Flutter project. Migrate from bubble_timeline package.

This widget can be used to make Event Timelines, or Timelines for certain travel journey. This widget provides easy customisation of individual event bubbles.

Screenshots #

Installing #

To use this package:

Add the following to your pubspec.yaml file:

dependencies:
  lecle_bubble_timeline: ^0.0.1

How to use #

Simply create a BubbleTimeline widget, and pass the required params:

 BubbleTimeline(
    bubbleSize: 120,
    // List of Timeline Bubble Items
    items: [
        TimelineItem(
            title: 'Boat',
            subtitle: 'Travel through Oceans',
            icon: Icon(
                Icons.directions_boat,
                color: Colors.black,
            ),
            bubbleColor: Colors.red,
            description: 'Description for boat',
            titleStyle: TextStyle(fontSize: 25.0, fontWeight: FontWeight.w700),
            subtitleStyle: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w500),
            descriptionStyle: TextStyle(fontSize: 12.0),
        ),
        TimelineItem(
            title: 'Bike',
            subtitle: 'Road Trips are best',
            icon: Icon(
                Icons.directions_bike,
                color: Colors.black,
            ),
            bubbleColor: Colors.yellow,
            description: 'Description for bike',
            titleStyle: TextStyle(fontSize: 25.0, fontWeight: FontWeight.w700),
            subtitleStyle: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w500),
            descriptionStyle: TextStyle(fontSize: 12.0),
        ),
        TimelineItem(
            title: 'Bus',
            subtitle: 'I like to go with friends',
            icon: Icon(
                Icons.directions_bus,
                color: Colors.black,
            ),
            bubbleColor: Colors.green,
            description: 'Description for bus',
            titleStyle: TextStyle(fontSize: 25.0, fontWeight: FontWeight.w700),
            subtitleStyle: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w500),
            descriptionStyle: TextStyle(fontSize: 12.0),
        ),
    ],
    stripColor: Colors.teal,
    dividerCircleColor: Colors.white,
)        

Use TimelineItem to add items in Timeline.

TimelineItem(
    title: 'Boat',
    subtitle: 'Travel through Oceans',
    icon: Icon(
        Icons.directions_boat,
        color: Colors.black,
    ),
    bubbleColor: Colors.red,
    description: 'Description for boat',
    titleStyle: TextStyle(fontSize: 25.0, fontWeight: FontWeight.w700),
    subtitleStyle: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w500),
    descriptionStyle: TextStyle(fontSize: 12.0),
),