搜尋套件、儲存庫與 APP 分類

套件詳情v0.3.4

timeline_editor

一個 Flutter 小部件,幫助您管理時間線(如影片時間線),支援可編輯或不可編輯的軌道,以及移動、操作等...

近 30 天下載
47
喜歡數
41
Pub 分數
30

安裝套件

flutter pub add timeline_editor

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

一個專為管理類似影片編輯介面的時間軸而設計的 Flutter 小部件,支援可編輯或鎖定的多軌道。它能實現直覺的操作,例如移動、新增和管理時間軸動作。適用於需要在軌道層級進行視覺時間軸操作的應用程式。此套件專為多媒體編輯工作流程打造,並能順暢整合至 Flutter 應用中。支援動態軌道管理與使用者驅動的時間軸操作。

適用情境

  • 影片編輯介面
  • 音頻時間線管理
  • 互動式簡報工具
  • 動畫序列編輯器
  • 教育時間軸建構器
  • 多媒體專案規劃

主要特色

  • 可編輯和不可編輯的軌道
  • 拖曳並放置時間軸移動
  • 基於軌道的時間線組織
  • 支援時間線操作
  • 可自訂的時間軸 UI
  • 即時時間軸更新

適合對象

  • 開發媒體編輯應用的開發者
  • 教育工作者創建互動式時間線
  • 需要時間線視覺化的應用創作者
  • 致力於創意內容平台的團隊
  • 需要精確時間軸控制的使用者

使用建議

  • 需要仔細的狀態管理
  • 可能需要對長時間軸進行效能優化
  • 有限的平台特定整合
  • 最適合中等複雜度的時間線
  • 依賴外部倉儲進行更新
  • 無內建匯出功能

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

timeline_editor

Early version of a timeline editor. Support:

  • Move of element
  • Context menu
  • Zoom of timeline
  • Progress indicator
  • track boxes
  • continuous tracks
  • scrub

Usage

Installation

Add timeline_editor as a dependency in your pubspec.yaml file (what?).

Import

Import timeline_editor:

import 'package:timeline_editor/timeline_editor.dart';
Migrate from V2 to V3

We now use Duration instead of seconds. To migrate you can use the helper functions to transform your seconds to Duration:

Duration durationFromSeconds(double seconds)
double durationToSeconds(Duration duration)
widgets

See example


TimelineEditor(
                  positionStream: positionStream,
                  onPositionTap: (s) => position = s,
                  countTracks: 2,
                  trackBuilder: (track, pps, duration) => track == 1
                      ? TimelineEditorTrack(
                          defaultColor: Colors.green[700],
                          boxes: [
                            TimelineEditorBox(box1Start, 100,
                                onMoved: updateBox1,
                                color: Colors.blue,
                                onMovedEnd: () => print('end moved')),
                            TimelineEditorBox(157, 80),
                          ],
                          pixelsPerSeconds: pps,
                          duration: duration,
                        )
                      : TimelineEditorTrack.fromContinuous(
                          continuousBoxes:[
                            TimelineEditorContinuousBox(
                                Duration.zero,
                                color: Colors.deepOrange,
                                child: const Image(image: const AssetImage('assets/image2.jpg')),
                            ),
                            TimelineEditorContinuousBox(
                                box2Start,
                                menuEntries: [
                                PopupMenuItem<String>(child: Text('Delete'), value: 'deleted')
                                ],
                                onMoved: updateBox2,
                                onSelectedMenuItem: (v) {
                                print('Selected: $v');
                                setState(() {
                                    deleted = true;
                                });
                                },
                                onTap: (start, duration) =>
                                    print('tapped for $start to ${start + duration}'),
                                color: Colors.black,
                                child: const Image(image: const AssetImage('assets/image.jpg')),
                            ),
                            ],
                          pixelsPerSeconds: pps,
                          duration: duration,
                        ),
                  duration: Duration(seconds: 300),
                ))

TimelineEditor

Main widget used to hold your tracks, display position and time

TimelineEditorTrack

A provided track to use with the TimelineEditor track builder (you can use your own)

It can either hold simple TimelineEditorBox with a start and an end

or TimelineEditorTrack.fromContinuous with TimelineEditorContinuousBox to have a conitunuous track where you only set start time and duration will be calculated so the box go up to the next box

Example

/example

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。