neckaros / timeline_editor

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

timeline_editor's Issues

Customizable TimelineEditorTrack action icons

Hi!

I see there is lot of new stuff in master (thank you!) and one of them are action icons for dragging, scaling and menu. Frankly, it took me just too long to figure it out. It's due drag action icon is same as scale action icon. I couldn't find how to drag box and had to debug it to see what I am doing wrong. Maybe just replacing it with https://material.io/resources/icons/?search=drag&icon=drag_indicator&style=baseline would be enough.

See it before and after

I think there should be some way how to modify those icons to match general app look and feel and right now there is only way modify plugin sources directly. If you decide not to give users this level of control, then we should at least fix those icons.

Thank you and keep up doing great job!

Vojtech

P.S. I can do those modifications and submit PR if we agree to do them.

Large amount of debug logs on zooming

Zooming the timeline prints out a large number of log lines in the console. And this impacts the framerate of the zooming animation.

Here is the code responsible for this in the source.

How to set the maximum zoom ratio ？

How to know the distance the slider slides to the left

Too fast movement when dragged at onMovedStart

When you zoom in timeline and try drag it by onMovedStart, it moves too fast.

I have fix ready, I'll prepare PR today.

Support to larger durations

The plugin is so awesome, thanks a lot for this. Is there a way for me to use this with longer durations like weeks, months? Can you make durationInSeconds field little more flexible where I can pass in a Duration object?

Custom timeline labels using a transformation method

I have a requirement to display dates like 12/04/2020 instead of the current label format displayed from 0 to 14w5d. So to generalize this, can you give an option to provide a transformation method?

Here is an usage example for the concept:

TimelineEditor(
  timelineTextTransformer: (Duration duration){
    // I can return a custom string based on the duration value
    return startDate.add(duration).toString();
  }
);

Null Safety

• When will a null safe version be out?

Zoom amount is not enough when using with large durations

When the total duration of the timeline is about 200 days, this is the maximum zoom possible.

Is there any way I can provide max & min zoom levels?

Note:
I noticed a pixelPerSeconds measure throughout the plugin source. Would that be an appropriate measure for larger durations? Could it introduce problems due to double accuracy?

Edit:
Oh wait, there is no zoom limit. I can zoom more and more, but each time I zoom, it zooms less and less. At the end it gets really laggy and I have to do the zoom gesture multiple times to zoom even a little bit. And the app freezes after that.

I don't know the reason for this, but if the reason is Flutter being overwhelmed by the length of the TimelineEditorBox, you may have to render only the part of the TimelineEditorBox that is visible by dynamically resizing the Box just enough to cover the visible width. When the user scrolls, the box size & position should readjust.

A double variable reaching 0 or Inf could also be the reason for this behavior.

Crash when empty boxes list provided

When you create timeline with initialised list but no elements, it results in access to null element.

I have fix for this as well, PR is on way.

Optionally sticky leading widgets on tracks

I have another suggestion of placing a leading sticky widget on each track & the timeline like this. The widgets can either be scrolled away with the tracks, or it can be sticky too.

The width of the leading widgets must be provided (assert) to the TimelineEditor like this, if the user provides at least one leading widget.

TimelineEditor(
  leadingWidgetWidth: 100,
  stickyLeadingWidgets: true,
  timelineLeadingWidget: Text('I lead timeline'),
  trackBuilder: (track, pps, duration) => TimelineEditorTrack(
    leadingWidget: Text('I lead this track'),
  ),
);

how to update to dart 3 ?

how to update to dart 3 ?

Possible integration with video_player package

Hi. Sorry for interrupting and asking lame question, but I would like to know if there is the possible way to integrate your plugin with video_player package? I need to create the timeline under the playing video and give user the opportunity to choose the timestamp.

Thanks you.