Capacity Indicator now works as expected (#92)

macosui · May 14, 2021 · 935f940 · 935f940
2 parents 63a390d + 2f40ba5
commit 935f940
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 42 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,5 @@
 ## [0.1.1]
+* Capacity Indicator now works as expected ([#49](https://github.com/GroovinChip/macos_ui/issues/49))
 * Clear button is now aligned to text ([#82](https://github.com/GroovinChip/macos_ui/issues/82))
 
 ## [0.1.0]

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -100,7 +100,10 @@ class _DemoState extends State<Demo> {
                     padding: const EdgeInsets.symmetric(horizontal: 8.0),
                     child: TextField(
                       prefix: Padding(
-                        padding: const EdgeInsets.symmetric(horizontal: 4.0, vertical: 2.0),
+                        padding: const EdgeInsets.symmetric(
+                          horizontal: 4.0,
+                          vertical: 2.0,
+                        ),
                         child: Icon(CupertinoIcons.search),
                       ),
                       placeholder: 'Type some text here',

diff --git a/lib/src/fields/text_field.dart b/lib/src/fields/text_field.dart
@@ -1137,7 +1137,10 @@ class _TextFieldState extends State<TextField>
                       }
                     : null,
                 child: Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 6.0, vertical: 4.0),
+                  padding: const EdgeInsets.symmetric(
+                    horizontal: 6.0,
+                    vertical: 4.0,
+                  ),
                   child: Icon(
                     CupertinoIcons.clear_thick_circled,
                     size: 18.0,

diff --git a/lib/src/indicators/capacity_indicators.dart b/lib/src/indicators/capacity_indicators.dart
@@ -90,12 +90,9 @@ class CapacityIndicator extends StatelessWidget {
     properties.add(StringProperty('semanticLabel', semanticLabel));
   }
 
-  void _handleUpdate(Offset lp) {
-    double value = discrete ? lp.dx / splits : lp.dx;
-    if (value.isNegative)
-      value = 0;
-    else if (value > 100) value = 100;
-    onChanged?.call(value);
+  void _handleUpdate(Offset lp, double width) {
+    double value = (lp.dx / width) * splits;
+    onChanged?.call(value.clamp(0.0, 100.0));
   }
 
   @override
@@ -106,45 +103,59 @@ class CapacityIndicator extends StatelessWidget {
       value: value.toStringAsFixed(2),
       child: Container(
         constraints: BoxConstraints(minWidth: _kCapacityIndicatorMinWidth),
-        child: GestureDetector(
-          onPanStart: (event) => _handleUpdate(event.localPosition),
-          onPanUpdate: (event) => _handleUpdate(event.localPosition),
-          onPanDown: (event) => _handleUpdate(event.localPosition),
-          child: discrete
-              ? LayoutBuilder(builder: (context, consts) {
-                  double width = consts.biggest.width;
-                  if (width.isInfinite) width = 100;
-                  final splitWidth = width / splits;
-                  final fillToIndex = (100 - -(value - 100)) * (splits / 10);
-                  return SizedBox(
-                    width: width,
-                    child: Row(
-                      children: List.generate(splits, (index) {
-                        return Container(
-                          padding: EdgeInsets.only(
-                            right: index == splits - 1 ? 0 : 2.0,
-                          ),
-                          width: splitWidth,
-                          child: CapacityIndicatorCell(
-                            value: value > 0 && fillToIndex / 10 >= index
-                                ? 100
-                                : 0,
-                            backgroundColor: backgroundColor,
-                            borderColor: borderColor,
-                            color: color,
-                          ),
-                        );
-                      }),
-                    ),
-                  );
-                })
-              : CapacityIndicatorCell(
+        child: LayoutBuilder(builder: (context, consts) {
+          double width = consts.maxWidth;
+          if (width.isInfinite) width = 100;
+          final splitWidth = width / splits;
+          if (discrete) {
+            final fillToIndex = value / splits - 1;
+            return SizedBox(
+              width: width,
+              child: GestureDetector(
+                onPanStart: (event) =>
+                    _handleUpdate(event.localPosition, splitWidth),
+                onPanUpdate: (event) =>
+                    _handleUpdate(event.localPosition, splitWidth),
+                onPanDown: (event) =>
+                    _handleUpdate(event.localPosition, splitWidth),
+                child: Row(
+                  children: List.generate(splits, (index) {
+                    return Container(
+                      padding: EdgeInsets.only(
+                        right: index == splits - 1 ? 0 : 2.0,
+                      ),
+                      width: splitWidth,
+                      child: CapacityIndicatorCell(
+                        value: value > 0 && fillToIndex >= index ? 100 : 0,
+                        backgroundColor: backgroundColor,
+                        borderColor: borderColor,
+                        color: color,
+                      ),
+                    );
+                  }),
+                ),
+              ),
+            );
+          } else {
+            return SizedBox(
+              width: width,
+              child: GestureDetector(
+                onPanStart: (event) =>
+                    _handleUpdate(event.localPosition, splitWidth),
+                onPanUpdate: (event) =>
+                    _handleUpdate(event.localPosition, splitWidth),
+                onPanDown: (event) =>
+                    _handleUpdate(event.localPosition, splitWidth),
+                child: CapacityIndicatorCell(
                   value: value,
                   backgroundColor: backgroundColor,
                   borderColor: borderColor,
                   color: color,
                 ),
-        ),
+              ),
+            );
+          }
+        }),
       ),
     );
   }