[two_dimensional_scrollables] Add borderRadius support to TableSpanDecoration (#5184)

Part of #134655

![Screenshot 2023-10-19 at 3 01 17 PM](https://github.com/flutter/packages/assets/16964204/b185ce08-9be0-4771-83df-d79df66774b6)

This may look wonky, but it is verifying all the combinations of consuming/not consuming the padding with decorations. One golden file to rule them all. �  Thankfully we can refactor this very soon in
- #136933

![tableSpanDecoration defaultMainAxis](https://github.com/flutter/packages/assets/16964204/87d06e02-7708-47a6-b473-f62999a6c74b)

Author: Piinks

packages/two_dimensional_scrollables/CHANGELOG.md

@@ -1,6 +1,7 @@
 ## NEXT
 
 * Fixes bug where having one reversed axis caused incorrect painting of a pinned row.
+* Adds support for BorderRadius in TableSpanDecorations.
 
 ## 0.0.4
 

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

@@ -296,12 +296,19 @@ class TableSpanDecoration {
   const TableSpanDecoration({
     this.border,
     this.color,
+    this.borderRadius,
     this.consumeSpanPadding = true,
   });
 
   /// The border drawn around the span.
   final TableSpanBorder? border;
 
+  /// The radius by which the leading and trailing ends of a row or
+  /// column will be rounded.
+  ///
+  /// Applies to the [border] and [color] of the given [TableSpan].
+  final BorderRadius? borderRadius;
+
   /// The color to fill the bounds of the span with.
   final Color? color;
 
@@ -364,15 +371,20 @@ class TableSpanDecoration {
   /// cells.
   void paint(TableSpanDecorationPaintDetails details) {
     if (color != null) {
-      details.canvas.drawRect(
-        details.rect,
-        Paint()
-          ..color = color!
-          ..isAntiAlias = false,
-      );
+      final Paint paint = Paint()
+        ..color = color!
+        ..isAntiAlias = borderRadius != null;
+      if (borderRadius == null || borderRadius == BorderRadius.zero) {
+        details.canvas.drawRect(details.rect, paint);
+      } else {
+        details.canvas.drawRRect(
+          borderRadius!.toRRect(details.rect),
+          paint,
+        );
+      }
     }
     if (border != null) {
-      border!.paint(details);
+      border!.paint(details, borderRadius);
     }
   }
 }
@@ -416,24 +428,33 @@ class TableSpanBorder {
   /// cell representing the pinned column and separately with another
   /// [TableSpanDecorationPaintDetails.rect] containing all the other unpinned
   /// cells.
-  void paint(TableSpanDecorationPaintDetails details) {
+  void paint(
+    TableSpanDecorationPaintDetails details,
+    BorderRadius? borderRadius,
+  ) {
     final AxisDirection axisDirection = details.axisDirection;
     switch (axisDirectionToAxis(axisDirection)) {
       case Axis.horizontal:
-        paintBorder(
-          details.canvas,
-          details.rect,
+        final Border border = Border(
           top: axisDirection == AxisDirection.right ? leading : trailing,
           bottom: axisDirection == AxisDirection.right ? trailing : leading,
         );
-        break;
-      case Axis.vertical:
-        paintBorder(
+        border.paint(
           details.canvas,
           details.rect,
+          borderRadius: borderRadius,
+        );
+        break;
+      case Axis.vertical:
+        final Border border = Border(
           left: axisDirection == AxisDirection.down ? leading : trailing,
           right: axisDirection == AxisDirection.down ? trailing : leading,
         );
+        border.paint(
+          details.canvas,
+          details.rect,
+          borderRadius: borderRadius,
+        );
         break;
     }
   }

packages/two_dimensional_scrollables/test/table_view/goldens/tableSpanDecoration.defaultMainAxis.png

@@ -161,16 +161,21 @@ void main() {
       rect: rect,
       axisDirection: AxisDirection.down,
     );
+    final BorderRadius radius = BorderRadius.circular(10.0);
     decoration.paint(details);
     expect(canvas.rect, rect);
     expect(canvas.paint.color, const Color(0xffff0000));
     expect(canvas.paint.isAntiAlias, isFalse);
     final TestTableSpanBorder border = TestTableSpanBorder(
       leading: const BorderSide(),
     );
-    decoration = TableSpanDecoration(border: border);
+    decoration = TableSpanDecoration(
+      border: border,
+      borderRadius: radius,
+    );
     decoration.paint(details);
     expect(border.details, details);
+    expect(border.radius, radius);
   });
 }
 
@@ -194,8 +199,10 @@ class TestCanvas implements Canvas {
 class TestTableSpanBorder extends TableSpanBorder {
   TestTableSpanBorder({super.leading});
   TableSpanDecorationPaintDetails? details;
+  BorderRadius? radius;
   @override
-  void paint(TableSpanDecorationPaintDetails details) {
+  void paint(TableSpanDecorationPaintDetails details, BorderRadius? radius) {
     this.details = details;
+    this.radius = radius;
   }
 }

packages/two_dimensional_scrollables/test/table_view/table_span_test.dart

@@ -1256,17 +1256,18 @@ 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
-      //  * Break out a separate test for padding decorations to validate paint
-      //    rect calls
+      //  * Break out a separate test for padding and radius decorations to
+      //    validate paint rect calls
       TableView tableView = TableView.builder(
         rowCount: 2,
         columnCount: 2,
         columnBuilder: (int index) => TableSpan(
           extent: const FixedTableSpanExtent(200.0),
           padding: index == 0 ? const TableSpanPadding(trailing: 10) : null,
-          foregroundDecoration: const TableSpanDecoration(
+          foregroundDecoration: TableSpanDecoration(
             consumeSpanPadding: false,
-            border: TableSpanBorder(
+            borderRadius: BorderRadius.circular(10.0),
+            border: const TableSpanBorder(
               trailing: BorderSide(
                 color: Colors.orange,
                 width: 3,
@@ -1276,14 +1277,16 @@ void main() {
           backgroundDecoration: TableSpanDecoration(
             // consumePadding true by default
             color: index.isEven ? Colors.red : null,
+            borderRadius: BorderRadius.circular(30.0),
           ),
         ),
         rowBuilder: (int index) => TableSpan(
           extent: const FixedTableSpanExtent(200.0),
           padding: index == 1 ? const TableSpanPadding(leading: 10) : null,
-          foregroundDecoration: const TableSpanDecoration(
+          foregroundDecoration: TableSpanDecoration(
             // consumePadding true by default
-            border: TableSpanBorder(
+            borderRadius: BorderRadius.circular(30.0),
+            border: const TableSpanBorder(
               leading: BorderSide(
                 color: Colors.green,
                 width: 3,
@@ -1292,6 +1295,7 @@ void main() {
           ),
           backgroundDecoration: TableSpanDecoration(
             color: index.isOdd ? Colors.blue : null,
+            borderRadius: BorderRadius.circular(30.0),
             consumeSpanPadding: false,
           ),
         ),