diff --git a/.fvm/fvm_config.json b/.fvm/fvm_config.json
new file mode 100644
index 0000000..e44645b
--- /dev/null
+++ b/.fvm/fvm_config.json
@@ -0,0 +1,4 @@
+{
+  "flutterSdkVersion": "3.3.0",
+  "flavors": {}
+}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index e9dc58d..09a7848 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,5 @@
 .pub/
 
 build/
+
+.fvm/flutter_sdk
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..7c1c3d2
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+		"dart.flutterSdkPath": ".fvm/flutter_sdk"
+
+}
\ No newline at end of file
diff --git a/analysis_options.yaml b/analysis_options.yaml
new file mode 100644
index 0000000..61b6c4d
--- /dev/null
+++ b/analysis_options.yaml
@@ -0,0 +1,29 @@
+# This file configures the analyzer, which statically analyzes Dart code to
+# check for errors, warnings, and lints.
+#
+# The issues identified by the analyzer are surfaced in the UI of Dart-enabled
+# IDEs (https://dart.dev/tools#ides-and-editors). The analyzer can also be
+# invoked from the command line by running `flutter analyze`.
+
+# The following line activates a set of recommended lints for Flutter apps,
+# packages, and plugins designed to encourage good coding practices.
+include: package:flutter_lints/flutter.yaml
+
+linter:
+  # The lint rules applied to this project can be customized in the
+  # section below to disable rules from the `package:flutter_lints/flutter.yaml`
+  # included above or to enable additional rules. A list of all available lints
+  # and their documentation is published at
+  # https://dart-lang.github.io/linter/lints/index.html.
+  #
+  # Instead of disabling a lint rule for the entire project in the
+  # section below, it can also be suppressed for a single line of code
+  # or a specific dart file by using the `// ignore: name_of_lint` and
+  # `// ignore_for_file: name_of_lint` syntax on the line or in the file
+  # producing the lint.
+  rules:
+    # avoid_print: false  # Uncomment to disable the `avoid_print` rule
+    # prefer_single_quotes: true  # Uncomment to enable the `prefer_single_quotes` rule
+
+# Additional information about this file can be found at
+# https://dart.dev/guides/language/analysis-options
diff --git a/example/.fvm/flutter_sdk b/example/.fvm/flutter_sdk
new file mode 120000
index 0000000..149e992
--- /dev/null
+++ b/example/.fvm/flutter_sdk
@@ -0,0 +1 @@
+C:/Users/josec/fvm/versions/3.3.0
\ No newline at end of file
diff --git a/example/.fvm/fvm_config.json b/example/.fvm/fvm_config.json
new file mode 100644
index 0000000..e44645b
--- /dev/null
+++ b/example/.fvm/fvm_config.json
@@ -0,0 +1,4 @@
+{
+  "flutterSdkVersion": "3.3.0",
+  "flavors": {}
+}
\ No newline at end of file
diff --git a/example/.metadata b/example/.metadata
index 01d2dcb..8a8e99b 100644
--- a/example/.metadata
+++ b/example/.metadata
@@ -1,10 +1,30 @@
 # This file tracks properties of this Flutter project.
 # Used by Flutter tool to assess capabilities and perform upgrades etc.
 #
-# This file should be version controlled and should not be manually edited.
+# This file should be version controlled.
 
 version:
-  revision: 0b8abb4724aa590dd0f429683339b1e045a1594d
+  revision: ffccd96b62ee8cec7740dab303538c5fc26ac543
   channel: stable
 
 project_type: app
+
+# Tracks metadata for the flutter migrate command
+migration:
+  platforms:
+    - platform: root
+      create_revision: ffccd96b62ee8cec7740dab303538c5fc26ac543
+      base_revision: ffccd96b62ee8cec7740dab303538c5fc26ac543
+    - platform: web
+      create_revision: ffccd96b62ee8cec7740dab303538c5fc26ac543
+      base_revision: ffccd96b62ee8cec7740dab303538c5fc26ac543
+
+  # User provided section
+
+  # List of Local paths (relative to this file) that should be
+  # ignored by the migrate tool.
+  #
+  # Files that are not part of the templates will be ignored by default.
+  unmanaged_files:
+    - 'lib/main.dart'
+    - 'ios/Runner.xcodeproj/project.pbxproj'
diff --git a/example/android/.gitignore b/example/android/.gitignore
index bc2100d..6f56801 100644
--- a/example/android/.gitignore
+++ b/example/android/.gitignore
@@ -5,3 +5,9 @@ gradle-wrapper.jar
 /gradlew.bat
 /local.properties
 GeneratedPluginRegistrant.java
