fix jittery bar for side labels

suragch · Aug 12, 2021 · 356c36a · 356c36a
1 parent dbad73a
commit 356c36a
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,7 +1,9 @@
 ## [0.9.0] - August 12, 2021
 
 - 
-- Fix sizing bug when bar height is greater that thumb diameter.
+- 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.
 
 ## [0.8.0] - August 11, 2021
 

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -372,7 +372,7 @@ class _HomeWidgetState extends State<HomeWidget> {
             _progressBarColor = Colors.green;
             _bufferedBarColor = Colors.grey.withOpacity(0.2);
             _thumbColor = Colors.purple;
-            _thumbGlowColor = Colors.amber.withOpacity(0.3);
+            _thumbGlowColor = Colors.green.withOpacity(0.3);
           });
         },
       ),

diff --git a/lib/audio_video_progress_bar.dart b/lib/audio_video_progress_bar.dart
@@ -468,9 +468,9 @@ class _RenderProgressBar extends RenderBox {
     double lengthAfter = 0.0;
     if (_timeLabelLocation == TimeLabelLocation.sides) {
       lengthBefore =
-          _leftTimeLabel().width + _defaultSidePadding + _timeLabelPadding;
+          _leftLabelSize.width + _defaultSidePadding + _timeLabelPadding;
       lengthAfter =
-          _rightTimeLabel().width + _defaultSidePadding + _timeLabelPadding;
+          _rightLabelSize.width + _defaultSidePadding + _timeLabelPadding;
     }
     // The paint used to draw the bar line draws half of the cap before the
     // start of the line (and after the end of the line). The cap radius is
@@ -493,13 +493,33 @@ class _RenderProgressBar extends RenderBox {
     if (_progress == value) {
       return;
     }
+    if (_progress.inHours != value.inHours) {
+      _clearLabelCache();
+    }
     _progress = value;
     if (!_userIsDraggingThumb) {
       _thumbValue = _proportionOfTotal(value);
     }
     markNeedsPaint();
   }
 
+  TextPainter? _cachedLeftLabel;
+  Size get _leftLabelSize {
+    _cachedLeftLabel ??= _leftTimeLabel();
+    return _cachedLeftLabel!.size;
+  }
+
+  TextPainter? _cachedRightLabel;
+  Size get _rightLabelSize {
+    _cachedRightLabel ??= _rightTimeLabel();
+    return _cachedRightLabel!.size;
+  }
+
+  void _clearLabelCache() {
+    _cachedLeftLabel = null;
+    _cachedRightLabel = null;
+  }
+
   TextPainter _leftTimeLabel() {
     final text = _getTimeString(progress);
     return _layoutText(text);
@@ -533,6 +553,9 @@ class _RenderProgressBar extends RenderBox {
     if (_total == value) {
       return;
     }
+    if (_total.inHours != value.inHours) {
+      _clearLabelCache();
+    }
     _total = value;
     markNeedsPaint();
   }
@@ -774,7 +797,7 @@ class _RenderProgressBar extends RenderBox {
   }
 
   double _textHeight() {
-    return _leftTimeLabel().height;
+    return _leftLabelSize.height;
   }
 
   @override
@@ -821,18 +844,16 @@ class _RenderProgressBar extends RenderBox {
     // current time label
     final labelDy = (isLabelBelow) ? barHeight + _timeLabelPadding : 0.0;
     final leftLabelOffset = Offset(0, labelDy);
-    final leftTimeLabel = _leftTimeLabel();
-    leftTimeLabel.paint(canvas, leftLabelOffset);
+    _leftTimeLabel().paint(canvas, leftLabelOffset);
 
     // total or remaining time label
-    final rightTimeLabel = _rightTimeLabel();
-    final rightLabelDx = size.width - rightTimeLabel.width;
+    final rightLabelDx = size.width - _rightLabelSize.width;
     final rightLabelOffset = Offset(rightLabelDx, labelDy);
     _rightTimeLabel().paint(canvas, rightLabelOffset);
 
     // progress bar
     final barDy =
-        (isLabelBelow) ? 0.0 : leftTimeLabel.height + _timeLabelPadding;
+        (isLabelBelow) ? 0.0 : _leftLabelSize.height + _timeLabelPadding;
     _drawProgressBar(canvas, Offset(0, barDy), Size(barWidth, barHeight));
   }
 
@@ -842,20 +863,20 @@ class _RenderProgressBar extends RenderBox {
   ///
   void _drawProgressBarWithLabelsOnSides(Canvas canvas) {
     // left time label
-    final leftTimeLabel = _leftTimeLabel();
-    final verticalOffset = size.height / 2 - leftTimeLabel.height / 2;
+    final leftLabelSize = _leftLabelSize;
+    final verticalOffset = size.height / 2 - leftLabelSize.height / 2;
     final leftLabelOffset = Offset(0, verticalOffset);
-    leftTimeLabel.paint(canvas, leftLabelOffset);
+    _leftTimeLabel().paint(canvas, leftLabelOffset);
 
     // right time label
-    final rightTimeLabel = _rightTimeLabel();
-    final rightLabelWidth = rightTimeLabel.width;
+    final rightLabelSize = _rightLabelSize;
+    final rightLabelWidth = rightLabelSize.width;
     final totalLabelDx = size.width - rightLabelWidth;
     final totalLabelOffset = Offset(totalLabelDx, verticalOffset);
-    rightTimeLabel.paint(canvas, totalLabelOffset);
+    _rightTimeLabel().paint(canvas, totalLabelOffset);
 
     // progress bar
-    final leftLabelWidth = leftTimeLabel.width;
+    final leftLabelWidth = leftLabelSize.width;
     final barHeight = 2 * _thumbRadius;
     final barWidth = size.width -
         2 * _defaultSidePadding -