bubble_timeline

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

BubbleTimeline 是一个 Flutter 小部件，旨在创建交互式、可自定义的时间轴界面。它允许开发者将事件显示为可轻松样式化和排列的动画气泡。每个气泡都支持自定义内容、颜色和交互，非常适合可视化项目里程碑、历史事件或用户活动日志等序列。该小部件轻量且灵活，可通过 pub.dev 轻松集成。其简洁的 API 可实现快速设置，同时不牺牲设计控制权。

适合场景

显示项目时间线
可视化历史事件
显示用户活动流
逐步展示流程
创建交互式叙事界面

主要特点

可自定义的事件气泡
交互式触摸反馈
轻松的样式选项
平滑动画
灵活的布局控制
支持垂直和水平方向

适合对象

开发基于时间线的应用程序的开发者
需要交互式 UI 组件的设计人员
需要事件可视化的应用
教育或作品集应用
具有顺序数据展示的项目

使用建议

有限的平台特定优化
无内置日期格式化
需要手动处理大型数据集
未针对超长时间轴进行优化
可能需要额外的逻辑来处理动态更新

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Bubble Timeline Package

A Flutter Widget to make interactive timeline widget.

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:
    bubble_timeline: ^1.0.5

How to Use

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

 BubbleTimeline(
    bubbleDiameter: 120,
    // List of Timeline Bubble Items
    items: [
        TimelineItem(
            title: 'Boat',
            subtitle: 'Travel through Oceans',
            child: Icon(
                Icons.directions_boat,
                color: Colors.white,
            ),
            bubbleColor: Colors.grey,
        ),
        TimelineItem(
            title: 'Bike',
            subtitle: 'Road Trips are best',
            child: Icon(
                Icons.directions_bike,
                color: Colors.white,
            ),
            bubbleColor: Colors.grey,
        ),
        TimelineItem(
            title: 'Bus',
            subtitle: 'I like to go with friends',
            child: Icon(
                Icons.directions_bus,
                color: Colors.white,
            ),
            bubbleColor: Colors.grey,
        ),
    ],
    stripColor: Colors.teal,
    scaffoldColor: Colors.white,
)

Use TimelineItem to add items in Timeline.

TimelineItem(
    title: 'Title',
    subtitle: 'Subtitle',
    description: 'Description',
    child: Icon(
        Icons.directions_bus,
    ),
    bubbleColor: Colors.blue,
),

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

CONTRIBUTORS

Vansh Goel

搜索插件、代码仓与 APP 分类

安装插件