+
+# Remember to never publicly share your keystore.
+# See https://flutter.dev/docs/deployment/android#reference-the-keystore-from-the-app
+key.properties
+**/*.keystore
+**/*.jks
diff --git a/example/android/app/build.gradle b/example/android/app/build.gradle
index b5e2f0f..f880681 100644
--- a/example/android/app/build.gradle
+++ b/example/android/app/build.gradle
@@ -26,24 +26,31 @@ apply plugin: 'kotlin-android'
 apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
 
 android {
-    compileSdkVersion 28
+    compileSdkVersion flutter.compileSdkVersion
+    ndkVersion flutter.ndkVersion
 
-    sourceSets {
-        main.java.srcDirs += 'src/main/kotlin'
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+
+    kotlinOptions {
+        jvmTarget = '1.8'
     }
 
-    lintOptions {
-        disable 'InvalidPackage'
+    sourceSets {
+        main.java.srcDirs += 'src/main/kotlin'
     }
 
     defaultConfig {
         // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
         applicationId "org.jezequel.timeline_editor_example"
-        minSdkVersion 16
-        targetSdkVersion 28
+        // You can update the following values to match your application needs.
+        // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-build-configuration.
+        minSdkVersion flutter.minSdkVersion
+        targetSdkVersion flutter.targetSdkVersion
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName
-        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
     }
 
     buildTypes {
@@ -61,7 +68,4 @@ flutter {
 
 dependencies {
     implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
-    testImplementation 'junit:junit:4.12'
-    androidTestImplementation 'androidx.test:runner:1.1.1'
-    androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'
 }
diff --git a/example/android/app/src/debug/AndroidManifest.xml b/example/android/app/src/debug/AndroidManifest.xml
index e7615f2..fba1412 100644
--- a/example/android/app/src/debug/AndroidManifest.xml
+++ b/example/android/app/src/debug/AndroidManifest.xml
@@ -1,6 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="org.jezequel.timeline_editor_example">
-    <!-- Flutter needs it to communicate with the running application
+    <!-- The INTERNET permission is required for development. Specifically,
+         the Flutter tool needs it to communicate with the running application
          to allow setting breakpoints, to provide hot reload, etc.
     -->
     <uses-permission android:name="android.permission.INTERNET"/>
diff --git a/example/android/app/src/main/AndroidManifest.xml b/example/android/app/src/main/AndroidManifest.xml
index 342948e..5c46f7a 100644
--- a/example/android/app/src/main/AndroidManifest.xml
+++ b/example/android/app/src/main/AndroidManifest.xml
@@ -1,21 +1,25 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="org.jezequel.timeline_editor_example">
-    <!-- io.flutter.app.FlutterApplication is an android.app.Application that
-         calls FlutterMain.startInitialization(this); in its onCreate method.
-         In most cases you can leave this as-is, but you if you want to provide
-         additional functionality it is fine to subclass or reimplement
-         FlutterApplication and put your custom class here. -->
-    <application
-        android:name="io.flutter.app.FlutterApplication"
-        android:label="timeline_editor_example"
+   <application
+        android:label="example"
+        android:name="${applicationName}"
         android:icon="@mipmap/ic_launcher">
         <activity
             android:name=".MainActivity"
+            android:exported="true"
             android:launchMode="singleTop"
             android:theme="@style/LaunchTheme"
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
             android:hardwareAccelerated="true"
             android:windowSoftInputMode="adjustResize">
+            <!-- Specifies an Android theme to apply to this Activity as soon as
+                 the Android process has started. This theme is visible to the user
+                 while the Flutter UI initializes. After that, this theme continues
+                 to determine the Window background behind the Flutter UI. -->
+            <meta-data
+              android:name="io.flutter.embedding.android.NormalTheme"
+              android:resource="@style/NormalTheme"
+              />
             <intent-filter>
                 <action android:name="android.intent.action.MAIN"/>
                 <category android:name="android.intent.category.LAUNCHER"/>
diff --git a/example/android/app/src/main/kotlin/org/jezequel/example/MainActivity.kt b/example/android/app/src/main/kotlin/org/jezequel/example/MainActivity.kt
deleted file mode 100644
index eaf4876..0000000
--- a/example/android/app/src/main/kotlin/org/jezequel/example/MainActivity.kt
+++ /dev/null
@@ -1,6 +0,0 @@
-package org.jezequel.example
-
-import io.flutter.embedding.android.FlutterActivity
-
-class MainActivity: FlutterActivity() {
-}
diff --git a/example/android/app/src/main/kotlin/org/jezequel/timeline_editor_example/MainActivity.kt b/example/android/app/src/main/kotlin/org/jezequel/timeline_editor_example/MainActivity.kt
index 629f89b..0ab56d6 100644
--- a/example/android/app/src/main/kotlin/org/jezequel/timeline_editor_example/MainActivity.kt
+++ b/example/android/app/src/main/kotlin/org/jezequel/timeline_editor_example/MainActivity.kt
@@ -1,12 +1,6 @@
 package org.jezequel.timeline_editor_example
 
-import androidx.annotation.NonNull;
 import io.flutter.embedding.android.FlutterActivity
-import io.flutter.embedding.engine.FlutterEngine
-import io.flutter.plugins.GeneratedPluginRegistrant
 
 class MainActivity: FlutterActivity() {
-    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
-        GeneratedPluginRegistrant.registerWith(flutterEngine);
-    }
 }
diff --git a/example/android/app/src/main/res/drawable-v21/launch_background.xml b/example/android/app/src/main/res/drawable-v21/launch_background.xml
new file mode 100644
index 0000000..f74085f
--- /dev/null
+++ b/example/android/app/src/main/res/drawable-v21/launch_background.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Modify this file to customize your launch splash screen -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="?android:colorBackground" />
+
+    <!-- You can insert your own image assets here -->
+    <!-- <item>
+        <bitmap
+            android:gravity="center"
+            android:src="@mipmap/launch_image" />
+    </item> -->
+</layer-list>
diff --git a/example/android/app/src/main/res/values-night/styles.xml b/example/android/app/src/main/res/values-night/styles.xml
new file mode 100644
index 0000000..06952be
--- /dev/null
+++ b/example/android/app/src/main/res/values-night/styles.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is on -->
+    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
+        <!-- Show a splash screen on the activity. Automatically removed when
+             the Flutter engine draws its first frame -->
+        <item name="android:windowBackground">@drawable/launch_background</item>
+    </style>
+    <!-- Theme applied to the Android Window as soon as the process has started.
+         This theme determines the color of the Android Window while your
+         Flutter UI initializes, as well as behind your Flutter UI while its
+         running.
+
+         This Theme is only used starting with V2 of Flutter's Android embedding. -->
+    <style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
+        <item name="android:windowBackground">?android:colorBackground</item>
+    </style>
+</resources>
diff --git a/example/android/app/src/main/res/values/styles.xml b/example/android/app/src/main/res/values/styles.xml
index 00fa441..cb1ef88 100644
--- a/example/android/app/src/main/res/values/styles.xml
+++ b/example/android/app/src/main/res/values/styles.xml
@@ -1,8 +1,18 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
+    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
+    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
         <!-- Show a splash screen on the activity. Automatically removed when
-             Flutter draws its first frame -->
+             the Flutter engine draws its first frame -->
         <item name="android:windowBackground">@drawable/launch_background</item>
     </style>
+    <!-- Theme applied to the Android Window as soon as the process has started.
+         This theme determines the color of the Android Window while your
+         Flutter UI initializes, as well as behind your Flutter UI while its
+         running.
+
+         This Theme is only used starting with V2 of Flutter's Android embedding. -->
+    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
+        <item name="android:windowBackground">?android:colorBackground</item>
+    </style>
 </resources>
diff --git a/example/android/app/src/profile/AndroidManifest.xml b/example/android/app/src/profile/AndroidManifest.xml
index e7615f2..fba1412 100644
--- a/example/android/app/src/profile/AndroidManifest.xml
+++ b/example/android/app/src/profile/AndroidManifest.xml
@@ -1,6 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="org.jezequel.timeline_editor_example">
-    <!-- Flutter needs it to communicate with the running application
+    <!-- The INTERNET permission is required for development. Specifically,
+         the Flutter tool needs it to communicate with the running application
          to allow setting breakpoints, to provide hot reload, etc.
     -->
     <uses-permission android:name="android.permission.INTERNET"/>
diff --git a/example/android/build.gradle b/example/android/build.gradle
index 3100ad2..83ae220 100644
--- a/example/android/build.gradle
+++ b/example/android/build.gradle
@@ -1,12 +1,12 @@
 buildscript {
-    ext.kotlin_version = '1.3.50'
+    ext.kotlin_version = '1.6.10'
     repositories {
         google()
-        jcenter()
+        mavenCentral()
     }
 
     dependencies {
-        classpath 'com.android.tools.build:gradle:3.5.0'
+        classpath 'com.android.tools.build:gradle:7.1.2'
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
     }
 }
@@ -14,7 +14,7 @@ buildscript {
 allprojects {
     repositories {
         google()
-        jcenter()
+        mavenCentral()
     }
 }
 
diff --git a/example/android/gradle.properties b/example/android/gradle.properties
index 38c8d45..94adc3a 100644
--- a/example/android/gradle.properties
+++ b/example/android/gradle.properties
@@ -1,4 +1,3 @@
 org.gradle.jvmargs=-Xmx1536M
-android.enableR8=true
 android.useAndroidX=true
 android.enableJetifier=true
diff --git a/example/android/gradle/wrapper/gradle-wrapper.properties b/example/android/gradle/wrapper/gradle-wrapper.properties
index 296b146..cb24abd 100644
--- a/example/android/gradle/wrapper/gradle-wrapper.properties
+++ b/example/android/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,5 @@
-#Fri Jun 23 08:50:38 CEST 2017
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.2-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.4-all.zip
diff --git a/example/android/settings.gradle b/example/android/settings.gradle
index 5a2f14f..44e62bc 100644
--- a/example/android/settings.gradle
+++ b/example/android/settings.gradle
@@ -1,15 +1,11 @@
 include ':app'
 
-def flutterProjectRoot = rootProject.projectDir.parentFile.toPath()
+def localPropertiesFile = new File(rootProject.projectDir, "local.properties")
+def properties = new Properties()
 
-def plugins = new Properties()
-def pluginsFile = new File(flutterProjectRoot.toFile(), '.flutter-plugins')
-if (pluginsFile.exists()) {
-    pluginsFile.withReader('UTF-8') { reader -> plugins.load(reader) }
-}
+assert localPropertiesFile.exists()
+localPropertiesFile.withReader("UTF-8") { reader -> properties.load(reader) }
 
-plugins.each { name, path ->
-    def pluginDirectory = flutterProjectRoot.resolve(path).resolve('android').toFile()
-    include ":$name"
-    project(":$name").projectDir = pluginDirectory
-}
+def flutterSdkPath = properties.getProperty("flutter.sdk")
+assert flutterSdkPath != null, "flutter.sdk not set in local.properties"
+apply from: "$flutterSdkPath/packages/flutter_tools/gradle/app_plugin_loader.gradle"
diff --git a/example/ios/.gitignore b/example/ios/.gitignore
index e96ef60..7a7f987 100644
--- a/example/ios/.gitignore
+++ b/example/ios/.gitignore
@@ -1,3 +1,4 @@
+**/dgph
 *.mode1v3
 *.mode2v3
 *.moved-aside
@@ -18,6 +19,7 @@ Flutter/App.framework
 Flutter/Flutter.framework
 Flutter/Flutter.podspec
 Flutter/Generated.xcconfig
+Flutter/ephemeral/
 Flutter/app.flx
 Flutter/app.zip
 Flutter/flutter_assets/
diff --git a/example/ios/Flutter/AppFrameworkInfo.plist b/example/ios/Flutter/AppFrameworkInfo.plist
index 6b4c0f7..4f8d4d2 100644
--- a/example/ios/Flutter/AppFrameworkInfo.plist
+++ b/example/ios/Flutter/AppFrameworkInfo.plist
@@ -21,6 +21,6 @@
   <key>CFBundleVersion</key>
   <string>1.0</string>
   <key>MinimumOSVersion</key>
-  <string>8.0</string>
+  <string>11.0</string>
 </dict>
 </plist>
diff --git a/example/ios/Runner.xcodeproj/project.pbxproj b/example/ios/Runner.xcodeproj/project.pbxproj
index 2d3df4c..b1d1200 100644
--- a/example/ios/Runner.xcodeproj/project.pbxproj
+++ b/example/ios/Runner.xcodeproj/project.pbxproj
@@ -3,17 +3,13 @@
 	archiveVersion = 1;
 	classes = {
 	};
-	objectVersion = 46;
+	objectVersion = 50;
 	objects = {
 
 /* Begin PBXBuildFile section */
 		1498D2341E8E89220040F4C2 /* GeneratedPluginRegistrant.m in Sources */ = {isa = PBXBuildFile; fileRef = 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */; };
 		3B3967161E833CAA004F5970 /* AppFrameworkInfo.plist in Resources */ = {isa = PBXBuildFile; fileRef = 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */; };
-		3B80C3941E831B6300D905FE /* App.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 3B80C3931E831B6300D905FE /* App.framework */; };
-		3B80C3951E831B6300D905FE /* App.framework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = 3B80C3931E831B6300D905FE /* App.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
 		74858FAF1ED2DC5600515810 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 74858FAE1ED2DC5600515810 /* AppDelegate.swift */; };
-		9705A1C61CF904A100538489 /* Flutter.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 9740EEBA1CF902C7004384FC /* Flutter.framework */; };
-		9705A1C71CF904A300538489 /* Flutter.framework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = 9740EEBA1CF902C7004384FC /* Flutter.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
 		97C146FC1CF9000F007C117D /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FA1CF9000F007C117D /* Main.storyboard */; };
 		97C146FE1CF9000F007C117D /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FD1CF9000F007C117D /* Assets.xcassets */; };
 		97C147011CF9000F007C117D /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */; };
@@ -26,8 +22,6 @@
 			dstPath = "";
 			dstSubfolderSpec = 10;
 			files = (
-				3B80C3951E831B6300D905FE /* App.framework in Embed Frameworks */,
-				9705A1C71CF904A300538489 /* Flutter.framework in Embed Frameworks */,
 			);
 			name = "Embed Frameworks";
 			runOnlyForDeploymentPostprocessing = 0;
