diff --git a/packages/two_dimensional_scrollables/CHANGELOG.md b/packages/two_dimensional_scrollables/CHANGELOG.md index 3a35f1e9c514..b61ddbd53a56 100644 --- a/packages/two_dimensional_scrollables/CHANGELOG.md +++ b/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 diff --git a/packages/two_dimensional_scrollables/lib/src/table_view/table_span.dart b/packages/two_dimensional_scrollables/lib/src/table_view/table_span.dart index fb6fb5c1f912..27d28d1028b4 100644 --- a/packages/two_dimensional_scrollables/lib/src/table_view/table_span.dart +++ b/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; } } diff --git a/packages/two_dimensional_scrollables/test/table_view/goldens/tableSpanDecoration.defaultMainAxis.png b/packages/two_dimensional_scrollables/test/table_view/goldens/tableSpanDecoration.defaultMainAxis.png index 44cb6497b63f..47c77cd4b132 100644 Binary files a/packages/two_dimensional_scrollables/test/table_view/goldens/tableSpanDecoration.defaultMainAxis.png and b/packages/two_dimensional_scrollables/test/table_view/goldens/tableSpanDecoration.defaultMainAxis.png differ diff --git a/packages/two_dimensional_scrollables/test/table_view/table_span_test.dart b/packages/two_dimensional_scrollables/test/table_view/table_span_test.dart index 04618bad2b6f..fea0d26e9a1d 100644 --- a/packages/two_dimensional_scrollables/test/table_view/table_span_test.dart +++ b/packages/two_dimensional_scrollables/test/table_view/table_span_test.dart @@ -161,6 +161,7 @@ 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)); @@ -168,9 +169,13 @@ void main() { 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; } } diff --git a/packages/two_dimensional_scrollables/test/table_view/table_test.dart b/packages/two_dimensional_scrollables/test/table_view/table_test.dart index 1440a45582e8..d910b772bce7 100644 --- a/packages/two_dimensional_scrollables/test/table_view/table_test.dart +++ b/packages/two_dimensional_scrollables/test/table_view/table_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, ), ),