From a1c3399afa4446c60db5297e1275215665f9785d Mon Sep 17 00:00:00 2001
From: Thibault Deckers <thibault.deckers@gmail.com>
Date: Fri, 4 Feb 2022 11:12:27 +0900
Subject: [PATCH] line percent indicator fix

---
 lib/widgets/stats/filter_table.dart | 34 +++++++++++++--------
 lib/widgets/stats/stats_page.dart   | 47 ++++++++++++++++++-----------
 2 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/lib/widgets/stats/filter_table.dart b/lib/widgets/stats/filter_table.dart
index b15aadd26..703a54698 100644
--- a/lib/widgets/stats/filter_table.dart
+++ b/lib/widgets/stats/filter_table.dart
@@ -41,6 +41,7 @@ class FilterTable<T extends Comparable> extends StatelessWidget {
 
     final textScaleFactor = MediaQuery.textScaleFactorOf(context);
     final lineHeight = 16 * textScaleFactor;
+    final barRadius = Radius.circular(lineHeight / 2);
     final isRtl = context.isRtl;
 
     return Padding(
@@ -69,20 +70,27 @@ class FilterTable<T extends Comparable> extends StatelessWidget {
                     ),
                   ),
                   if (showPercentIndicator)
-                    LinearPercentIndicator(
-                      percent: percent,
-                      lineHeight: lineHeight,
-                      backgroundColor: Colors.white24,
-                      progressColor: stringToColor(label),
-                      animation: true,
-                      isRTL: isRtl,
-                      // TODO TLAD handle low percents being rendered with wrong radius clip
-                      barRadius: Radius.circular(lineHeight / 2),
-                      center: Text(
-                        intl.NumberFormat.percentPattern().format(percent),
-                        style: const TextStyle(shadows: Constants.embossShadows),
-                      ),
+                    // as of percent_indicator v4.0.0, bar radius is not correctly applied to progress bar
+                    // when width is lower than height, so we clip it and handle padding outside
+                    Padding(
                       padding: EdgeInsets.symmetric(horizontal: lineHeight),
+                      child: ClipRRect(
+                        borderRadius: BorderRadius.all(barRadius),
+                        child: LinearPercentIndicator(
+                          percent: percent,
+                          lineHeight: lineHeight,
+                          backgroundColor: Colors.white24,
+                          progressColor: stringToColor(label),
+                          animation: true,
+                          isRTL: isRtl,
+                          barRadius: barRadius,
+                          center: Text(
+                            intl.NumberFormat.percentPattern().format(percent),
+                            style: const TextStyle(shadows: Constants.embossShadows),
+                          ),
+                          padding: EdgeInsets.zero,
+                        ),
+                      ),
                     ),
                   Text(
                     '$count',
diff --git a/lib/widgets/stats/stats_page.dart b/lib/widgets/stats/stats_page.dart
index f62d1006b..350df4fa5 100644
--- a/lib/widgets/stats/stats_page.dart
+++ b/lib/widgets/stats/stats_page.dart
@@ -96,29 +96,40 @@ class StatsPage extends StatelessWidget {
       final withGpsPercent = withGpsCount / entries.length;
       final textScaleFactor = MediaQuery.textScaleFactorOf(context);
       final lineHeight = 16 * textScaleFactor;
+      final barRadius = Radius.circular(lineHeight / 2);
       final locationIndicator = Padding(
         padding: const EdgeInsets.all(16),
         child: Column(
           children: [
-            Padding(
-              // end padding to match leading, so that inside label is aligned with outside label below
-              padding: const EdgeInsetsDirectional.only(end: 24),
-              child: LinearPercentIndicator(
-                percent: withGpsPercent,
-                lineHeight: lineHeight,
-                backgroundColor: Colors.white24,
-                progressColor: Theme.of(context).colorScheme.secondary,
-                animation: animate,
-                isRTL: context.isRtl,
-                leading: const Icon(AIcons.location),
-                // TODO TLAD handle low percents being rendered with wrong radius clip
-                barRadius: Radius.circular(lineHeight / 2),
-                center: Text(
-                  intl.NumberFormat.percentPattern().format(withGpsPercent),
-                  style: const TextStyle(shadows: Constants.embossShadows),
+            // as of percent_indicator v4.0.0, bar radius is not correctly applied to progress bar
+            // when width is lower than height, so we clip it and handle padding outside
+            Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                const Icon(AIcons.location),
+                SizedBox(width: lineHeight),
+                Expanded(
+                  child: ClipRRect(
+                    borderRadius: BorderRadius.all(barRadius),
+                    child: LinearPercentIndicator(
+                      percent: withGpsPercent,
+                      lineHeight: lineHeight,
+                      backgroundColor: Colors.white24,
+                      progressColor: Theme.of(context).colorScheme.secondary,
+                      animation: animate,
+                      isRTL: context.isRtl,
+                      barRadius: barRadius,
+                      center: Text(
+                        intl.NumberFormat.percentPattern().format(withGpsPercent),
+                        style: const TextStyle(shadows: Constants.embossShadows),
+                      ),
+                      padding: EdgeInsets.zero,
+                    ),
+                  ),
                 ),
-                padding: EdgeInsets.symmetric(horizontal: lineHeight),
-              ),
+                // end padding to match leading, so that inside label is aligned with outside label below
+                SizedBox(width: lineHeight + 24),
+              ],
             ),
             const SizedBox(height: 8),
             Text(