@@ -38,13 +32,11 @@
 		1498D2321E8E86230040F4C2 /* GeneratedPluginRegistrant.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = GeneratedPluginRegistrant.h; sourceTree = "<group>"; };
 		1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = GeneratedPluginRegistrant.m; sourceTree = "<group>"; };
 		3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = AppFrameworkInfo.plist; path = Flutter/AppFrameworkInfo.plist; sourceTree = "<group>"; };
-		3B80C3931E831B6300D905FE /* App.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = App.framework; path = Flutter/App.framework; sourceTree = "<group>"; };
 		74858FAD1ED2DC5600515810 /* Runner-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "Runner-Bridging-Header.h"; sourceTree = "<group>"; };
 		74858FAE1ED2DC5600515810 /* AppDelegate.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
 		7AFA3C8E1D35360C0083082E /* Release.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; name = Release.xcconfig; path = Flutter/Release.xcconfig; sourceTree = "<group>"; };
 		9740EEB21CF90195004384FC /* Debug.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = Debug.xcconfig; path = Flutter/Debug.xcconfig; sourceTree = "<group>"; };
 		9740EEB31CF90195004384FC /* Generated.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = Generated.xcconfig; path = Flutter/Generated.xcconfig; sourceTree = "<group>"; };
-		9740EEBA1CF902C7004384FC /* Flutter.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = Flutter.framework; path = Flutter/Flutter.framework; sourceTree = "<group>"; };
 		97C146EE1CF9000F007C117D /* Runner.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Runner.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		97C146FB1CF9000F007C117D /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = "<group>"; };
 		97C146FD1CF9000F007C117D /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
@@ -57,8 +49,6 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				9705A1C61CF904A100538489 /* Flutter.framework in Frameworks */,
-				3B80C3941E831B6300D905FE /* App.framework in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -68,9 +58,7 @@
 		9740EEB11CF90186004384FC /* Flutter */ = {
 			isa = PBXGroup;
 			children = (
-				3B80C3931E831B6300D905FE /* App.framework */,
 				3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */,
-				9740EEBA1CF902C7004384FC /* Flutter.framework */,
 				9740EEB21CF90195004384FC /* Debug.xcconfig */,
 				7AFA3C8E1D35360C0083082E /* Release.xcconfig */,
 				9740EEB31CF90195004384FC /* Generated.xcconfig */,
@@ -102,7 +90,6 @@
 				97C146FD1CF9000F007C117D /* Assets.xcassets */,
 				97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */,
 				97C147021CF9000F007C117D /* Info.plist */,
-				97C146F11CF9000F007C117D /* Supporting Files */,
 				1498D2321E8E86230040F4C2 /* GeneratedPluginRegistrant.h */,
 				1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */,
 				74858FAE1ED2DC5600515810 /* AppDelegate.swift */,
@@ -111,13 +98,6 @@
 			path = Runner;
 			sourceTree = "<group>";
 		};
-		97C146F11CF9000F007C117D /* Supporting Files */ = {
-			isa = PBXGroup;
-			children = (
-			);
-			name = "Supporting Files";
-			sourceTree = "<group>";
-		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -147,8 +127,8 @@
 		97C146E61CF9000F007C117D /* Project object */ = {
 			isa = PBXProject;
 			attributes = {
-				LastUpgradeCheck = 1020;
-				ORGANIZATIONNAME = "The Chromium Authors";
+				LastUpgradeCheck = 1300;
+				ORGANIZATIONNAME = "";
 				TargetAttributes = {
 					97C146ED1CF9000F007C117D = {
 						CreatedOnToolsVersion = 7.3.1;
@@ -157,7 +137,7 @@
 				};
 			};
 			buildConfigurationList = 97C146E91CF9000F007C117D /* Build configuration list for PBXProject "Runner" */;
-			compatibilityVersion = "Xcode 3.2";
+			compatibilityVersion = "Xcode 9.3";
 			developmentRegion = en;
 			hasScannedForEncodings = 0;
 			knownRegions = (
@@ -201,7 +181,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "/bin/sh \"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh\" thin";
+			shellScript = "/bin/sh \"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh\" embed_and_thin";
 		};
 		9740EEB61CF901F6004384FC /* Run Script */ = {
 			isa = PBXShellScriptBuildPhase;
@@ -253,7 +233,6 @@
 /* Begin XCBuildConfiguration section */
 		249021D3217E4FDB00AE95B9 /* Profile */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 7AFA3C8E1D35360C0083082E /* Release.xcconfig */;
 			buildSettings = {
 				ALWAYS_SEARCH_USER_PATHS = NO;
 				CLANG_ANALYZER_NONNULL = YES;
@@ -293,7 +272,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				SUPPORTED_PLATFORMS = iphoneos;
@@ -310,17 +289,12 @@
 				CLANG_ENABLE_MODULES = YES;
 				CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)";
 				ENABLE_BITCODE = NO;
-				FRAMEWORK_SEARCH_PATHS = (
-					"$(inherited)",
-					"$(PROJECT_DIR)/Flutter",
-				);
 				INFOPLIST_FILE = Runner/Info.plist;
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = (
+				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
-					"$(PROJECT_DIR)/Flutter",
+					"@executable_path/Frameworks",
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = org.jezequel.timelineEditorExample;
+				PRODUCT_BUNDLE_IDENTIFIER = org.jezequel.timeline_editor_example;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
@@ -330,7 +304,6 @@
 		};
 		97C147031CF9000F007C117D /* Debug */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 9740EEB21CF90195004384FC /* Debug.xcconfig */;
 			buildSettings = {
 				ALWAYS_SEARCH_USER_PATHS = NO;
 				CLANG_ANALYZER_NONNULL = YES;
@@ -376,7 +349,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -386,7 +359,6 @@
 		};
 		97C147041CF9000F007C117D /* Release */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 7AFA3C8E1D35360C0083082E /* Release.xcconfig */;
 			buildSettings = {
 				ALWAYS_SEARCH_USER_PATHS = NO;
 				CLANG_ANALYZER_NONNULL = YES;
@@ -426,11 +398,12 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				SUPPORTED_PLATFORMS = iphoneos;
-				SWIFT_OPTIMIZATION_LEVEL = "-Owholemodule";
+				SWIFT_COMPILATION_MODE = wholemodule;
+				SWIFT_OPTIMIZATION_LEVEL = "-O";
 				TARGETED_DEVICE_FAMILY = "1,2";
 				VALIDATE_PRODUCT = YES;
 			};
@@ -444,17 +417,12 @@
 				CLANG_ENABLE_MODULES = YES;
 				CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)";
 				ENABLE_BITCODE = NO;
-				FRAMEWORK_SEARCH_PATHS = (
-					"$(inherited)",
-					"$(PROJECT_DIR)/Flutter",
-				);
 				INFOPLIST_FILE = Runner/Info.plist;
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = (
+				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
-					"$(PROJECT_DIR)/Flutter",
+					"@executable_path/Frameworks",
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = org.jezequel.timelineEditorExample;
+				PRODUCT_BUNDLE_IDENTIFIER = org.jezequel.timeline_editor_example;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
@@ -471,17 +439,12 @@
 				CLANG_ENABLE_MODULES = YES;
 				CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)";
 				ENABLE_BITCODE = NO;
-				FRAMEWORK_SEARCH_PATHS = (
-					"$(inherited)",
-					"$(PROJECT_DIR)/Flutter",
-				);
 				INFOPLIST_FILE = Runner/Info.plist;
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = (
+				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
-					"$(PROJECT_DIR)/Flutter",
+					"@executable_path/Frameworks",
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = org.jezequel.timelineEditorExample;
+				PRODUCT_BUNDLE_IDENTIFIER = org.jezequel.timeline_editor_example;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
diff --git a/example/ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspacedata b/example/ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspacedata
index 1d526a1..919434a 100644
--- a/example/ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspacedata
+++ b/example/ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspacedata
@@ -2,6 +2,6 @@
 <Workspace
    version = "1.0">
    <FileRef
-      location = "group:Runner.xcodeproj">
+      location = "self:">
    </FileRef>
 </Workspace>
diff --git a/example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme b/example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
index a28140c..c87d15a 100644
--- a/example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
+++ b/example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1020"
+   LastUpgradeVersion = "1300"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"
@@ -27,8 +27,6 @@
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
       shouldUseLaunchSchemeArgsEnv = "YES">
-      <Testables>
-      </Testables>
       <MacroExpansion>
          <BuildableReference
             BuildableIdentifier = "primary"
@@ -38,8 +36,8 @@
             ReferencedContainer = "container:Runner.xcodeproj">
          </BuildableReference>
       </MacroExpansion>
-      <AdditionalOptions>
-      </AdditionalOptions>
+      <Testables>
+      </Testables>
    </TestAction>
    <LaunchAction
       buildConfiguration = "Debug"
@@ -61,8 +59,6 @@
             ReferencedContainer = "container:Runner.xcodeproj">
          </BuildableReference>
       </BuildableProductRunnable>
-      <AdditionalOptions>
-      </AdditionalOptions>
    </LaunchAction>
    <ProfileAction
       buildConfiguration = "Profile"
diff --git a/example/ios/Runner/Info.plist b/example/ios/Runner/Info.plist
index 816f962..0b9ef4f 100644
--- a/example/ios/Runner/Info.plist
+++ b/example/ios/Runner/Info.plist
@@ -4,6 +4,8 @@
 <dict>
 	<key>CFBundleDevelopmentRegion</key>
 	<string>$(DEVELOPMENT_LANGUAGE)</string>
+	<key>CFBundleDisplayName</key>
+	<string>Example</string>
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>
@@ -41,5 +43,9 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+	<key>CADisableMinimumFrameDurationOnPhone</key>
+	<true/>
+	<key>UIApplicationSupportsIndirectInputEvents</key>
+	<true/>
 </dict>
 </plist>
diff --git a/example/ios/Runner/Runner-Bridging-Header.h b/example/ios/Runner/Runner-Bridging-Header.h
index 7335fdf..308a2a5 100644
--- a/example/ios/Runner/Runner-Bridging-Header.h
+++ b/example/ios/Runner/Runner-Bridging-Header.h
@@ -1 +1 @@
-#import "GeneratedPluginRegistrant.h"
\ No newline at end of file
+#import "GeneratedPluginRegistrant.h"
diff --git a/example/lib/main.dart b/example/lib/main.dart
index 1644150..b9514f6 100644
--- a/example/lib/main.dart
+++ b/example/lib/main.dart
@@ -13,7 +13,7 @@ class MyApp extends StatefulWidget {
 class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
   Duration totalDuration = Duration(seconds: 600);
 
-  Duration box1Start = Duration(seconds: 30);
+  Duration box1Start = Duration(seconds: 0);
   Duration box1Duration = Duration(seconds: 50);
   bool box1Selected = false;
   Duration box2Start = Duration(seconds: 100);
@@ -31,16 +31,15 @@ class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
   double position = 0;
   bool customTimeString = false;
   bool withHeaders = false;
-  StreamController<double> positionController;
-  Timer progressTimer;
-  TimelineEditorScaleController scaleController;
 
-  double scale;
+  late StreamController<double> positionController;
+  late Timer progressTimer;
+  late TimelineEditorScaleController scaleController;
+  late AnimationController _controller;
+  late Animation<double> _animation;
 
-  double _trackHeight = 100;
-
-  AnimationController _controller;
-  Animation<double> _animation;
+  var scale = 1.0;
+  var _trackHeight = 100.0;
 
   void moveBox1(Duration newStart) {
     if (box1Start + newStart < Duration.zero) {
@@ -58,7 +57,7 @@ class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
   }
 
   void moveBox2(Duration startMove) {
-    var newStart = box2Start + startMove;
+    final newStart = box2Start + startMove;
     if (box1Start + box1Duration < newStart &&
         newStart + box2Duration < totalDuration)
       setState(() {
@@ -89,7 +88,7 @@ class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
   }
 
   void moveBox2b(Duration startMove) {
-    var newStart = box2bStart + startMove;
+    final newStart = box2bStart + startMove;
     if (box1Start + box1bDuration < newStart &&
         newStart + box2bDuration < totalDuration)
       setState(() {
@@ -102,7 +101,7 @@ class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
       setState(() => box2bDuration = box2bDuration + move);
   }
 
-  void positionUpdate(Timer timer) {
+  void positionUpdate([Timer? timer]) {
     position += 0.350;
     if (position > 300) position = 0;
     positionController.add(position);
@@ -122,16 +121,16 @@ class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
       ..addListener(() {
         setState(() => _trackHeight = _animation.value);
       });
-    positionUpdate(null);
+    positionUpdate();
   }
 
   @override
   void dispose() {
     scaleController.dispose();
-    progressTimer?.cancel();
-    positionController?.close();
+    progressTimer.cancel();
+    positionController.close();
 
-    _controller?.dispose();
+    _controller.dispose();
     super.dispose();
   }
 
@@ -157,7 +156,7 @@ class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
                     builder: (context, snapshot) {
                       return Text('Current scale: ' + snapshot.data.toString());
                     }),
-                RaisedButton(
+                ElevatedButton(
                   child: const Text('Change track height'),
                   onPressed: () =>
                       _controller.status == AnimationStatus.forward ||
@@ -180,11 +179,14 @@ class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
                 padding: const EdgeInsets.only(bottom: 8.0),
                 child: TimelineEditor(
                   scaleController: scaleController,
-                  minimumTimeWidgetExtent: customTimeString ? 100 : null,
+                  minimumTimeWidgetExtent: customTimeString ? 100.0 : 70.0,
                   leadingWidgetBuilder: withHeaders
                       ? (index) => Center(
-                          child: RaisedButton(
-                              onPressed: () {}, child: Text("$index")))
+                            child: ElevatedButton(
+                              onPressed: () {},
+                              child: Text("$index"),
+                            ),
+                          )
                       : null,
                   timelineLeadingWidget:
                       withHeaders ? Center(child: Text("HEADER")) : null,
@@ -206,6 +208,7 @@ class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
                               // key: Key('separated'),
                               scrollControllers: scrollControllers,
                               defaultColor: Colors.green[700],
+                              onEmptySlotTap: print,
                               boxes: [
                                 TimelineEditorCard(
                                   box1Start,
@@ -217,21 +220,23 @@ class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
                                   onMovedDuration: moveBox1End,
                                   onMovedStart: moveBox1,
                                 ),
-                                TimelineEditorCard(box2Start,
-                                    duration: box2Duration,
-                                    menuEntries: [
-                                      PopupMenuItem<String>(
-                                          child: Text('Demo!'), value: 'demo')
-                                    ],
-                                    onSelectedMenuItem: (v) {
-                                      print(v);
-                                    },
-                                    onMovedDuration: moveBox2End,
-                                    onMovedStart: moveBox2,
-                                    selected: box2Selected,
-                                    onTap: () => setState(
-                                        () => box2Selected = !box2Selected),
-                                    color: Colors.green),
+                                TimelineEditorCard(
+                                  box2Start,
+                                  duration: box2Duration,
+                                  menuEntries: [
+                                    PopupMenuItem<String>(
+                                        child: Text('Demo!'), value: 'demo')
+                                  ],
+                                  onSelectedMenuItem: (v) {
+                                    print(v);
+                                  },
+                                  onMovedDuration: moveBox2End,
+                                  onMovedStart: moveBox2,
+                                  selected: box2Selected,
+                                  onTap: () => setState(
+                                      () => box2Selected = !box2Selected),
+                                  color: Colors.green,
+                                ),
                               ],
                               pixelsPerSeconds: pps,
                               duration: duration,
diff --git a/example/pubspec.lock b/example/pubspec.lock
index 5f25845..68bb4a2 100644
--- a/example/pubspec.lock
+++ b/example/pubspec.lock
@@ -7,49 +7,42 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.5.0-nullsafety.1"
+    version: "2.9.0"
   boolean_selector:
     dependency: transitive
     description:
       name: boolean_selector
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.0-nullsafety.1"
+    version: "2.1.0"
   characters:
     dependency: transitive
     description:
       name: characters
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0-nullsafety.3"
-  charcode:
-    dependency: transitive
-    description:
-      name: charcode
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.2.0-nullsafety.1"
+    version: "1.2.1"
   clock:
     dependency: transitive
     description:
       name: clock
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0-nullsafety.1"
+    version: "1.1.1"
   collection:
     dependency: transitive
     description:
       name: collection
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.15.0-nullsafety.3"
+    version: "1.16.0"
   fake_async:
     dependency: transitive
     description:
       name: fake_async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0-nullsafety.1"
+    version: "1.3.1"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -66,35 +59,42 @@ packages:
       name: linked_scroll_controller
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.1.2"
+    version: "0.2.0"
   matcher:
     dependency: transitive
     description:
       name: matcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.10-nullsafety.1"
+    version: "0.12.12"
+  material_color_utilities:
+    dependency: transitive
+    description:
+      name: material_color_utilities
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.5"
   meta:
     dependency: transitive
     description:
       name: meta
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.3.0-nullsafety.3"
+    version: "1.8.0"
   path:
     dependency: transitive
     description:
       name: path
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.0-nullsafety.1"
+    version: "1.8.2"
   rxdart:
     dependency: transitive
     description:
       name: rxdart
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.24.1"
+    version: "0.27.7"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -106,63 +106,56 @@ packages:
       name: source_span
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.0-nullsafety.2"
+    version: "1.9.0"
   stack_trace:
     dependency: transitive
     description:
       name: stack_trace
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.10.0-nullsafety.1"
+    version: "1.10.0"
   stream_channel:
     dependency: transitive
     description:
       name: stream_channel
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.0-nullsafety.1"
+    version: "2.1.0"
   string_scanner:
     dependency: transitive
     description:
       name: string_scanner
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0-nullsafety.1"
+    version: "1.1.1"
   term_glyph:
     dependency: transitive
     description:
       name: term_glyph
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0-nullsafety.1"
+    version: "1.2.1"
   test_api:
     dependency: transitive
     description:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.2.19-nullsafety.2"
+    version: "0.4.12"
   timeline_editor:
     dependency: "direct dev"
     description:
       path: ".."
       relative: true
     source: path
-    version: "0.4.0-preview.1"
-  typed_data:
-    dependency: transitive
-    description:
-      name: typed_data
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.3.0-nullsafety.3"
+    version: "0.5.0-preview"
   vector_math:
     dependency: transitive
     description:
       name: vector_math
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.0-nullsafety.3"
+    version: "2.1.2"
 sdks:
-  dart: ">=2.10.0-110 <2.11.0"
-  flutter: ">=1.12.13+hotfix.5 <2.0.0"
+  dart: ">=2.18.0 <3.0.0"
+  flutter: ">=1.13.8"
diff --git a/example/pubspec.yaml b/example/pubspec.yaml
index 03643a8..379309c 100644
--- a/example/pubspec.yaml
+++ b/example/pubspec.yaml
@@ -3,7 +3,8 @@ description: Demonstrates how to use the timeline_editor plugin.
 publish_to: 'none'
 
 environment:
-  sdk: ">=2.8.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
+
 
 dependencies:
   flutter:
diff --git a/example/test/widget_test.dart b/example/test/widget_test.dart
index 27c8fdd..0abbfa6 100644
--- a/example/test/widget_test.dart
+++ b/example/test/widget_test.dart
@@ -18,8 +18,8 @@ void main() {
     // Verify that platform version is retrieved.
     expect(
       find.byWidgetPredicate(
-        (Widget widget) => widget is Text &&
-                           widget.data.startsWith('Running on:'),
+        (Widget widget) =>
+            widget is Text && (widget.data ?? '').startsWith('Running on:'),
       ),
       findsOneWidget,
     );
diff --git a/example/web/icons/Icon-maskable-192.png b/example/web/icons/Icon-maskable-192.png
new file mode 100644
index 0000000..eb9b4d7
Binary files /dev/null and b/example/web/icons/Icon-maskable-192.png differ
diff --git a/example/web/icons/Icon-maskable-512.png b/example/web/icons/Icon-maskable-512.png
new file mode 100644
index 0000000..d69c566
Binary files /dev/null and b/example/web/icons/Icon-maskable-512.png differ
diff --git a/example/web/index.html b/example/web/index.html
index 9b7a438..41b3bc3 100644
--- a/example/web/index.html
+++ b/example/web/index.html
@@ -1,6 +1,21 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <!--
+    If you are serving your web app in a path other than the root, change the
+    href value below to reflect the base path you are serving from.
+
+    The path provided below has to start and end with a slash "/" in order for
+    it to work correctly.
+
+    For more details:
+    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+
+    This is a placeholder for base href that will be replaced by the value of
+    the `--base-href` argument provided to `flutter build`.
+  -->
+  <base href="$FLUTTER_BASE_HREF">
+
   <meta charset="UTF-8">
   <meta content="IE=Edge" http-equiv="X-UA-Compatible">
   <meta name="description" content="A new Flutter project.">
@@ -12,22 +27,32 @@
   <link rel="apple-touch-icon" href="icons/Icon-192.png">
 
   <!-- Favicon -->
-  <link rel="shortcut icon" type="image/png" href="favicon.png"/>
+  <link rel="icon" type="image/png" href="favicon.png"/>
 
   <title>example</title>
   <link rel="manifest" href="manifest.json">
+
+  <script>
+    // The value below is injected by flutter build, do not touch.
+    var serviceWorkerVersion = null;
+  </script>
+  <!-- This script adds the flutter initialization JS code -->
+  <script src="flutter.js" defer></script>
 </head>
 <body>
-  <!-- This script installs service_worker.js to provide PWA functionality to
-       application. For more information, see:
-       https://developers.google.com/web/fundamentals/primers/service-workers -->
   <script>
-    if ('serviceWorker' in navigator) {
-      window.addEventListener('load', function () {
-        navigator.serviceWorker.register('flutter_service_worker.js');
+    window.addEventListener('load', function(ev) {
+      // Download main.dart.js
+      _flutter.loader.loadEntrypoint({
+        serviceWorker: {
+          serviceWorkerVersion: serviceWorkerVersion,
+        }
+      }).then(function(engineInitializer) {
+        return engineInitializer.initializeEngine();
+      }).then(function(appRunner) {
+        return appRunner.runApp();
       });
-    }
+    });
   </script>
-  <script src="main.dart.js" type="application/javascript"></script>
 </body>
 </html>
diff --git a/example/web/manifest.json b/example/web/manifest.json
index 8c01291..096edf8 100644
--- a/example/web/manifest.json
+++ b/example/web/manifest.json
@@ -18,6 +18,18 @@
             "src": "icons/Icon-512.png",
             "sizes": "512x512",
             "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-maskable-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "icons/Icon-maskable-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
         }
     ]
 }
diff --git a/lib/cahced_layout_builder.dart b/lib/cached_layout_builder.dart
similarity index 70%
rename from lib/cahced_layout_builder.dart
rename to lib/cached_layout_builder.dart
index 3bf884b..b34f079 100644
--- a/lib/cahced_layout_builder.dart
+++ b/lib/cached_layout_builder.dart
@@ -5,24 +5,26 @@ class CachedLayoutBuilder extends StatefulWidget {
       builder;
   final List<dynamic> parentParameters;
 
-  const CachedLayoutBuilder({Key key, this.builder, this.parentParameters})
-      : super(key: key);
+  const CachedLayoutBuilder({
+    super.key,
+    required this.builder,
+    required this.parentParameters,
+  });
+
   @override
-  _CachedLayoutBuilderState createState() => _CachedLayoutBuilderState();
+  State<CachedLayoutBuilder> createState() => _CachedLayoutBuilderState();
 }
 
 class _CachedLayoutBuilderState extends State<CachedLayoutBuilder> {
-  Widget previousBuild;
-  BoxConstraints previousContraints;
-  List<dynamic> previousParameters;
+  late Widget previousBuild;
+  BoxConstraints? previousContraints;
+  List<dynamic> previousParameters = [];
 
   @override
   Widget build(BuildContext context) {
     return LayoutBuilder(builder: (ctx, constraints) {
       var parametersIdentical = true;
-      if (previousParameters == null ||
-          widget.parentParameters == null ||
-          previousParameters.length != widget.parentParameters.length) {
+      if (previousParameters.length != widget.parentParameters.length) {
         parametersIdentical = false;
       } else {
         for (var i = 0; i < previousParameters.length; i++) {
diff --git a/lib/extensions.dart b/lib/extensions.dart
index 2da4e04..aeb5d88 100644
--- a/lib/extensions.dart
+++ b/lib/extensions.dart
@@ -1,6 +1,5 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/rendering.dart';
-import 'package:flutter/widgets.dart';
 
 Duration durationFromSeconds(double seconds) =>
     Duration(microseconds: (seconds * 1000000).round());
@@ -9,7 +8,7 @@ double durationToSeconds(Duration duration) =>
     duration.inMicroseconds / 1000000;
 
 Offset localToGlobal(RenderSliver sliver, Offset point,
-    {RenderObject ancestor}) {
+    {RenderObject? ancestor}) {
   return MatrixUtils.transformPoint(getTransformTo(sliver, ancestor), point);
 }
 
@@ -17,20 +16,22 @@ extension DurationWithSeconds on Duration {
   double get inSecondsAsDouble => durationToSeconds(this);
 }
 
-Matrix4 getTransformTo(RenderSliver sliver, RenderObject ancestor) {
-  final bool ancestorSpecified = ancestor != null;
+Matrix4 getTransformTo(RenderSliver sliver, RenderObject? ancestor) {
   if (ancestor == null) {
-    final AbstractNode rootNode = sliver.owner.rootNode;
+    final AbstractNode? rootNode = sliver.owner?.rootNode;
     if (rootNode is RenderObject) ancestor = rootNode;
   }
   final List<RenderObject> renderers = <RenderObject>[];
-  for (RenderSliver renderer = sliver;
+  for (AbstractNode? renderer = sliver;
       renderer != ancestor;
       renderer = renderer.parent) {
-    assert(renderer != null); // Failed to find ancestor in parent chain.
-    renderers.add(renderer);
+    if (renderer is RenderObject) {
+      renderers.add(renderer);
+    } else {
+      throw ArgumentError.value(sliver, "sliver", "Render not found on tree");
+    }
   }
-  if (ancestorSpecified) renderers.add(ancestor);
+  if (ancestor != null) renderers.add(ancestor);
   final Matrix4 transform = Matrix4.identity();
   for (int index = renderers.length - 1; index > 0; index -= 1) {
     renderers[index].applyPaintTransform(renderers[index - 1], transform);
diff --git a/lib/timeline_editor.dart b/lib/timeline_editor.dart
index 35e71b8..067c56f 100644
--- a/lib/timeline_editor.dart
+++ b/lib/timeline_editor.dart
@@ -1,4 +1,4 @@
-import 'dart:math';
+import 'dart:async';
 
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
@@ -6,7 +6,7 @@ import 'package:linked_scroll_controller/linked_scroll_controller.dart';
 import 'package:timeline_editor/timeline_editor_scale_controller.dart';
 import 'package:timeline_editor/timeline_editor_track.dart';
 
-import 'cahced_layout_builder.dart';
+import 'cached_layout_builder.dart';
 import 'extensions.dart';
 export './timeline_editor_track.dart';
 export './extensions.dart';
@@ -16,10 +16,11 @@ export './timeline_editor_scale_controller.dart';
 /// [pixelsPerSeconds] how much pixel takes a second
 /// [duration] of the timeline
 typedef TimelineEditorTrackBuilder = TimelineEditorTrack Function(
-    int trackNumber,
-    double pixelsPerSeconds,
-    Duration duration,
-    LinkedScrollControllerGroup scrollControllers);
+  int trackNumber,
+  double pixelsPerSeconds,
+  Duration duration,
+  LinkedScrollControllerGroup scrollControllers,
+);
 
 /// Main timeline widget which contains the tracks
 class TimelineEditor extends StatefulWidget {
@@ -30,10 +31,10 @@ class TimelineEditor extends StatefulWidget {
   final Duration duration;
 
   /// Timeline time text theme. By default we use Theme.of(context).textTheme.bodyText1
-  final TextStyle timelineTextStyle;
+  final TextStyle? timelineTextStyle;
 
   /// Opational: Convert duration to string for the timeline headers
-  final Widget Function(Duration duration, Duration totalDuration)
+  final Widget Function(Duration duration, Duration totalDuration)?
       timeWidgetBuilder;
 
   /// Optional hright of the time bar displayed on top of the timeline.
@@ -48,19 +49,16 @@ class TimelineEditor extends StatefulWidget {
   /// Optional argument to force the spacing between each time widget
   /// by default we will optimize as best fitted by the [minimumTimeWidgetExtent] while keeping round number:
   /// one every seconds, 5 seconds, ten seconds, minutes, days, weeks, month years
-  final Duration timeWidgetEvery;
+  final Duration? timeWidgetEvery;
 
   /// Color used by the time separator in the timeline.
   /// By default we use Theme.of(context).brightness == Brightness.dark ? Colors.white60 : Colors.black87
-  final Color separatorColor;
-
-  /// optional distance in seconds between each time indicator
-  final Duration blocksEvery;
+  final Color? separatorColor;
 
   /// a Widget that can be displayed as headding for leading widgets.
-  final Widget timelineLeadingWidget;
+  final Widget? timelineLeadingWidget;
 
-  final Widget Function(int index) leadingWidgetBuilder;
+  final Widget Function(int index)? leadingWidgetBuilder;
 
   /// the builder for each track
   /// tou can use a [TimelineEditorTrack] or your custom track
@@ -68,22 +66,22 @@ class TimelineEditor extends StatefulWidget {
 
   /// optional position stream in the timeline for the position indicator
   /// we use stream to avoid rebuilding the whole widget for each position change
-  final Stream<double> positionStream;
-
-  /// user whant to switch to a time position in seconds
-  final void Function(double position) onPositionTap;
+  final Stream<double>? positionStream;
 
   /// scale controller use to
   /// manually set scale
   /// get updates of scale
   /// set min & max scale
-  final TimelineEditorScaleController scaleController;
+  final TimelineEditorScaleController? scaleController;
+
+  /// optional initial duration for timeline
+  final Duration? initialDuration;
 
   const TimelineEditor({
-    Key key,
-    @required this.duration,
-    @required this.trackBuilder,
-    @required this.countTracks,
+    super.key,
+    required this.duration,
+    required this.trackBuilder,
+    required this.countTracks,
     this.timelineTextStyle,
     this.timeWidgetBuilder,
     this.scaleController,
@@ -92,66 +90,80 @@ class TimelineEditor extends StatefulWidget {
     this.minimumTimeWidgetExtent = 70,
     this.separatorColor,
     this.positionStream,
-    this.blocksEvery = const Duration(seconds: 5),
-    this.onPositionTap,
     this.timelineLeadingWidget,
     this.leadingWidgetBuilder,
-  }) : super(key: key);
+    this.initialDuration,
+  })  : assert(duration > Duration.zero),
+        assert(initialDuration == null || initialDuration < duration);
+
   @override
-  _TimelineEditorState createState() => _TimelineEditorState();
+  State<TimelineEditor> createState() => _TimelineEditorState();
 }
 
 class _TimelineEditorState extends State<TimelineEditor> {
-  double scale = 1;
-  double widgetWidth;
-  double previousScale;
-  double pps;
-  double timeBlockSize;
-
-  Duration _timeUnderFocal;
-  double scaleFocal;
+  late double scale = scaleController.minScale;
+  late double widgetWidth;
+  double? previousScale;
+  double? pps;
+  late double timeBlockSize = widget.minimumTimeWidgetExtent;
 
   double get scaledPixelPerSeconds => (pps ?? 1) * scale;
 
-  TimelineEditorScaleController _ownScaleController;
+  TimelineEditorScaleController? _ownScaleController;
   TimelineEditorScaleController get scaleController {
-    if (widget.scaleController == null && _ownScaleController == null)
+    if (widget.scaleController == null && _ownScaleController == null) {
       _ownScaleController = TimelineEditorScaleController();
+    }
 
-    return widget.scaleController ?? _ownScaleController;
+    return widget.scaleController ?? _ownScaleController!;
   }
 
-  ScrollController scrollController;
-  LinkedScrollControllerGroup _controllers;
+  late ScrollController scrollController;
+  late LinkedScrollControllerGroup _controllers;
+
+  StreamSubscription<double>? _scaleSubscription;
 
-  double previousMaxWidth;
+  late double previousMaxWidth;
   String twoDigits(int n) {
     if (n >= 10) return "$n";
     return "0$n";
   }
 
+  static double _calculateTimeBlockSizeFromBreakpoints({
+    required double displayWidth,
+    required double scaledPixelPerSeconds,
+    required double minimumTimeWidth,
+  }) {
+    const List<Map<String, dynamic>> breakpoints = [
+      {'duration': Duration(seconds: 5), 'size': 5},
+      {'duration': Duration(seconds: 10), 'size': 10},
+      {'duration': Duration(seconds: 30), 'size': 30},
+      {'duration': Duration(minutes: 1), 'size': 60},
+    ];
+    var targetNumberOfTimeWidget = displayWidth / minimumTimeWidth;
+    var targetDurationOfTimeWidget = durationFromSeconds(
+        displayWidth / scaledPixelPerSeconds / targetNumberOfTimeWidget);
+
+    final breakpoint = breakpoints.firstWhere(
+      (element) => targetDurationOfTimeWidget < element['duration'],
+      orElse: () => {'size': targetDurationOfTimeWidget.inSeconds - 60},
+    );
+
+    return breakpoint['size'] * scaledPixelPerSeconds;
+  }
+
   void updateTimeBlockSize(double displayWidth) {
     if (widget.timeWidgetEvery != null) {
       timeBlockSize =
-          widget.timeWidgetEvery.inSecondsAsDouble * scaledPixelPerSeconds;
-    } else {
-      var targetNumberOfTimeWidget =
-          displayWidth / (widget.minimumTimeWidgetExtent ?? 70);
-      var targetDurationOfTimeWidget = durationFromSeconds(
-          displayWidth / scaledPixelPerSeconds / targetNumberOfTimeWidget);
-      if (targetDurationOfTimeWidget.inSeconds < 5)
-        timeBlockSize = 5 * scaledPixelPerSeconds;
-      else if (targetDurationOfTimeWidget.inSeconds < 10)
-        timeBlockSize = 10 * scaledPixelPerSeconds;
-      else if (targetDurationOfTimeWidget.inSeconds < 30)
-        timeBlockSize = 30 * scaledPixelPerSeconds;
-      else if (targetDurationOfTimeWidget.inMinutes < 1)
-        timeBlockSize = 60 * scaledPixelPerSeconds;
-      else if (targetDurationOfTimeWidget.inMinutes < 60)
-        timeBlockSize = (targetDurationOfTimeWidget.inMinutes + 1) *
-            60 *
-            scaledPixelPerSeconds;
+          widget.timeWidgetEvery!.inSecondsAsDouble * scaledPixelPerSeconds;
+      return;
     }
+
+    timeBlockSize = _calculateTimeBlockSizeFromBreakpoints(
+      displayWidth: displayWidth,
+      scaledPixelPerSeconds: scaledPixelPerSeconds,
+      minimumTimeWidth: widget.minimumTimeWidgetExtent,
+    );
   }
 
   void computePPS(double width) {
@@ -160,50 +172,47 @@ class _TimelineEditorState extends State<TimelineEditor> {
     updateTimeBlockSize(width);
   }
 
-  String secondsToString(Duration duration, Duration totalDuration) {
-    var _duration = Duration(microseconds: duration.inMicroseconds);
-    int weeks = _duration.inDays > 7 ? (_duration.inDays / 7).floor() : 0;
-    _duration = _duration - Duration(days: weeks * 7);
-    int days = _duration.inDays;
-    _duration = _duration - Duration(days: _duration.inDays);
-    int hours = _duration.inHours;
-    _duration = _duration - Duration(hours: _duration.inHours);
-    int minutes = _duration.inMinutes;
-    _duration = _duration - Duration(minutes: _duration.inMinutes);
-    int seconds = _duration.inSeconds;
-
-    if (weeks > 1)
+  String secondsToString(Duration duration) {
+    var curDuration = Duration(microseconds: duration.inMicroseconds);
+    final weeks = curDuration.inDays > 7 ? (curDuration.inDays / 7).floor() : 0;
+    curDuration = curDuration - Duration(days: weeks * 7);
+    final days = curDuration.inDays;
+    curDuration = curDuration - Duration(days: curDuration.inDays);
+    final hours = curDuration.inHours;
+    curDuration = curDuration - Duration(hours: curDuration.inHours);
+    final minutes = curDuration.inMinutes;
+    curDuration = curDuration - Duration(minutes: curDuration.inMinutes);
+    final seconds = curDuration.inSeconds;
+
+    if (weeks >= 1) {
       return '${weeks}w${days}d';
-    else if (days > 1)
+    } else if (days >= 1) {
       return '${days}d ${hours}h';
-    else if (hours > 1)
+    } else if (hours >= 1) {
       return '${hours}h${twoDigits(minutes)}';
-    else
+    } else {
       return '${twoDigits(minutes)}:${twoDigits(seconds)}';
+    }
   }
 
   void _onScaleStart(double dx) {
     previousScale = scale;
-    _timeUnderFocal =
-        durationFromSeconds((dx + scrollController.offset) / pps / scale);
     // (details.focalPoint.dx + scrollController.offset) / pps / scale);
   }
 
   void _onScaleUpdate(double details) {
-    // print("Details $details");
-    var newScale = previousScale * details; //.scale;
-    if (newScale < 1) newScale = 1;
-    scaleController.setScale(newScale);
+    final newScale = (previousScale ?? scale) * details; //.scale;
+    scaleController.setScale(newScale >= 1 ? newScale : 1);
   }
 
   void _onScaleEnd(_) {
     previousScale = null;
-    _timeUnderFocal = null;
   }
 
   @override
   void didUpdateWidget(TimelineEditor oldWidget) {
     super.didUpdateWidget(oldWidget);
+    previousMaxWidth = MediaQuery.of(context).size.width;
     if (oldWidget.duration != widget.duration) {
       computePPS(previousMaxWidth);
       setState(() {});
@@ -215,21 +224,41 @@ class _TimelineEditorState extends State<TimelineEditor> {
     super.initState();
     _controllers = LinkedScrollControllerGroup();
     scrollController = _controllers.addAndGet();
-    scaleController.scaleUpdates.listen((s) {
-      if (scale != s) {
-        setState(() => scale = s);
-        updateTimeBlockSize(widgetWidth);
-        var offset = _controllers.offset;
-        _controllers.resetScroll();
-        _controllers.jumpTo(offset);
+
+    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
+      previousMaxWidth = MediaQuery.of(context).size.width;
+      computePPS(previousMaxWidth);
+
+      setState(() => {});
+
+      if (widget.initialDuration != null) {
+        _controllers.jumpTo(
+          scaledPixelPerSeconds *
+              (widget.initialDuration?.inSecondsAsDouble ?? 1),
+        );
       }
     });
+
+    _scaleSubscription = scaleController.scaleUpdates.listen((s) {
+      while (!mounted) {}
+
+      if (scale == s) {
+        return;
+      }
+
+      setState(() => scale = s);
+      updateTimeBlockSize(widgetWidth);
+
+      _controllers.resetScroll();
+      _controllers.jumpTo(_controllers.offset);
+    });
   }
 
   @override
   void dispose() {
     scrollController.dispose();
     _ownScaleController?.dispose();
+    _scaleSubscription?.cancel();
     super.dispose();
   }
 
@@ -266,8 +295,6 @@ class _TimelineEditorState extends State<TimelineEditor> {
                 widget.trackBuilder,
                 widget.countTracks,
                 widget.positionStream,
-                widget.blocksEvery,
-                widget.onPositionTap,
                 widget.separatorColor,
                 widget.timelineTextStyle,
                 Theme.of(context).brightness,
@@ -287,81 +314,91 @@ class _TimelineEditorState extends State<TimelineEditor> {
                             totalFullTimeSlots) *
                         timeBlockSize;
 
-                return Container(
-                  child: Row(
-                    children: [
-                      Column(
-                        // mainAxisSize: MainAxisSize.max,
-                        // mainAxisAlignment: MainAxisAlignment.spaceAround,
+                return Row(
+                  children: [
+                    Column(
+                      // mainAxisSize: MainAxisSize.max,
+                      // mainAxisAlignment: MainAxisAlignment.spaceAround,
+                      children: [
+                        SizedBox(
+                          height: widget.timeHeight * 2,
+                          child: widget.timelineLeadingWidget,
+                        ),
+                        ...List<Widget>.generate(
+                          widget.countTracks,
+                          (i) => SizedBox(
+                            height: widget
+                                .trackBuilder(
+                                  i,
+                                  scaledPixelPerSeconds,
+                                  widget.duration,
+                                  _controllers,
+                                )
+                                .trackHeight,
+                            child: widget.leadingWidgetBuilder != null
+                                ? widget.leadingWidgetBuilder!(i)
+                                : const SizedBox.shrink(),
+                          ),
+                        ),
+                      ],
+                    ),
+                    Flexible(
+                      child: Stack(
                         children: [
-                          SizedBox(
-                            height: widget.timeHeight * 2,
-                            child: widget.timelineLeadingWidget,
+                          Column(
+                            children: <Widget>[
+                              SizedBox(
+                                height: widget.timeHeight,
+                                child: ListView.builder(
+                                  key: const Key('timelineeditor-times'),
+                                  controller: scrollController,
+                                  scrollDirection: Axis.horizontal,
+                                  itemCount: totalTimeSlots,
+                                  itemBuilder: (context, index) {
+                                    return buildTextTime(
+                                      index,
+                                      scaledPixelPerSeconds,
+                                      index <= totalFullTimeSlots - 1
+                                          ? timeBlockSize
+                                          : lastTimeBlockSize,
+                                      context,
+                                    );
+                                  },
+                                ),
+                              ),
+                              ...List.generate(
+                                widget.countTracks,
+                                (index) => widget.trackBuilder(
+                                  index,
+                                  scaledPixelPerSeconds,
+                                  widget.duration,
+                                  _controllers,
+                                ),
+                              ),
+                            ],
                           ),
-                          ...List<Widget>.generate(
-                              widget.countTracks,
-                              (i) => SizedBox(
-                                  height: widget
-                                      .trackBuilder(i, scaledPixelPerSeconds,
-                                          widget.duration, _controllers)
-                                      .trackHeight,
-                                  child: widget.leadingWidgetBuilder != null
-                                      ? widget.leadingWidgetBuilder(i)
-                                      : SizedBox.shrink())),
+                          StreamBuilder<double>(
+                            stream: widget.positionStream,
+                            builder: (context, snapshot) {
+                              return snapshot.hasData
+                                  ? Positioned(
+                                      left: (snapshot.data! *
+                                              scaledPixelPerSeconds) -
+                                          scrollController.position.pixels,
+                                      top: 0,
+                                      bottom: 0,
+                                      child: Container(
+                                        color: Colors.red,
+                                        width: 5,
+                                      ),
+                                    )
+                                  : const SizedBox.shrink();
+                            },
+                          )
                         ],
                       ),
-                      Flexible(
-                        child: Stack(
-                          children: [
-                            Column(
-                              children: <Widget>[
-                                Container(
-                                  height: widget.timeHeight,
-                                  child: ListView.builder(
-                                      key: Key('timelineeditor-times'),
-                                      controller: scrollController,
-                                      scrollDirection: Axis.horizontal,
-                                      itemCount: totalTimeSlots,
-                                      itemBuilder: (context, index) {
-                                        return buildTextTime(
-                                            index,
-                                            scaledPixelPerSeconds,
-                                            index <= totalFullTimeSlots - 1
-                                                ? timeBlockSize
-                                                : lastTimeBlockSize,
-                                            context);
-                                      }),
-                                ),
-                                ...List.generate(
-                                    widget.countTracks,
-                                    (index) => widget.trackBuilder(
-                                        index,
-                                        scaledPixelPerSeconds,
-                                        widget.duration,
-                                        _controllers)),
-                              ],
-                            ),
-                            StreamBuilder<double>(
-                                stream: widget.positionStream,
-                                builder: (context, snapshot) {
-                                  return snapshot.hasData
-                                      ? Positioned(
-                                          left: (snapshot.data *
-                                                  scaledPixelPerSeconds) -
-                                              scrollController.position.pixels,
-                                          top: 0,
-                                          bottom: 0,
-                                          child: Container(
-                                            color: Colors.red,
-                                            width: 5,
-                                          ))
-                                      : null;
-                                })
-                          ],
-                        ),
-                      ),
-                    ],
-                  ),
+                    ),
+                  ],
                 );
               }),
         ),
@@ -369,18 +406,23 @@ class _TimelineEditorState extends State<TimelineEditor> {
     );
   }
 
-  Widget buildTextTime(int i, double scaledPixelsPerSeconds,
-      double finalBlocksEvery, BuildContext context) {
+  Widget buildTextTime(
+    int i,
+    double scaledPixelsPerSeconds,
+    double finalBlocksEvery,
+    BuildContext context,
+  ) {
     var pos =
         durationFromSeconds(i * finalBlocksEvery / scaledPixelsPerSeconds);
-    if (widget.timeWidgetBuilder != null)
+    if (widget.timeWidgetBuilder != null) {
       return SizedBox(
         width: finalBlocksEvery,
-        child: widget.timeWidgetBuilder(
+        child: widget.timeWidgetBuilder!(
           pos,
           widget.duration,
         ),
       );
+    }
     return SizedBox(
       width: finalBlocksEvery,
       child: Row(
@@ -394,10 +436,7 @@ class _TimelineEditorState extends State<TimelineEditor> {
             child: Padding(
               padding: const EdgeInsets.only(left: 4.0),
               child: Text(
-                secondsToString(
-                  pos,
-                  widget.duration,
-                ),
+                secondsToString(pos),
                 style: widget.timelineTextStyle ??
                     Theme.of(context).textTheme.bodyText1,
                 overflow: TextOverflow.ellipsis,
diff --git a/lib/timeline_editor_scale_controller.dart b/lib/timeline_editor_scale_controller.dart
index 929a85d..6c82819 100644
--- a/lib/timeline_editor_scale_controller.dart
+++ b/lib/timeline_editor_scale_controller.dart
@@ -3,11 +3,11 @@ import 'dart:async';
 import 'package:rxdart/subjects.dart';
 
 class TimelineEditorScaleController {
-  final BehaviorSubject<double> _scaleStreamController =
-      BehaviorSubject<double>.seeded(1);
+  late final BehaviorSubject<double> _scaleStreamController =
+      BehaviorSubject<double>.seeded(minScale);
 
   /// max zoom scale
-  final double maxScale;
+  final double? maxScale;
 
   /// min zoom scale. Default to 1
   final double minScale;
@@ -22,11 +22,14 @@ class TimelineEditorScaleController {
   Stream<double> get scaleUpdates => _scaleStreamController.stream;
 
   void setScale(double scale) {
-    if ((minScale == null || scale >= minScale) &&
-        (maxScale == null || scale <= maxScale))
+    if (scale >= minScale && (maxScale == null || scale <= maxScale!)) {
       _scaleStreamController.add(scale);
+    }
   }
 
+  double calculateScale(Duration blockDuration, double canvasWidth) =>
+      1.677 / (canvasWidth / blockDuration.inSeconds.toDouble());
+
   Future<dynamic> dispose() {
     return _scaleStreamController.close();
   }
diff --git a/lib/timeline_editor_track.dart b/lib/timeline_editor_track.dart
index b0e0c63..7778ea1 100644
--- a/lib/timeline_editor_track.dart
+++ b/lib/timeline_editor_track.dart
@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
-import 'package:flutter/rendering.dart';
 import 'package:linked_scroll_controller/linked_scroll_controller.dart';
+
 import 'package:timeline_editor/extensions.dart';
 
 /// a box to be displayed in a [TimelineEditorTrack] with a [start] and a [duration]
@@ -9,66 +9,67 @@ class TimelineEditorCard extends ITimelineEditorCard {
   final bool selected;
 
   /// When the user tap the box. Can be used to toggle selected status
-  final VoidCallback onTap;
+  final VoidCallback? onTap;
 
   /// this box is a separated and not a card
-  final bool isSeparator;
+  final bool? isSeparator;
 
   /// optional  custom child to display in this box
-  final Widget child;
+  final Widget? child;
 
   /// background color of this box
-  final Color color;
+  final Color? color;
 
   /// optional border color when selected
-  final Color borderColor;
+  final Color? borderColor;
 
   /// optional [PopupMenuEntry] list to display if a user long press this box
   final List<PopupMenuEntry> menuEntries;
 
   /// optional callback when a user click on one of the [menuEntries]
-  final void Function(Object selectedItem) onSelectedMenuItem;
+  final void Function(Object selectedItem)? onSelectedMenuItem;
 
   /// optional callback that will activate the
   /// possibility of moving this box
-  final void Function(Duration duration) onMovedDuration;
+  final void Function(Duration duration)? onMovedDuration;
 
   /// optional callback that will activate the
   /// possibility of moving this box
-  final void Function(Duration duration) onMovedStart;
+  final void Function(Duration duration)? onMovedStart;
 
   /// optional icon for [onMovedStart]
-  final Icon onMovedStartIcon;
+  final Icon? onMovedStartIcon;
 
   /// optional icon for [onMovedDuration]
-  final Icon onMovedDurationIcon;
+  final Icon? onMovedDurationIcon;
 
   /// optional icon for [menuEntries]
-  final Icon menuEntriesIcon;
-
-  const TimelineEditorCard(Duration start,
-      {Key key,
-      Duration duration,
-      this.isSeparator,
-      this.selected = false,
-      this.onTap,
-      this.child,
-      this.color,
-      this.borderColor,
-      this.menuEntries,
-      this.onSelectedMenuItem,
-      this.onMovedDuration,
-      this.onMovedStart,
-      this.onMovedStartIcon,
-      this.onMovedDurationIcon,
-      this.menuEntriesIcon})
-      : super(key: key, start: start, duration: duration);
+  final Icon? menuEntriesIcon;
+
+  const TimelineEditorCard(
+    Duration start, {
+    super.key,
+    required super.duration,
+    this.isSeparator,
+    this.selected = false,
+    required this.onTap,
+    this.child,
+    this.color,
+    this.borderColor,
+    this.menuEntries = const [],
+    this.onSelectedMenuItem,
+    this.onMovedDuration,
+    this.onMovedStart,
+    this.onMovedStartIcon,
+    this.onMovedDurationIcon,
+    this.menuEntriesIcon,
+  }) : super(start: start);
 
   @override
   Widget build(
-    BuildContext context,
-    double pixelsPerSeconds, {
-    Duration availableSpace,
+    BuildContext context, {
+    required double pixelsPerSeconds,
+    required Duration availableSpace,
   }) {
     return TimelineEditorSizedBox(
       duration: duration ?? (start - availableSpace),
@@ -80,76 +81,79 @@ class TimelineEditorCard extends ITimelineEditorCard {
           color: color,
           elevation: 2,
           child: Stack(children: [
-            child != null ? Positioned.fill(child: child) : Container(),
+            child != null ? Positioned.fill(child: child!) : SizedBox.shrink(),
             if (selected)
               Positioned.fill(
                 child: Container(
                   decoration: BoxDecoration(
-                    border: Border.all(color: borderColor != null ? borderColor : Colors.white, width: 6),
+                    border: Border.all(
+                      color: borderColor ?? Colors.white,
+                      width: 6,
+                    ),
                   ),
                 ),
               ),
             if (onMovedDuration != null && selected)
               GestureDetector(
-                onHorizontalDragUpdate: (d) => onMovedDuration(
-                    durationFromSeconds(d.delta.dx / pixelsPerSeconds)),
+                onHorizontalDragUpdate: (d) => onMovedDuration
+                    ?.call(durationFromSeconds(d.delta.dx / pixelsPerSeconds)),
                 child: Align(
                   alignment: Alignment.centerRight,
                   child: SizedBox(
                     height: 30,
                     width: 30,
                     child: Container(
-                      color: borderColor != null ? borderColor : Colors.white,
-                      child: onMovedDurationIcon != null 
-                      ? onMovedDurationIcon 
-                      : Icon(
-                        Icons.swap_horiz,
-                        color: Colors.black,
-                      ),
+                      color: borderColor ?? Colors.white,
+                      child: onMovedDurationIcon != null
+                          ? onMovedDurationIcon
+                          : Icon(
+                              Icons.swap_horiz,
+                              color: Colors.black,
+                            ),
                     ),
                   ),
                 ),
               ),
             if (onMovedStart != null && selected)
               GestureDetector(
-                onHorizontalDragUpdate: (d) => onMovedStart(
-                    durationFromSeconds(d.delta.dx / pixelsPerSeconds)),
+                onHorizontalDragUpdate: (d) => onMovedStart
+                    ?.call(durationFromSeconds(d.delta.dx / pixelsPerSeconds)),
                 child: Align(
                   alignment: Alignment.centerLeft,
                   child: SizedBox(
                     height: 30,
                     width: 30,
                     child: Container(
-                      color: borderColor != null ? borderColor : Colors.white,
-                      child: onMovedStartIcon != null 
-                      ? onMovedStartIcon 
-                      : Icon(
-                        Icons.swap_horiz,
-                        color: Colors.black,
-                      ),
+                      color: borderColor ?? Colors.white,
+                      child: onMovedStartIcon != null
+                          ? onMovedStartIcon
+                          : Icon(
+                              Icons.swap_horiz,
+                              color: Colors.black,
+                            ),
                     ),
                   ),
                 ),
               ),
-            if (menuEntries != null && selected)
+            if (menuEntries.isNotEmpty && selected)
               Align(
                 alignment: Alignment.topCenter,
                 child: SizedBox(
                   height: 30,
                   width: 30,
                   child: PopupMenuButton(
-                    onSelected: (v) => onSelectedMenuItem(v),
+                    onSelected: (v) => onSelectedMenuItem?.call(v),
                     itemBuilder: (BuildContext context) {
                       return menuEntries;
                     },
                     child: Container(
                       color: borderColor != null ? borderColor : Colors.white,
-                      child: menuEntriesIcon != null 
-                      ? menuEntriesIcon 
-                      : Icon(
-                        Icons.menu,
-                        color: Colors.black,
-                      ),
+                      child: menuEntriesIcon != null
+                          ? menuEntriesIcon
+                          : Icon(
+                              Icons.menu,
+                              color: Colors.black,
+                            ),
                     ),
                   ),
                 ),
@@ -161,57 +165,108 @@ class TimelineEditorCard extends ITimelineEditorCard {
   }
 }
 
+class TimelineEditorEmptyCardTapResult {
+  final Duration start;
+  final Duration end;
+  final Duration duration;
+  final Duration tap;
+
+  const TimelineEditorEmptyCardTapResult({
+    required this.start,
+    required this.duration,
+    required this.tap,
+  }) : end = start + duration;
+
+  @override
+  String toString() =>
+      'TimelineEditorEmptyCardTapResult(start: $start, end: $end, tap: $tap)';
+}
+
 class TimelineEditorEmptyCard extends ITimelineEditorCard {
-  const TimelineEditorEmptyCard(Duration start, Duration duration, {Key key})
-      : super(key: key, start: start, duration: duration);
+  final ValueChanged<TimelineEditorEmptyCardTapResult>? onTap;
+  const TimelineEditorEmptyCard({
+    super.key,
+    required super.start,
+    required Duration duration,
+    required this.onTap,
+  }) : super(duration: duration);
 
   Widget build(
-    BuildContext context,
-    double pixelsPerSeconds, {
-    Duration availableSpace,
+    BuildContext context, {
+    required double pixelsPerSeconds,
+    required Duration availableSpace,
   }) {
-    return TimelineEditorSizedBox(
+    final card = TimelineEditorSizedBox(
       duration: duration,
       pixelsPerSeconds: pixelsPerSeconds,
       child: Container(),
     );
+
+    if (onTap == null) {
+      return card;
+    }
+
+    return GestureDetector(
+      onTapUp: (details) {
+        final tap = start +
+            durationFromSeconds(
+              details.localPosition.dx / pixelsPerSeconds,
+            );
+        onTap!.call(TimelineEditorEmptyCardTapResult(
+          start: start,
+          duration: duration!,
+          tap: tap,
+        ));
+      },
+      child: Container(
+        color: Colors.transparent,
+        child: card,
+      ),
+    );
   }
 }
 
 abstract class ITimelineEditorCard {
-  final Key key;
+  final Key? key;
 
   /// duration in seconds of the box. Let it null for continuous boxes
-  final Duration duration;
+  final Duration? duration;
 
   /// the start time in seconds of this box
   final Duration start;
-  @mustCallSuper
-  const ITimelineEditorCard({this.key, this.start, this.duration});
+
+  const ITimelineEditorCard({
+    this.key,
+    required this.start,
+    this.duration,
+  });
 
   Widget build(
-    BuildContext context,
-    double pixelsPerSeconds, {
-    Duration availableSpace,
+    BuildContext context, {
+    required double pixelsPerSeconds,
+    required Duration availableSpace,
   });
 }
 
 class TimelineEditorSizedBox extends StatelessWidget {
-  final Duration duration;
+  final Duration? duration;
   final double pixelsPerSeconds;
-  final double height;
+  final double? height;
   final Widget child;
 
   const TimelineEditorSizedBox({
-    Key key,
+    super.key,
     this.height,
-    @required this.duration,
-    @required this.pixelsPerSeconds,
-    @required this.child,
-  }) : super(key: key);
+    this.duration,
+    required this.pixelsPerSeconds,
+    required this.child,
+  });
+
   @override
   Widget build(BuildContext context) {
-    var width = durationToSeconds(duration) * pixelsPerSeconds;
+    final width = duration != null
+        ? durationToSeconds(duration!) * pixelsPerSeconds
+        : 0.0;
     return SizedBox(
       width: width > 0 ? width : 0,
       height: height ?? 100,
@@ -220,36 +275,59 @@ class TimelineEditorSizedBox extends StatelessWidget {
   }
 }
 
-/// A track that can be used with the [timeline_editor] builder
+/// A widget that displays a horizontal timeline track for a given duration, with customizable cards displayed
+/// along the timeline. Each card can represent a block of time and can be interacted with by the user.
+///
+/// The [boxes] list contains the cards to be displayed on the track. Each card must implement the [ITimelineEditorCard]
+/// interface.
+///
+/// The [pixelsPerSeconds] parameter determines how many pixels represent one second on the timeline. This value
+/// affects the scale of the timeline and how quickly the user can scrub through it.
+///
+/// The [scrollControllers] parameter is a [LinkedScrollControllerGroup] that links the scrolling behavior of this
+/// track with other tracks in the timeline editor. This allows the user to horizontally scroll through multiple
+/// tracks at once.
+///
+/// The [onEmptySlotTap] parameter is a callback that is called when the user taps an empty space on the timeline.
+/// It provides a [TimelineEditorEmptyCardTapResult] object that contains information about the tapped location
+/// on the timeline, such as the start time and duration of the selected area.
+///
+/// The [trackHeight] parameter determines the height of the track.
+///
+/// The [duration] parameter specifies the total duration of the timeline.
+///
+/// The [defaultColor] parameter specifies the default color to use for cards that do not provide their own color.
 class TimelineEditorTrack extends StatefulWidget {
   final List<ITimelineEditorCard> boxes;
   final double pixelsPerSeconds;
   final LinkedScrollControllerGroup scrollControllers;
+  final ValueChanged<TimelineEditorEmptyCardTapResult>? onEmptySlotTap;
 
   /// height of this track
   final double trackHeight;
 
   final Duration duration;
 
-  final Color defaultColor;
-
-  const TimelineEditorTrack(
-      {Key key,
-      @required this.scrollControllers,
-      @required this.boxes,
-      @required this.pixelsPerSeconds,
-      @required this.duration,
-      this.trackHeight = 100,
-      this.defaultColor})
-      : super(key: key);
+  final Color? defaultColor;
+
+  const TimelineEditorTrack({
+    super.key,
+    required this.scrollControllers,
+    required this.boxes,
+    required this.pixelsPerSeconds,
+    required this.duration,
+    this.trackHeight = 100,
+    this.defaultColor,
+    this.onEmptySlotTap,
+  });
 
   @override
   _TimelineEditorTrackState createState() => _TimelineEditorTrackState();
 }
 
 class _TimelineEditorTrackState extends State<TimelineEditorTrack> {
-  List<ITimelineEditorCard> boxes;
-  ScrollController _controller;
+  List<ITimelineEditorCard> boxes = [];
+  late ScrollController _controller;
 
   @override
   void initState() {
@@ -273,29 +351,30 @@ class _TimelineEditorTrackState extends State<TimelineEditorTrack> {
   }
 
   void setup() {
-    List<ITimelineEditorCard> targetBoxes = List<ITimelineEditorCard>();
-
-    if (widget.boxes != null && widget.boxes.length > 0) {
-      var sortedStart = widget.boxes.toList();
-      sortedStart.sort((a, b) => a.start.compareTo(b.start));
-      var blankFirstBox = TimelineEditorEmptyCard(
-        Duration.zero,
-        sortedStart[0].start,
+    final targetBoxes = <ITimelineEditorCard>[];
+
+    if (widget.boxes.length > 0) {
+      final sortedStart = widget.boxes.toList()
+        ..sort((a, b) => a.start.compareTo(b.start));
+      final blankFirstBox = TimelineEditorEmptyCard(
+        start: Duration.zero,
+        duration: sortedStart[0].start,
+        onTap: widget.onEmptySlotTap,
       );
       targetBoxes.add(blankFirstBox);
       var i = 0;
-      for (var box in sortedStart) {
+      for (final box in sortedStart) {
         i++;
-        var nextBoxTime =
+
+        final nextBoxTime =
             i < sortedStart.length ? sortedStart[i].start : widget.duration;
         targetBoxes.add(box);
-        var end = box.start + box.duration;
-        targetBoxes.add(
-          TimelineEditorEmptyCard(
-            end,
-            nextBoxTime - end,
-          ),
-        );
+        final end = box.start + (box.duration ?? Duration.zero);
+        targetBoxes.add(TimelineEditorEmptyCard(
+          start: end,
+          duration: nextBoxTime - end,
+          onTap: widget.onEmptySlotTap,
+        ));
       }
     }
 
@@ -320,30 +399,34 @@ class _TimelineEditorTrackState extends State<TimelineEditorTrack> {
     return Container(
       height: widget.trackHeight,
       child: ListView.builder(
-          key: widget.key,
-          scrollDirection: Axis.horizontal,
-          controller: _controller,
-          itemCount: boxes.length,
-          itemBuilder: (context, index) {
-            var b = boxes[index];
-            var availableSpace = boxes.length > index + 2
-                ? boxes[index + 1].start
-                : widget.duration;
-
-            return b.build(context, widget.pixelsPerSeconds,
-                availableSpace: availableSpace);
-            // return GestureDetector(
-            //   onTap:
-            //       b.onTap == null ? null : () => b.onTap(b.start, b.duration),
-            //   onHorizontalDragStart:
-            //       b.onMoved == null ? null : (_) => globalMoveSinceLastSend = 0,
-            //   onHorizontalDragUpdate:
-            //       b.onMoved == null ? null : (d) => _onDragUpdate(d, b),
-            //   onHorizontalDragEnd:
-            //       b.onMovedEnd == null ? null : (_) => b.onMovedEnd(),
-            //   child: b.build(context, widget.pixelsPerSeconds),
-            // );
-          }),
+        key: widget.key,
+        scrollDirection: Axis.horizontal,
+        controller: _controller,
+        itemCount: boxes.length,
+        itemBuilder: (context, index) {
+          final b = boxes[index];
+          final availableSpace = boxes.length > index + 2
+              ? boxes[index + 1].start
+              : widget.duration;
+
+          return b.build(
+            context,
+            pixelsPerSeconds: widget.pixelsPerSeconds,
+            availableSpace: availableSpace,
+          );
+          // return GestureDetector(
+          //   onTap:
+          //       b.onTap == null ? null : () => b.onTap(b.start, b.duration),
+          //   onHorizontalDragStart:
+          //       b.onMoved == null ? null : (_) => globalMoveSinceLastSend = 0,
+          //   onHorizontalDragUpdate:
+          //       b.onMoved == null ? null : (d) => _onDragUpdate(d, b),
+          //   onHorizontalDragEnd:
+          //       b.onMovedEnd == null ? null : (_) => b.onMovedEnd(),
+          //   child: b.build(context, widget.pixelsPerSeconds),
+          // );
+        },
+      ),
     );
   }
 }
diff --git a/pubspec.lock b/pubspec.lock
index c9562d4..2262206 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -7,54 +7,54 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.5.0-nullsafety.1"
+    version: "2.9.0"
   boolean_selector:
     dependency: transitive
     description:
       name: boolean_selector
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.0-nullsafety.1"
+    version: "2.1.0"
   characters:
     dependency: transitive
     description:
       name: characters
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0-nullsafety.3"
-  charcode:
-    dependency: transitive
-    description:
-      name: charcode
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.2.0-nullsafety.1"
+    version: "1.2.1"
   clock:
     dependency: transitive
     description:
       name: clock
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0-nullsafety.1"
+    version: "1.1.1"
   collection:
     dependency: transitive
     description:
       name: collection
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.15.0-nullsafety.3"
+    version: "1.16.0"
   fake_async:
     dependency: transitive
     description:
       name: fake_async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0-nullsafety.1"
+    version: "1.3.1"
   flutter:
     dependency: "direct main"
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_lints:
+    dependency: "direct dev"
+    description:
+      name: flutter_lints
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.1"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -66,35 +66,49 @@ packages:
       name: linked_scroll_controller
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.1.2"
+    version: "0.2.0"
+  lints:
+    dependency: transitive
+    description:
+      name: lints
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.1"
   matcher:
     dependency: transitive
     description:
       name: matcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.10-nullsafety.1"
+    version: "0.12.12"
+  material_color_utilities:
+    dependency: transitive
+    description:
+      name: material_color_utilities
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.5"
   meta:
     dependency: transitive
     description:
       name: meta
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.3.0-nullsafety.3"
+    version: "1.8.0"
   path:
     dependency: transitive
     description:
       name: path
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.0-nullsafety.1"
+    version: "1.8.2"
   rxdart:
     dependency: "direct main"
     description:
       name: rxdart
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.24.1"
+    version: "0.27.7"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -106,56 +120,49 @@ packages:
       name: source_span
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.0-nullsafety.2"
+    version: "1.9.0"
   stack_trace:
     dependency: transitive
     description:
       name: stack_trace
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.10.0-nullsafety.1"
+    version: "1.10.0"
   stream_channel:
     dependency: transitive
     description:
       name: stream_channel
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.0-nullsafety.1"
+    version: "2.1.0"
   string_scanner:
     dependency: transitive
     description:
       name: string_scanner
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0-nullsafety.1"
+    version: "1.1.1"
   term_glyph:
     dependency: transitive
     description:
       name: term_glyph
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0-nullsafety.1"
+    version: "1.2.1"
   test_api:
     dependency: transitive
     description:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.2.19-nullsafety.2"
-  typed_data:
-    dependency: transitive
-    description:
-      name: typed_data
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.3.0-nullsafety.3"
+    version: "0.4.12"
   vector_math:
     dependency: transitive
     description:
       name: vector_math
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.0-nullsafety.3"
+    version: "2.1.2"
 sdks:
-  dart: ">=2.10.0-110 <2.11.0"
-  flutter: ">=1.12.13+hotfix.5 <2.0.0"
+  dart: ">=2.18.0 <3.0.0"
+  flutter: ">=1.13.8"
diff --git a/pubspec.yaml b/pubspec.yaml
index 1b8c882..66448f5 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -1,20 +1,24 @@
 name: timeline_editor
 description: A flutter wiidget to help you manage timelines like video timeline with tracks editable or not. with move, actions...
-version: 0.4.0-preview.1
+version: 0.5.0-preview
 homepage: https://github.com/neckaros/timeline_editor
 
 environment:
-  sdk: ">=2.7.0 <3.0.0"
+  sdk: ">=2.18.0 <3.0.0"
+
+
 
 dependencies:
   flutter:
     sdk: flutter
-  linked_scroll_controller: ^0.1.2
-  rxdart: ^0.24.1
+  linked_scroll_controller: ^0.2.0
+  rxdart: ^0.27.7
 
 dev_dependencies:
   flutter_test:
     sdk: flutter
+  flutter_lints: ^2.0.1
+
 
 # For information on the generic Dart part of this file, see the
 # following page: https://dart.dev/tools/pub/pubspec