搜索插件、代码仓与 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

所属分类

源码仓库

使用此插件的项目

暂无相关数据。