A simple timeline editor for flutter

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