[dynamic_layouts] Refactor flaky test (#4681)

This refactors a test for the example of a wrapped layout in dynamic_tests. This test had become brittle to small text changes because it would check the precise layout offset of the text.

It was patched in these cases in #4513 and #4677 to address tiny text variations across platforms and material 2/3 defaults. This refactor changes the test to check the layout offset of the parent Container of the text, which should not have these subtle variations.

Fixes https://github.com/flutter/flutter/issues/132321

packages/dynamic_layouts/example/lib/wrap_layout_example.dart

@@ -18,6 +18,7 @@ class WrapExample extends StatelessWidget {
       ),
       body: DynamicGridView.builder(
         gridDelegate: const SliverGridDelegateWithWrapping(),
+        itemCount: 20,
         itemBuilder: (BuildContext context, int index) {
           return Container(
             height: index.isEven ? index % 7 * 50 + 150 : index % 4 * 50 + 100,

packages/dynamic_layouts/example/test/wrap_example_test.dart

@@ -7,59 +7,81 @@ import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 
 void main() {
-  void withinTolerance(Offset actual, Offset expected, double tolerance) {
+  testWidgets('Check wrap layout', (WidgetTester tester) async {
-    expect(
-      actual.dx,
-      (double actual) => actual <= expected.dx + tolerance,
-      reason: '${actual.dx} <= ${expected.dx + tolerance}',
-    );
-    expect(
-      actual.dx,
-      (double actual) => actual >= expected.dx - tolerance,
-      reason: '${actual.dx} >= ${expected.dx - tolerance}',
-    );
-    expect(
-      actual.dy,
-      (double actual) => actual <= expected.dy + tolerance,
-      reason: '${actual.dy} <= ${expected.dy + tolerance}',
-    );
-    expect(
-      actual.dy,
-      (double actual) => actual >= expected.dy - tolerance,
-      reason: '${actual.dy} >= ${expected.dy - tolerance}',
-    );
-  }
-
-  testWidgets('Check that the children are layed out.',
-      (WidgetTester tester) async {
     const MaterialApp app = MaterialApp(
       home: WrapExample(),
     );
     await tester.pumpWidget(app);
     await tester.pumpAndSettle();
 
-    // See if there are children layed out.
+    // Validate which children are laid out.
-    expect(find.text('Index 0'), findsOneWidget);
+    for (int i = 0; i <= 12; i++) {
-    expect(find.text('Index 1'), findsOneWidget);
+      expect(find.text('Index $i'), findsOneWidget);
-    expect(find.text('Index 2'), findsOneWidget);
+    }
-    expect(find.text('Index 3'), findsOneWidget);
+    for (int i = 13; i < 19; i++) {
-    expect(find.text('Index 4'), findsOneWidget);
+      expect(find.text('Index $i'), findsNothing);
+    }
 
-    // Material 3 changes the expected layout positioning.
+    // Validate with the position of the box, not the text.
-    final bool usesMaterial3 = (app.theme ?? ThemeData.light()).useMaterial3;
+    Finder getContainer(String text) {
-    final Offset offset0 =
+      return find.ancestor(
-        usesMaterial3 ? const Offset(0.0, 91.0) : const Offset(0.0, 103.0);
+        of: find.text(text),
-    final Offset offset1 =
+        matching: find.byType(Container),
-        usesMaterial3 ? const Offset(65.0, 121.0) : const Offset(66.0, 124.0);
+      );
-    final Offset offset3 =
+    }
-        usesMaterial3 ? const Offset(270.0, 171.0) : const Offset(271.0, 174.0);
-    final Offset offset4 =
-        usesMaterial3 ? const Offset(380.0, 221.0) : const Offset(381.0, 224.0);
 
-    // See if they are in expected position.
+    // Validate layout position.
-    withinTolerance(tester.getTopLeft(find.text('Index 0')), offset0, 0.2);
+    expect(
-    withinTolerance(tester.getTopLeft(find.text('Index 1')), offset1, 0.2);
+      tester.getTopLeft(getContainer('Index 0')),
-    withinTolerance(tester.getTopLeft(find.text('Index 3')), offset3, 0.2);
+      const Offset(0.0, 56.0),
-    withinTolerance(tester.getTopLeft(find.text('Index 4')), offset4, 0.2);
+    );
+    expect(
+      tester.getTopLeft(getContainer('Index 1')),
+      const Offset(40.0, 56.0),
+    );
+    expect(
+      tester.getTopLeft(getContainer('Index 2')),
+      const Offset(190.0, 56.0),
+    );
+    expect(
+      tester.getTopLeft(getContainer('Index 3')),
+      const Offset(270.0, 56.0),
+    );
+    expect(
+      tester.getTopLeft(getContainer('Index 4')),
+      const Offset(370.0, 56.0),
+    );
+    expect(
+      tester.getTopLeft(getContainer('Index 5')),
+      const Offset(490.0, 56.0),
+    );
+    expect(
+      tester.getTopLeft(getContainer('Index 6')),
+      const Offset(690.0, 56.0),
+    );
+    expect(
+      tester.getTopLeft(getContainer('Index 7')),
+      const Offset(0.0, 506.0),
+    );
+    expect(
+      tester.getTopLeft(getContainer('Index 8')),
+      const Offset(150.0, 506.0),
+    );
+    expect(
+      tester.getTopLeft(getContainer('Index 9')),
+      const Offset(250.0, 506.0),
+    );
+    expect(
+      tester.getTopLeft(getContainer('Index 10')),
+      const Offset(350.0, 506.0),
+    );
+    expect(
+      tester.getTopLeft(getContainer('Index 11')),
+      const Offset(390.0, 506.0),
+    );
+    expect(
+      tester.getTopLeft(getContainer('Index 12')),
+      const Offset(590.0, 506.0),
+    );
   });
 }