[two_dimensional_scrollables] Post 3.16 stable tech debt clean up (#5671)

Fixes https://github.com/flutter/flutter/issues/136933
Fixes https://github.com/flutter/flutter/issues/132782

This cleans up some TODOs in the TableView and its tests after the stable release
- removes an assertion on the builder delegate bounds now that the super class handles the assertions
- refactors all of the golden file tests using PaintPattern, removing all of the golden files and enabling web testing

packages/two_dimensional_scrollables/dart_test.yaml

@@ -1,3 +0,0 @@
-# TODO(Piinks): Web cannot support temp golden files, re-enable once mock_canvas
-# makes it to stable. See
-test_on: vm

packages/two_dimensional_scrollables/lib/src/table_view/table_delegate.dart

@@ -150,8 +150,6 @@ class TableCellBuilderDelegate extends TwoDimensionalChildBuilderDelegate
   int get columnCount => maxXIndex! + 1;
   set columnCount(int value) {
     assert(pinnedColumnCount <= value);
-    // TODO(Piinks): remove once this assertion is added in the super class
-    assert(value >= -1);
     maxXIndex = value - 1;
   }
 
@@ -180,8 +178,6 @@ class TableCellBuilderDelegate extends TwoDimensionalChildBuilderDelegate
   int get rowCount => maxYIndex! + 1;
   set rowCount(int value) {
     assert(pinnedRowCount <= value);
-    // TODO(Piinks): remove once this assertion is added in the super class
-    assert(value >= -1);
     maxYIndex = value - 1;
   }
 

packages/two_dimensional_scrollables/test/table_view/table_test.dart

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'dart:io' show Platform;
-
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
@@ -40,14 +38,6 @@ TableSpan getMouseTrackingSpan(
   );
 }
 
