design_system 0.3.1: page counter past 12

FitGrid drew one dot per page; tunedeck Downloads with 548 files had 46
dots running off the screen. Above 12 pages show "n / N" instead.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

design_system/lib/src/fit_grid.dart

@@ -8,9 +8,10 @@ import 'package:flutter/material.dart';
 ///
 /// Rows per page come from the height the parent gives it; the overflow moves
 /// to further pages in a horizontal [PageView], marked by dots once there is
-/// more than one. [itemBuilder] gets the global item index and must fill the
+/// more than one (a "n / N" counter past 12 pages). [itemBuilder] gets the
-/// cell it is given: a square of up to column width plus [labelHeight], the
+/// global item index and must fill the cell it is given: a square of up to
-/// rows stretching to use up the leftover height.
+/// column width plus [labelHeight], the rows stretching to use up the
+/// leftover height.
 class FitGrid extends StatefulWidget {
   /// Creates the grid.
   const FitGrid({
@@ -54,6 +55,10 @@ class FitGrid extends StatefulWidget {
 const double _dotSize = AppSpacing.sm;
 const double _dotsHeight = AppSpacing.md + AppSpacing.xs;
 
+// Above this many pages a row of dots outgrows a phone width, so the
+// indicator becomes a "n / N" counter instead.
+const int _maxDots = 12;
+
 class _FitGridState extends State<FitGrid> {
   final _controller = PageController();
   var _page = 0;
@@ -159,22 +164,35 @@ class _Dots extends StatelessWidget {
     return ExcludeSemantics(
       child: SizedBox(
         height: _dotsHeight,
-        child: Row(
+        child: count > _maxDots
-          mainAxisAlignment: MainAxisAlignment.center,
+            ? Center(
-          children: [
+                child: Text(
-            for (var i = 0; i < count; i++)
+                  '${current + 1} / $count',
-              Container(
+                  key: const ValueKey<String>('fit-grid-page-counter'),
-                key: ValueKey<String>('fit-grid-dot-$i'),
+                  style: Theme.of(context).textTheme.labelSmall,
-                width: _dotSize,
+                  textScaler: TextScaler.noScaling,
-                height: _dotSize,
-                margin: const EdgeInsets.symmetric(horizontal: AppSpacing.xs),
-                decoration: BoxDecoration(
-                  shape: BoxShape.circle,
-                  color: i == current ? scheme.primary : scheme.outlineVariant,
                 ),
+              )
+            : Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  for (var i = 0; i < count; i++)
+                    Container(
+                      key: ValueKey<String>('fit-grid-dot-$i'),
+                      width: _dotSize,
+                      height: _dotSize,
+                      margin: const EdgeInsets.symmetric(
+                        horizontal: AppSpacing.xs,
+                      ),
+                      decoration: BoxDecoration(
+                        shape: BoxShape.circle,
+                        color: i == current
+                            ? scheme.primary
+                            : scheme.outlineVariant,
+                      ),
+                    ),
+                ],
               ),
-          ],
-        ),
       ),
     );
   }

design_system/pubspec.yaml

@@ -5,7 +5,7 @@ description: >-
   helpers that were each reimplemented in three or more repos. Owns the tokens
   -- consumers import them rather than transcribing the token table by hand.
 publish_to: 'none'
-version: 0.3.0
+version: 0.3.1
 
 environment:
   sdk: ^3.12.2

design_system/test/fit_grid_test.dart

@@ -126,6 +126,30 @@ void main() {
     expect(find.text('item $perPage').hitTestable(), findsNothing);
   });
 
+  testWidgets('more than 12 pages: "n / N" counter instead of dots', (
+    tester,
+  ) async {
+    await _pump(tester, count: 30);
+    final perPage = _onScreen(tester);
+    final count = perPage * 13;
+    await _pump(tester, count: count);
+    expect(_dot, findsNothing);
+    final counter = find.byKey(const ValueKey('fit-grid-page-counter'));
+    expect(tester.widget<Text>(counter).data, '1 / 13');
+    await tester.fling(find.byType(PageView), const Offset(-250, 0), 1000);
+    await tester.pumpAndSettle();
+    expect(tester.widget<Text>(counter).data, '2 / 13');
+    expect(tester.takeException(), isNull);
+  });
+
+  testWidgets('exactly 12 pages still shows dots', (tester) async {
+    await _pump(tester, count: 30);
+    final perPage = _onScreen(tester);
+    await _pump(tester, count: perPage * 12);
+    expect(_dot, findsNWidgets(12));
+    expect(tester.takeException(), isNull);
+  });
+
   testWidgets('swiping left shows the next page and moves the dot', (
     tester,
   ) async {