Timeline editor for flutter

Overview

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

Comments
  • Support to larger durations

    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?

    enhancement 
    opened by nipunasudha 5
  • Custom timeline labels using a transformation method

    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();
      }
    );
    
    opened by nipunasudha 3
  • Large amount of debug logs on zooming

    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.

    image

    Here is the code responsible for this in the source.

    image

    opened by nipunasudha 2
  • Customizable timelineeditortrack action icons

    Customizable timelineeditortrack action icons

    This PR fixes issue #9

    I added ability to add custom icons for tile menu and both drag ends. Since it have to have colour set to black in order to works, it was logical to add also border colour setting in same PR.

    All those extra parameters are optional and if not set, it will reverts to original behaviour.

    opened by argorain 1
  • Fix out-of-range error at TimelineEditorTrack setup

    Fix out-of-range error at TimelineEditorTrack setup

    This PR fixes #12

    When empty boxes list is provided, it ends with out-of-range error when accesses element at position 0. Extra condition is added to fix that.

    opened by argorain 0
  • Possible integration with video_player package

    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.

    opened by ingvilow 2
  • Customizable TimelineEditorTrack action icons

    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.

    opened by argorain 3
  • Optionally sticky leading widgets on tracks

    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.

    timeline_leading_widget_idea

    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'),
      ),
    );
    
    enhancement 
    opened by nipunasudha 4
  • Zoom amount is not enough when using with large durations

    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.

    Screenshot_20200528-144638_Project_Manager_Dev

    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.

    enhancement In progress 
    opened by nipunasudha 4
Releases(0.3.4)
  • 0.3.4(May 29, 2020)

    Fix

    Enhancements

    • You can now provide your custom time widget (Request 3):
    TimelineEditor(
      timeWidgetExtent: 100,
      timeWidgetBuilder: (d, t) => Padding(
                padding: const EdgeInsets.only(left: 8.0),
                child: Text(
                  '${d.inSeconds}/${t.inSeconds}',
                  overflow: TextOverflow.ellipsis,
                ),
              ),
    
    Source code(tar.gz)
    Source code(zip)
Owner
Arnaud Jezequel
Arnaud Jezequel
Flutter Date Picker Library that provides a calendar as a horizontal timeline

Flutter Date Picker Library that provides a calendar as a horizontal timeline.

Vivek Kaushik 214 Jan 7, 2023
Calendar widget for flutter

Calendar Shows a scrolling calendar list of events. This is still relatively basic, it always assumes that the getEvents returns the entire list of ca

null 223 Dec 19, 2022
Calendar widget for flutter that is swipeable horizontally. This widget can help you build your own calendar widget highly customizable.

flutter_calendar_carousel Calendar widget for flutter that is swipeable horizontally. This widget can help you build your own calendar widget highly c

dooboolab 750 Jan 7, 2023
Highly customizable, feature-packed calendar widget for Flutter

Table Calendar Highly customizable, feature-packed Flutter Calendar with gestures, animations and multiple formats. Table Calendar with custom styles

Aleksander Woźniak 1.5k Jan 7, 2023
a time planner for flutter to show task on table

A beautiful, easy to use and customizable time planner for flutter mobile ?? , desktop ?? and web ??

Mohammad Jamalianpour 150 Dec 21, 2022
A Flutter package for using Jalali (Shamsi, Solar, Persian or Jalaali) calendar. You can convert, format and manipulate Jalali and Gregorian (Miladi) dates.

A Flutter package for using Jalali (Shamsi, Solar, Persian or Jalaali) calendar. You can convert, format and manipulate Jalali and Gregorian (Miladi) dates.

Amirreza Madani 63 Dec 21, 2022
A Flutter package for adding a DateRange widget into a form. A date picker UX is provided by showDateRangePicker.

A Flutter package for adding a DateRange widget into a form. A date picker UX is provided by showDateRangePicker.

JMA Consulting 9 Mar 12, 2022
Flutter Cupertino Date Picker

Flutter Cupertino Date Picker [pub packages] | 中文说明 Flutter cupertino date picker. Usage 1. Depend Add this to you package's pubspec.yaml file: depend

Ryuuzaki 0 Nov 9, 2021
Easy to use and beautiful calendar strip component for Flutter.

Flutter Calendar Strip Easy to use and beautiful calendar strip component for Flutter. Awesome celender widget If this project has helped you out, ple

Siddharth V 176 Dec 14, 2022
A Flutter package allows you to easily implement all calendar UI and calendar event functionality. 👌🔝🎉

calendar_view A Flutter package allows you to easily implement all calendar UI and calendar event functionality. For web demo visit Calendar View Exam

Simform Solutions 219 Dec 22, 2022
Calendar widget library for Flutter apps.

Calendarro Calendar widget library for Flutter apps. Offers multiple ways to customize the widget. Getting Started Installation Add dependency to your

Adam Styrc 97 Nov 30, 2022
Flutter package to create a day date scroller

scrolling_day_calendar A flutter calendar package to allow users to scroll through given dates either by swiping left and right or pressing the arrows

null 8 Jul 12, 2020
Flutter Inline Calendar

inline_calendar An inline calendar flutter package inspired by outlook app. It also supports Jalali/Shamsi calendar. Uses theme and locale of context

omid habibi 3 Oct 21, 2022
A calendar widget for Flutter.

flutter_calendar A calendar widget for Flutter Apps. Borrowed DateTime utility functions from the Tzolkin Calendar web element. Usage Add to your pubs

AppTree Software, Inc 336 Sep 6, 2022
Flutter calendar app. register schedule and manage in calendar ui.

flutter calendar app. register schedule and manage in calendar ui. save schedule data in firestore. and create widget and read schedule from firestore in widget.

akiho 11 Oct 30, 2022
A persian (farsi,shamsi) datetime picker for flutter, inspired by material datetime picker.

?? A persian (farsi,shamsi) datetime picker for flutter, inspired by material datetime picker. Persian datetime picker inspired by material datetime p

Persian Flutter Community 142 Dec 19, 2022
Flutter calendar week UI package

Flutter calendar week Flutter calendar week UI package IOS | Android: import 'package:flutter_calendar_week/flutter_calendar_week.dart'; CalendarWeek(

null 67 Dec 12, 2022
Datetime picker formfield - A Flutter widget that wraps a TextFormField and integrates the date and/or time picker dialogs.

DateTimeField A TextFormField that emits DateTimes and helps show Material, Cupertino, and other style picker dialogs. Example See the example tab (ex

Jacob Phillips 182 Dec 1, 2022
A flutter date time picker

Flutter Datetime Picker (Pub) flutter_datetime_picker A flutter date time picker inspired by flutter-cupertino-date-picker you can choose date / time

Realank 559 Dec 26, 2022