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

パッケージ、リポジトリ、アプリカテゴリを検索

パッケージをインストール