make CapacityIndicator work with other values of splits, not only spl…

…its:10 (#305)

* make CapacityIndicator work with other values of splits, not only with splits:10

* add unit test for CapacityIndicator with splits 20

* add bugfix line to CHANGELOG

* update version to 1.7.7, move change in CHANGELOG.md to version 1.7.7

* add test to check the number of filled segments of discrete CapacityIndicator

* fix warnings in copied sources mock_canvas.dart and recording_canvas.dart

* format new and changed files

* Update CHANGELOG.md

Co-authored-by: Reuben Turner <groovinchip@gmail.com>

* format indicators_page.dart, run flutter pub get to update lock files

* set dart < 3.0.0

* revert change of spec checksums in Podfile.lock

---------

Co-authored-by: Reuben Turner <groovinchip@gmail.com>

CHANGELOG.md

@@ -20,6 +20,8 @@ Other changes
 * Update `MacosScrollBar.thumbVisibility` with the latest change introduced in Flutter 3.7
 * Update `README.md` to address issues [#325](https://github.com/GroovinChip/macos_ui/issues/325) & [#332](https://github.com/GroovinChip/macos_ui/issues/332)
 
+* Fixed a bug where `CapacityIndicator` only worked correctly for splits = 10
+
 
 ## [1.7.6]
 * Fixed a bug where `MacosPopupButton` would report that a `ScrollController` was not attached to any views

example/lib/pages/indicators_page.dart

@@ -41,6 +41,7 @@ class _IndicatorsPageState extends State<IndicatorsPage> {
                   CapacityIndicator(
                     value: sliderValue,
                     onChanged: (v) => setState(() => sliderValue = v),
+                    splits: 20,
                     discrete: true,
                   ),
                   const SizedBox(height: 20),

lib/src/indicators/capacity_indicators.dart

@@ -90,7 +90,7 @@ class CapacityIndicator extends StatelessWidget {
   }
 
   void _handleUpdate(Offset lp, double width) {
-    double value = (lp.dx / width) * splits;
+    double value = (lp.dx / width) * 100 / splits;
     onChanged?.call(value.clamp(0.0, 100.0));
   }
 
@@ -108,7 +108,7 @@ class CapacityIndicator extends StatelessWidget {
           if (width.isInfinite) width = 100;
           final splitWidth = width / splits;
           if (discrete) {
-            final fillToIndex = value / splits - 1;
+            final fillToIndex = (value / 100) * splits - 1;
             return SizedBox(
               width: width,
               child: GestureDetector(

test/indicators/capacity_indicators_test.dart

@@ -1,7 +1,12 @@
 import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
 import 'package:flutter_test/flutter_test.dart';
+
 import 'package:macos_ui/macos_ui.dart';
 
+import '../mock_canvas.dart';
+
 void main() {
   testWidgets('debugFillProperties', (tester) async {
     final builder = DiagnosticPropertiesBuilder();
@@ -27,4 +32,163 @@ void main() {
       ],
     );
   });
+
+  testWidgets('debugFillProperties with discrete splits = 20', (tester) async {
+    final builder = DiagnosticPropertiesBuilder();
+    const CapacityIndicator(
+      value: 50,
+      splits: 20,
+      discrete: true,
+    ).debugFillProperties(builder);
+
+    final description = builder.properties
+        .where((node) => !node.isFiltered(DiagnosticLevel.info))
+        .map((node) => node.toString())
+        .toList();
+
+    expect(
+      description,
+      [
+        'value: 50.0',
+        'splits: 20',
+        'color: systemGreen(*color = Color(0xff34c759)*, darkColor = Color(0xff30d158), highContrastColor = Color(0xff248a3d), darkHighContrastColor = Color(0xff30db5b), resolved by: UNRESOLVED)',
+        'backgroundColor: tertiarySystemGroupedBackground(*color = Color(0xfff2f2f7)*, darkColor = Color(0xff2c2c2e), highContrastColor = Color(0xffebebf0), darkHighContrastColor = Color(0xff363638), *elevatedColor = Color(0xfff2f2f7)*, darkElevatedColor = Color(0xff3a3a3c), highContrastElevatedColor = Color(0xffebebf0), darkHighContrastElevatedColor = Color(0xff444446), resolved by: UNRESOLVED)',
+        'borderColor: tertiaryLabel(*color = Color(0x4c3c3c43)*, darkColor = Color(0x4cebebf5), highContrastColor = Color(0x603c3c43), darkHighContrastColor = Color(0x60ebebf5), resolved by: UNRESOLVED)',
+        'semanticLabel: null',
+      ],
+    );
+  });
+
+  testWidgets(
+    'CapacityIndicator paints the correct number of segments',
+    (WidgetTester tester) async {
+      await tester.pumpWidget(
+        const Directionality(
+          textDirection: TextDirection.ltr,
+          child: Center(
+            child: SizedBox(
+              width: 200.0,
+              child: CapacityIndicator(
+                value: 50,
+                splits: 20,
+                discrete: true,
+              ),
+            ),
+          ),
+        ),
+      );
+
+      expect(
+        find.byType(CapacityIndicator),
+        // each discrete segment is drawn 3 times, two times with fill, last time with stroke
+        paintsExactlyCountTimes(#drawRRect, 20 * 3),
+      );
+    },
+  );
+
+  testWidgets(
+    'CapacityIndicator paints two filled segments for value=10 and 20 segments',
+    (WidgetTester tester) async {
+      await tester.pumpWidget(
+        const Directionality(
+          textDirection: TextDirection.ltr,
+          child: Center(
+            child: SizedBox(
+              width: 200.0,
+              child: CapacityIndicator(
+                value: 10,
+                splits: 20,
+                discrete: true,
+              ),
+            ),
+          ),
+        ),
+      );
+
+      expect(
+        find.byType(CapacityIndicator),
+        // each discrete segment is drawn 3 times, background - fill - stroke
+        // a filled segment is drawn by fromLTRBR  with LTRB=0,0,8,16
+        // an empty segment is drawnby fromLTRBAndCorners with LTRB=0,0,0,16
+        paints
+          ..rrect(
+            rrect: RRect.fromLTRBR(
+              0.0,
+              0.0,
+              8.0,
+              16.0,
+              const Radius.circular(2.0),
+            ),
+          )
+          ..rrect(
+            rrect: RRect.fromLTRBR(
+              0.0,
+              0.0,
+              8.0,
+              16.0,
+              const Radius.circular(2.0),
+            ),
+          )
+          ..rrect(
+            rrect: RRect.fromLTRBR(
+              0.0,
+              0.0,
+              8.0,
+              16.0,
+              const Radius.circular(2.0),
+            ),
+          )
+          ..translate(x: 10.0, y: 0.0)
+          ..rrect(
+            rrect: RRect.fromLTRBR(
+              0.0,
+              0.0,
+              8.0,
+              16.0,
+              const Radius.circular(2.0),
+            ),
+          )
+          ..rrect(
+            rrect: RRect.fromLTRBR(
+              0.0,
+              0.0,
+              8.0,
+              16.0,
+              const Radius.circular(2.0),
+            ),
+          )
+          ..rrect(
+            rrect: RRect.fromLTRBR(
+              0.0,
+              0.0,
+              8.0,
+              16.0,
+              const Radius.circular(2.0),
+            ),
+          )
+          ..translate(x: 20.0, y: 0.0)
+          ..rrect(
+            rrect: RRect.fromLTRBR(
+              0.0,
+              0.0,
+              8.0,
+              16.0,
+              const Radius.circular(2.0),
+            ),
+          )
+          ..rrect(
+            rrect: RRect.fromLTRBAndCorners(
+              0.0,
+              0.0,
+              0.0,
+              16.0,
+              topLeft: const Radius.circular(2.0),
+              topRight: const Radius.circular(0.0),
+              bottomRight: const Radius.circular(0.0),
+              bottomLeft: const Radius.circular(2.0),
+            ),
+          ),
+      );
+    },
+  );
 }