[two_dimensional_scrollables] Fix pinned row painting when one axis i…

…s reversed (#5187)

Fixes flutter/flutter#136897

There are a bunch of changes out for TableView right now, so I will update the changelog/pubspec when I have a better idea of which ones are landing before this.

packages/two_dimensional_scrollables/CHANGELOG.md

@@ -1,3 +1,7 @@
+## NEXT
+
+* Fixes bug where having one reversed axis caused incorrect painting of a pinned row.
+
 ## 0.0.4
 
 * Adds TableSpanPadding, TableSpan.padding, and TableSpanDecoration.consumeSpanPadding.

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

@@ -803,7 +803,7 @@ class RenderTableViewport extends RenderTwoDimensionalViewport {
           axisDirectionIsReversed(horizontalAxisDirection)
               ? 0.0
               : _pinnedColumnsExtent,
-          axisDirectionIsReversed(horizontalAxisDirection)
+          axisDirectionIsReversed(verticalAxisDirection)
               ? viewportDimension.height - _pinnedRowsExtent
               : 0.0,
           viewportDimension.width - _pinnedColumnsExtent,

packages/two_dimensional_scrollables/test/table_view/table_test.dart

@@ -1368,7 +1368,8 @@ void main() {
       // 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
-      final TableView tableView = TableView.builder(
+      // Both reversed - Regression test for https://github.com/flutter/flutter/issues/135386
+      TableView tableView = TableView.builder(
         verticalDetails: const ScrollableDetails.vertical(reverse: true),
         horizontalDetails: const ScrollableDetails.horizontal(reverse: true),
         rowCount: 2,
@@ -1418,6 +1419,57 @@ void main() {
         matchesGoldenFile('goldens/reversed.pinned.painting.png'),
         skip: !runGoldens,
       );
+
+      // Only one axis reversed - Regression test for https://github.com/flutter/flutter/issues/136897
+      tableView = TableView.builder(
+        horizontalDetails: const ScrollableDetails.horizontal(reverse: true),
+        rowCount: 2,
+        pinnedRowCount: 1,
+        columnCount: 2,
+        pinnedColumnCount: 1,
+        columnBuilder: (int index) => TableSpan(
+          extent: const 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,
+          ),
+        ),
+        cellBuilder: (_, TableVicinity vicinity) {
+          return const SizedBox.square(
+            dimension: 200,
+            child: Center(child: FlutterLogo()),
+          );
+        },
+      );
+
+      await tester.pumpWidget(MaterialApp(home: tableView));
+      await tester.pumpAndSettle();
+      await expectLater(
+        find.byType(TableView),
+        matchesGoldenFile('goldens/single-reversed.pinned.painting.png'),
+        skip: !runGoldens,
+      );
     });
 
     testWidgets('mouse handling', (WidgetTester tester) async {