-final bool masterChannel = !Platform.environment.containsKey('CHANNEL') ||
-    Platform.environment['CHANNEL'] == 'master';
-
-// TODO(Piinks): Remove once painting can be validated by mock_canvas in
-//  flutter_test, and re-enable web tests in https://github.com/flutter/flutter/issues/132782
-// Regenerate goldens on a Mac computer by running `flutter test --update-goldens`
-final bool runGoldens = Platform.isMacOS && masterChannel;
-
 void main() {
   group('TableView.builder', () {
     test('creates correct delegate', () {
@@ -1253,11 +1243,6 @@ void main() {
 
     testWidgets('paints decorations in correct order',
         (WidgetTester tester) async {
-      // TODO(Piinks): Rewrite this to remove golden files from this repo when
-      //  mock_canvas is public - https://github.com/flutter/flutter/pull/131631
-      //  * foreground, background, and precedence per mainAxis
-      //  * Break out a separate test for padding and radius decorations to
-      //    validate paint rect calls
       TableView tableView = TableView.builder(
         rowCount: 2,
         columnCount: 2,
@@ -1304,17 +1289,123 @@ void main() {
             height: 200,
             width: 200,
             color: Colors.grey.withOpacity(0.5),
-            child: const Center(child: FlutterLogo()),
           );
         },
       );
 
       await tester.pumpWidget(MaterialApp(home: tableView));
       await tester.pumpAndSettle();
-      await expectLater(
+      expect(
-        find.byType(TableView),
+        find.byType(TableViewport),
-        matchesGoldenFile('goldens/tableSpanDecoration.defaultMainAxis.png'),
+        paints
-        skip: !runGoldens,
+          // background row
+          ..rrect(
+            rrect: RRect.fromRectAndRadius(
+              const Rect.fromLTRB(0.0, 210.0, 410.0, 410.0),
+              const Radius.circular(30.0),
+            ),
+            color: const Color(0xff2196f3),
+          )
+          // background column
+          ..rrect(
+            rrect: RRect.fromRectAndRadius(
+              const Rect.fromLTRB(0.0, 0.0, 210.0, 410.0),
+              const Radius.circular(30.0),
+            ),
+            color: const Color(0xfff44336),
+          )
+          // child at 0,0
+          ..rect(
+            rect: const Rect.fromLTRB(0.0, 0.0, 200.0, 200.0),
+            color: const Color(0x809e9e9e),
+          )
+          // child at 0,1
+          ..rect(
+            rect: const Rect.fromLTRB(0.0, 210.0, 200.0, 410.0),
+            color: const Color(0x809e9e9e),
+          )
+          // child at 1,0
+          ..rect(
+            rect: const Rect.fromLTRB(210.0, 0.0, 410.0, 200.0),
+            color: const Color(0x809e9e9e),
+          )
+          // child at 1,1
+          ..rect(
+            rect: const Rect.fromLTRB(210.0, 210.0, 410.0, 410.0),
+            color: const Color(0x809e9e9e),
+          )
+          // foreground row border (1)
+          ..drrect(
+            outer: RRect.fromRectAndRadius(
+              const Rect.fromLTRB(0.0, 0.0, 410.0, 200.0),
+              const Radius.circular(30.0),
+            ),
+            inner: RRect.fromLTRBAndCorners(
+              0.0,
+              3.0,
+              410.0,
+              200.0,
+              topLeft: const Radius.elliptical(30.0, 27.0),
+              topRight: const Radius.elliptical(30.0, 27.0),
+              bottomRight: const Radius.circular(30.0),
+              bottomLeft: const Radius.circular(30.0),
+            ),
+            color: const Color(0xff4caf50),
+          )
+          // foreground row border (2)
+          ..drrect(
+            outer: RRect.fromRectAndRadius(
+              const Rect.fromLTRB(0.0, 200.0, 410.0, 410.0),
+              const Radius.circular(30.0),
+            ),
+            inner: RRect.fromLTRBAndCorners(
+              0.0,
+              203.0,
+              410.0,
+              410.0,
+              topLeft: const Radius.elliptical(30.0, 27.0),
+              topRight: const Radius.elliptical(30.0, 27.0),
+              bottomRight: const Radius.circular(30.0),
+              bottomLeft: const Radius.circular(30.0),
+            ),
+            color: const Color(0xff4caf50),
+          )
+          // foreground column border (1)
+          ..drrect(
+            outer: RRect.fromRectAndRadius(
+              const Rect.fromLTRB(0.0, 0.0, 200.0, 410.0),
+              const Radius.circular(10.0),
+            ),
+            inner: RRect.fromLTRBAndCorners(
+              0.0,
+              0.0,
+              197.0,
+              410.0,
+              topLeft: const Radius.circular(10.0),
+              topRight: const Radius.elliptical(7.0, 10.0),
+              bottomRight: const Radius.elliptical(7.0, 10.0),
+              bottomLeft: const Radius.circular(10.0),
+            ),
+            color: const Color(0xffff9800),
+          )
+          // foreground column border (2)
+          ..drrect(
+            outer: RRect.fromRectAndRadius(
+              const Rect.fromLTRB(210.0, 0.0, 410.0, 410.0),
+              const Radius.circular(10.0),
+            ),
+            inner: RRect.fromLTRBAndCorners(
+              210.0,
+              0.0,
+              407.0,
+              410.0,
+              topLeft: const Radius.circular(10.0),
+              topRight: const Radius.elliptical(7.0, 10.0),
+              bottomRight: const Radius.elliptical(7.0, 10.0),
+              bottomLeft: const Radius.circular(10.0),
+            ),
+            color: const Color(0xffff9800),
+          ),
       );
 
       // Switch main axis
@@ -1351,27 +1442,90 @@ void main() {
           ),
         ),
         cellBuilder: (_, TableVicinity vicinity) {
-          return const SizedBox.square(
+          return Container(
-            dimension: 200,
+            height: 200,
-            child: Center(child: FlutterLogo()),
+            width: 200,
+            color: Colors.grey.withOpacity(0.5),
           );
         },
       );
 
       await tester.pumpWidget(MaterialApp(home: tableView));
       await tester.pumpAndSettle();
-      await expectLater(
+      expect(
-        find.byType(TableView),
+        find.byType(TableViewport),
-        matchesGoldenFile('goldens/tableSpanDecoration.horizontalMainAxis.png'),
+        paints
-        skip: !runGoldens,
+          // background column goes first this time
+          ..rect(
+            rect: const Rect.fromLTRB(0.0, 0.0, 200.0, 400.0),
+            color: const Color(0xfff44336),
+          )
+          // background row
+          ..rect(
+            rect: const Rect.fromLTRB(0.0, 200.0, 400.0, 400.0),
+            color: const Color(0xff2196f3),
+          )
+          // child at 0,0
+          ..rect(
+            rect: const Rect.fromLTRB(0.0, 0.0, 200.0, 200.0),
+            color: const Color(0x809e9e9e),
+          )
+          // child at 1,0
+          ..rect(
+            rect: const Rect.fromLTRB(0.0, 200.0, 200.0, 400.0),
+            color: const Color(0x809e9e9e),
+          )
+          // child at 0,1
+          ..rect(
+            rect: const Rect.fromLTRB(200.0, 0.0, 400.0, 200.0),
+            color: const Color(0x809e9e9e),
+          )
+          // child at 1,1
+          ..rect(
+            rect: const Rect.fromLTRB(200.0, 200.0, 400.0, 400.0),
+            color: const Color(0x809e9e9e),
+          )
+          // foreground column border (1)
+          ..path(
+            includes: <Offset>[
+              const Offset(200.0, 0.0),
+              const Offset(200.0, 200.0),
+              const Offset(200.0, 400.0),
+            ],
+            color: const Color(0xffff9800),
+          )
+          // foreground column border (2)
+          ..path(
+            includes: <Offset>[
+              const Offset(400.0, 0.0),
+              const Offset(400.0, 200.0),
+              const Offset(400.0, 400.0),
+            ],
+            color: const Color(0xffff9800),
+          )
+          // foreground row border
+          ..path(
+            includes: <Offset>[
+              Offset.zero,
+              const Offset(200.0, 0.0),
+              const Offset(400.0, 0.0),
+            ],
+            color: const Color(0xff4caf50),
+          )
+          // foreground row border(2)
+          ..path(
+            includes: <Offset>[
+              const Offset(0.0, 200.0),
+              const Offset(200.0, 200.0),
+              const Offset(400.0, 200.0),
+            ],
+            color: const Color(0xff4caf50),
+          ),
       );
     });
 
-    testWidgets('paint rects are correct when reversed and pinned',
+    testWidgets('child paint rects are correct when reversed and pinned',
         (WidgetTester tester) async {
-      // TODO(Piinks): Rewrite this to remove golden files from this repo when
-      //  mock_canvas is public - https://github.com/flutter/flutter/pull/131631
-      //  * foreground, background, and precedence per mainAxis
       // Both reversed - Regression test for https://github.com/flutter/flutter/issues/135386
       TableView tableView = TableView.builder(
         verticalDetails: const ScrollableDetails.vertical(reverse: true),
@@ -1380,48 +1534,43 @@ void main() {
         pinnedRowCount: 1,
         columnCount: 2,
         pinnedColumnCount: 1,
-        columnBuilder: (int index) => TableSpan(
+        columnBuilder: (int index) => const TableSpan(
-          extent: const FixedTableSpanExtent(200.0),
+          extent: FixedTableSpanExtent(200.0),
-          foregroundDecoration: const TableSpanDecoration(
-            border: TableSpanBorder(
-              trailing: BorderSide(
-                color: Colors.orange,
-                width: 3,
-              ),
-            ),
-          ),
-          backgroundDecoration: TableSpanDecoration(
-            color: index.isEven ? Colors.red : null,
-          ),
-        ),
-        rowBuilder: (int index) => TableSpan(
-          extent: const FixedTableSpanExtent(200.0),
-          foregroundDecoration: const TableSpanDecoration(
-            border: TableSpanBorder(
-              leading: BorderSide(
-                color: Colors.green,
-                width: 3,
-              ),
-            ),
-          ),
-          backgroundDecoration: TableSpanDecoration(
-            color: index.isOdd ? Colors.blue : null,
         ),
+        rowBuilder: (int index) => const TableSpan(
+          extent: FixedTableSpanExtent(200.0),
         ),
         cellBuilder: (_, TableVicinity vicinity) {
-          return const SizedBox.square(
+          return Container(
-            dimension: 200,
+            height: 200,
-            child: Center(child: FlutterLogo()),
+            width: 200,
+            color: Colors.grey.withOpacity(0.5),
           );
         },
       );
 
       await tester.pumpWidget(MaterialApp(home: tableView));
       await tester.pumpAndSettle();
-      await expectLater(
+      // All children are painted in the right place
-        find.byType(TableView),
+      expect(
-        matchesGoldenFile('goldens/reversed.pinned.painting.png'),
+        find.byType(TableViewport),
-        skip: !runGoldens,
+        paints
+          ..rect(
+            rect: const Rect.fromLTRB(400.0, 200.0, 600.0, 400.0),
+            color: const Color(0x809e9e9e),
+          )
+          ..rect(
+            rect: const Rect.fromLTRB(600.0, 200.0, 800.0, 400.0),
+            color: const Color(0x809e9e9e),
+          )
+          ..rect(
+            rect: const Rect.fromLTRB(400.0, 400.0, 600.0, 600.0),
+            color: const Color(0x809e9e9e),
+          )
+          ..rect(
+            rect: const Rect.fromLTRB(600.0, 400.0, 800.0, 600.0),
+            color: const Color(0x809e9e9e),
+          ),
       );
 
       // Only one axis reversed - Regression test for https://github.com/flutter/flutter/issues/136897
@@ -1431,48 +1580,42 @@ void main() {
         pinnedRowCount: 1,
         columnCount: 2,
         pinnedColumnCount: 1,
-        columnBuilder: (int index) => TableSpan(
+        columnBuilder: (int index) => const TableSpan(
-          extent: const FixedTableSpanExtent(200.0),
+          extent: FixedTableSpanExtent(200.0),
-          foregroundDecoration: const TableSpanDecoration(
-            border: TableSpanBorder(
-              trailing: BorderSide(
-                color: Colors.orange,
-                width: 3,
-              ),
-            ),
-          ),
-          backgroundDecoration: TableSpanDecoration(
-            color: index.isEven ? Colors.red : null,
-          ),
-        ),
-        rowBuilder: (int index) => TableSpan(
-          extent: const FixedTableSpanExtent(200.0),
-          foregroundDecoration: const TableSpanDecoration(
-            border: TableSpanBorder(
-              leading: BorderSide(
-                color: Colors.green,
-                width: 3,
-              ),
-            ),
-          ),
-          backgroundDecoration: TableSpanDecoration(
-            color: index.isOdd ? Colors.blue : null,
         ),
+        rowBuilder: (int index) => const TableSpan(
+          extent: FixedTableSpanExtent(200.0),
         ),
         cellBuilder: (_, TableVicinity vicinity) {
-          return const SizedBox.square(
+          return Container(
-            dimension: 200,
+            height: 200,
-            child: Center(child: FlutterLogo()),
+            width: 200,
+            color: Colors.grey.withOpacity(0.5),
           );
         },
       );
 
       await tester.pumpWidget(MaterialApp(home: tableView));
       await tester.pumpAndSettle();
-      await expectLater(
+      expect(
-        find.byType(TableView),
+        find.byType(TableViewport),
-        matchesGoldenFile('goldens/single-reversed.pinned.painting.png'),
+        paints
-        skip: !runGoldens,
+          ..rect(
+            rect: const Rect.fromLTRB(400.0, 200.0, 600.0, 400.0),
+            color: const Color(0x809e9e9e),
+          )
+          ..rect(
+            rect: const Rect.fromLTRB(600.0, 200.0, 800.0, 400.0),
+            color: const Color(0x809e9e9e),
+          )
+          ..rect(
+            rect: const Rect.fromLTRB(400.0, 0.0, 600.0, 200.0),
+            color: const Color(0x809e9e9e),
+          )
+          ..rect(
+            rect: const Rect.fromLTRB(600.0, 0.0, 800.0, 200.0),
+            color: const Color(0x809e9e9e),
+          ),
       );
     });