custom time

CHANGELOG.md

@@ -1,3 +1,20 @@
+## 0.3.4
+### Fix
+* Fix too much logs ([Issue 5](https://github.com/neckaros/timeline_editor/issues/5))
+### Enhancements
+* You can now provide your custom time widget ([Request 3](https://github.com/neckaros/timeline_editor/issues/3)):
+```dart
+TimelineEditor(
+  timeWidgetExtent: 100,
+  timeWidgetBuilder: (d, t) => Padding(
+            padding: const EdgeInsets.only(left: 8.0),
+            child: Text(
+              '${d.inSeconds}/${t.inSeconds}',
+              overflow: TextOverflow.ellipsis,
+            ),
+          ),
+```
+
 ## 0.3.2
 * Fix scroll will overflow sometimes
 

example/lib/main.dart

@@ -15,6 +15,7 @@ class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
   Duration box2Start = Duration(seconds: 120);
   bool deleted = false;
   double position = 0;
+  bool customTimeString = false;
   StreamController<double> positionController;
   Timer progressTimer;
 
@@ -121,12 +122,27 @@ class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
                               _controller.status == AnimationStatus.completed
                           ? _controller.reverse()
                           : _controller.forward(),
-                )
+                ),
+                SwitchListTile(
+                    title: Text('Custom time string'),
+                    value: customTimeString,
+                    onChanged: (value) =>
+                        setState(() => customTimeString = value)),
               ],
             ))),
             Padding(
                 padding: const EdgeInsets.only(bottom: 8.0),
                 child: TimelineEditor(
+                  timeWidgetExtent: customTimeString ? 100 : null,
+                  timeWidgetBuilder: customTimeString
+                      ? (d, t) => Padding(
+                            padding: const EdgeInsets.only(left: 8.0),
+                            child: Text(
+                              '${d.inSeconds}/${t.inSeconds}',
+                              overflow: TextOverflow.ellipsis,
+                            ),
+                          )
+                      : null,
                   onPositionTap: (s) => position = s,
                   positionStream: positionController.stream,
                   countTracks: 2,

example/pubspec.lock

@@ -162,7 +162,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.3.3"
+    version: "0.3.4"
   typed_data:
     dependency: transitive
     description:

lib/timeline_editor.dart

@@ -25,6 +25,15 @@ class TimelineEditor extends StatefulWidget {
   /// Timeline time text theme. By default we use Theme.of(context).textTheme.bodyText1
   final TextStyle timelineTextStyle;
 
+  /// Opational: Convert duration to string for the timeline headers
+  final Widget Function(Duration duration, Duration totalDuration)
+      timeWidgetBuilder;
+
+  /// Optional size of the time display in the timeline.
+  /// Can be used if you have custom string that takes more than 70pixels
+  /// ignored if blocksEvery is set
+  final int timeWidgetExtent;
+
   /// 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;
@@ -53,6 +62,8 @@ class TimelineEditor extends StatefulWidget {
     @required this.trackBuilder,
     @required this.countTracks,
     this.timelineTextStyle,
+    this.timeWidgetBuilder,
+    this.timeWidgetExtent = 70,
     this.separatorColor,
     this.positionStream,
     this.blocksEvery = const Duration(seconds: 5),
@@ -103,11 +114,9 @@ class _TimelineEditorState extends State<TimelineEditor> {
 
   void _onScaleStart(ScaleStartDetails details) {
     previousScale = scale;
-    print('=$scale=');
   }
 
   void _onScaleUpdate(ScaleUpdateDetails details) {
-    print('=$previousScale + ${details.scale}=');
     var newScale = previousScale * details.scale;
     if (newScale < 1) newScale = 1;
     setState(() => scale = newScale);
@@ -148,7 +157,7 @@ class _TimelineEditorState extends State<TimelineEditor> {
                 var pixelPerSeconds = pps * scale;
                 var finalBlocksEvery = max(
                     durationToSeconds(widget.blocksEvery),
-                    (70 / pixelPerSeconds));
+                    ((widget.timeWidgetExtent ?? 70) / pixelPerSeconds));
                 var totalSlots =
                     (durationToSeconds(widget.duration) / finalBlocksEvery)
                         .floor();
@@ -251,13 +260,17 @@ class _TimelineEditorState extends State<TimelineEditor> {
   }
 
   Padding buildTextTime(int i, double finalBlocksEvery, BuildContext context) {
+    var pos = durationFromSeconds(i * finalBlocksEvery);
+    if (widget.timeWidgetBuilder != null)
+      return widget.timeWidgetBuilder(
+        pos,
+        widget.duration,
+      );
     return Padding(
       padding: const EdgeInsets.only(left: 8.0),
       child: Text(
         secondsToString(
-          Duration(
-            milliseconds: ((i * finalBlocksEvery) * 1000).toInt(),
-          ),
+          pos,
           widget.duration,
         ),
         style:

pubspec.yaml

@@ -1,6 +1,6 @@
 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.3.3
+version: 0.3.4
 homepage: https://github.com/neckaros/timeline_editor
 
 environment: