version 0.9.0

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [0.9.0] - August 12, 2021
 
-- 
+- Added `barCapShape` to select `BarCapShape.round` or `BarCapShape.square` for the ends. (#20)
+- Added `thumbCanPaintOutsideBar` to control whether the thumb paints before the start or after then end of the bar. (#21)
 - Fixed sizing bug when bar height is greater that thumb diameter.
 - Fixed dragging and thumb painting misalignment bug.
 - Fixed jittery bar that readjusts for changing label widths when labels on sides.

example/lib/main.dart

@@ -66,11 +66,12 @@ class _HomeWidgetState extends State<HomeWidget> {
   var _labelPadding = 0.0;
   var _barHeight = 5.0;
   var _barCapShape = BarCapShape.round;
-  Color? _baseBarColor = null;
-  Color? _progressBarColor = null;
-  Color? _bufferedBarColor = null;
-  Color? _thumbColor = null;
-  Color? _thumbGlowColor = null;
+  Color? _baseBarColor;
+  Color? _progressBarColor;
+  Color? _bufferedBarColor;
+  Color? _thumbColor;
+  Color? _thumbGlowColor;
+  var _thumbCanPaintOutsideBar = true;
 
   @override
   void initState() {
@@ -128,10 +129,11 @@ class _HomeWidgetState extends State<HomeWidget> {
                       '------- Bar -------',
                       style: TextStyle(fontSize: 20),
                     ),
+                    _barColorButtons(),
                     _barCapShapeButtons(),
                     _barHeightButtons(),
                     _thumbSizeButtons(),
-                    _barColorButtons(),
+                    _thumbOutsideBarButtons(),
                   ],
                 ),
               ),
@@ -379,6 +381,23 @@ class _HomeWidgetState extends State<HomeWidget> {
     ]);
   }
 
+  Wrap _thumbOutsideBarButtons() {
+    return Wrap(children: [
+      OutlinedButton(
+        child: const Text('thumb can paint outside bar'),
+        onPressed: () {
+          setState(() => _thumbCanPaintOutsideBar = true);
+        },
+      ),
+      OutlinedButton(
+        child: const Text('false'),
+        onPressed: () {
+          setState(() => _thumbCanPaintOutsideBar = false);
+        },
+      ),
+    ]);
+  }
+
   StreamBuilder<DurationState> _progressBar() {
     return StreamBuilder<DurationState>(
       stream: _durationState,
@@ -405,6 +424,7 @@ class _HomeWidgetState extends State<HomeWidget> {
           thumbGlowColor: _thumbGlowColor,
           barCapShape: _barCapShape,
           thumbRadius: _thumbRadius,
+          thumbCanPaintOutsideBar: _thumbCanPaintOutsideBar,
           timeLabelLocation: _labelLocation,
           timeLabelType: _labelType,
           timeLabelTextStyle: _labelStyle,

example/pubspec.lock

@@ -21,7 +21,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.8.0"
+    version: "0.9.0"
   boolean_selector:
     dependency: transitive
     description:

lib/audio_video_progress_bar.dart

@@ -91,6 +91,7 @@ class ProgressBar extends LeafRenderObjectWidget {
     this.thumbColor,
     this.thumbGlowColor,
     this.thumbGlowRadius = 30.0,
+    this.thumbCanPaintOutsideBar = true,
     this.timeLabelLocation,
     this.timeLabelType,
     this.timeLabelTextStyle,
@@ -207,6 +208,23 @@ class ProgressBar extends LeafRenderObjectWidget {
   /// By default it is 30.
   final double thumbGlowRadius;
 
+  /// Whether the thumb radius will before the start of the bar when at the
+  /// beginning or after the end of the bar when at the end.
+  ///
+  /// The default is `true` and this means that the thumb will be painted
+  /// outside of the bounds of the widget if there are no side labels. You can
+  /// wrap [ProgressBar] with a `Padding` widget if your layout needs to leave
+  /// some extra room for the thumb.
+  ///
+  /// When set to `false` the thumb will be clamped within the width of the
+  /// bar. This is nice for aligning the thumb with vertical labels at the start
+  /// and end of playback. However, because of the clamping, the thumb won't
+  /// move during audio/video playback when near the ends. Depending on the
+  /// size of the thumb and the length of the song, this usually only lasts
+  /// a few seconds. The progress label still indicates that playback
+  /// is happening during this time, though.
+  final bool thumbCanPaintOutsideBar;
+
   /// The location for the [progress] and [total] duration text labels.
   ///
   /// By default the labels appear under the progress bar but you can also
@@ -253,6 +271,7 @@ class ProgressBar extends LeafRenderObjectWidget {
       thumbGlowColor:
           thumbGlowColor ?? (thumbColor ?? primaryColor).withAlpha(80),
       thumbGlowRadius: thumbGlowRadius,
+      thumbCanPaintOutsideBar: thumbCanPaintOutsideBar,
       timeLabelLocation: timeLabelLocation ?? TimeLabelLocation.below,
       timeLabelType: timeLabelType ?? TimeLabelType.totalTime,
       timeLabelTextStyle: textStyle,
@@ -284,6 +303,7 @@ class ProgressBar extends LeafRenderObjectWidget {
       ..thumbGlowColor =
           thumbGlowColor ?? (thumbColor ?? primaryColor).withAlpha(80)
       ..thumbGlowRadius = thumbGlowRadius
+      ..thumbCanPaintOutsideBar = thumbCanPaintOutsideBar
       ..timeLabelLocation = timeLabelLocation ?? TimeLabelLocation.below
       ..timeLabelType = timeLabelType ?? TimeLabelType.totalTime
       ..timeLabelTextStyle = textStyle
@@ -315,6 +335,8 @@ class ProgressBar extends LeafRenderObjectWidget {
     properties.add(ColorProperty('thumbColor', thumbColor));
     properties.add(ColorProperty('thumbGlowColor', thumbGlowColor));
     properties.add(DoubleProperty('thumbGlowRadius', thumbGlowRadius));
+    properties.add(FlagProperty('thumbCanPaintOutsideBar',
+        value: thumbCanPaintOutsideBar));
     properties
         .add(StringProperty('timeLabelLocation', timeLabelLocation.toString()));
     properties.add(StringProperty('timeLabelType', timeLabelType.toString()));
@@ -373,6 +395,7 @@ class _RenderProgressBar extends RenderBox {
     required Color thumbColor,
     required Color thumbGlowColor,
     double thumbGlowRadius = 30.0,
+    bool thumbCanPaintOutsideBar = true,
     required TimeLabelLocation timeLabelLocation,
     required TimeLabelType timeLabelType,
     TextStyle? timeLabelTextStyle,
@@ -393,6 +416,7 @@ class _RenderProgressBar extends RenderBox {
         _thumbColor = thumbColor,
         _thumbGlowColor = thumbGlowColor,
         _thumbGlowRadius = thumbGlowRadius,
+        _thumbCanPaintOutsideBar = thumbCanPaintOutsideBar,
         _timeLabelLocation = timeLabelLocation,
         _timeLabelType = timeLabelType,
         _timeLabelTextStyle = timeLabelTextStyle,
@@ -421,7 +445,10 @@ class _RenderProgressBar extends RenderBox {
   // This padding is always used between the time labels and the progress bar
   // when the time labels are on the sides. Any user defined [timeLabelPadding]
   // is in addition to this.
-  double get _defaultSidePadding => thumbRadius + 5;
+  double get _defaultSidePadding {
+    const minPadding = 5.0;
+    return (_thumbCanPaintOutsideBar) ? thumbRadius + minPadding : minPadding;
+  }
 
   void _onDragStart(DragStartDetails details) {
     _userIsDraggingThumb = true;
@@ -691,6 +718,15 @@ class _RenderProgressBar extends RenderBox {
     markNeedsLayout();
   }
 
+  /// Whether the thumb will paint before the start or after the end of the bar.
+  bool get thumbCanPaintOutsideBar => _thumbCanPaintOutsideBar;
+  bool _thumbCanPaintOutsideBar;
+  set thumbCanPaintOutsideBar(bool value) {
+    if (_thumbCanPaintOutsideBar == value) return;
+    _thumbCanPaintOutsideBar = value;
+    markNeedsPaint();
+  }
+
   /// The position of the duration text labels for the progress and total time.
   TimeLabelLocation get timeLabelLocation => _timeLabelLocation;
   TimeLabelLocation _timeLabelLocation;
@@ -709,6 +745,7 @@ class _RenderProgressBar extends RenderBox {
   set timeLabelType(TimeLabelType value) {
     if (_timeLabelType == value) return;
     _timeLabelType = value;
+    _clearLabelCache();
     markNeedsLayout();
   }
 
@@ -719,6 +756,7 @@ class _RenderProgressBar extends RenderBox {
   set timeLabelTextStyle(TextStyle? value) {
     if (_timeLabelTextStyle == value) return;
     _timeLabelTextStyle = value;
+    _clearLabelCache();
     markNeedsLayout();
   }
 
@@ -877,7 +915,7 @@ class _RenderProgressBar extends RenderBox {
 
     // progress bar
     final leftLabelWidth = leftLabelSize.width;
-    final barHeight = 2 * _thumbRadius;
+    final barHeight = _heightWhenNoLabels();
     final barWidth = size.width -
         2 * _defaultSidePadding -
         2 * _timeLabelPadding -
@@ -960,7 +998,7 @@ class _RenderProgressBar extends RenderBox {
     final barCapRadius = _barHeight / 2;
     final availableWidth = localSize.width - _barHeight;
     var thumbDx = _thumbValue * availableWidth + barCapRadius;
-    if (true) {
+    if (!_thumbCanPaintOutsideBar) {
       thumbDx = thumbDx.clamp(_thumbRadius, localSize.width - _thumbRadius);
     }
     final center = Offset(thumbDx, localSize.height / 2);

pubspec.yaml

@@ -1,7 +1,7 @@
 name: audio_video_progress_bar
 description: A progress bar widget to show or change the position of an audio or
   video stream.
-version: 0.8.0
+version: 0.9.0
 homepage: https://github.com/suragch/audio_video_progress_bar
 
 environment:

test/audio_video_progress_bar_test.dart

@@ -34,9 +34,11 @@ void main() {
         progressBarColor: const Color(0x00000000),
         bufferedBarColor: const Color(0x00000000),
         thumbRadius: 20.0,
+        barCapShape: BarCapShape.square,
         thumbColor: const Color(0x00000000),
         thumbGlowColor: const Color(0x00000000),
         thumbGlowRadius: 50.0,
+        thumbCanPaintOutsideBar: false,
         timeLabelLocation: TimeLabelLocation.sides,
         timeLabelType: TimeLabelType.remainingTime,
         timeLabelTextStyle: const TextStyle(color: Color(0x00000000)),
@@ -55,9 +57,11 @@ void main() {
     expect(progressBar.progressBarColor, const Color(0x00000000));
     expect(progressBar.bufferedBarColor, const Color(0x00000000));
     expect(progressBar.thumbRadius, 20.0);
+    expect(progressBar.barCapShape, BarCapShape.square);
     expect(progressBar.thumbColor, const Color(0x00000000));
     expect(progressBar.thumbGlowColor, const Color(0x00000000));
     expect(progressBar.thumbGlowRadius, 50.0);
+    expect(progressBar.thumbCanPaintOutsideBar, false);
     expect(progressBar.timeLabelLocation, TimeLabelLocation.sides);
     expect(progressBar.timeLabelType, TimeLabelType.remainingTime);
     expect(progressBar.timeLabelTextStyle,
@@ -357,7 +361,8 @@ void main() {
       await tester.drag(find.byType(ProgressBar), const Offset(-100, 0));
       expect(onSeekDuration, Duration.zero);
       expect(onDragStartDuration, const Duration(minutes: 2, seconds: 30));
-      expect(onDragUpdateDurations[0], const Duration(minutes: 2, seconds: 0));
+      expect(onDragUpdateDurations[0],
+          const Duration(minutes: 1, seconds: 59, milliseconds: 231));
       expect(onDragUpdateDurations[1], Duration.zero);
     });