Skip to content

Commit bec2c95

Browse files
PiinksPiinks
authored
[two_dimensional_scrollables] Fix paint bug when rows/columns are pinned and axes are reversed (#5038)
Fixes flutter/flutter#135386 This adds one more golden to verify the painting, but once public mock_canvas rolls to stable in flutter_test, we can remove all of the goldens and just verify using the `paints` method.
1 parent bb9de56 commit bec2c95

File tree

7 files changed

+108
-27
lines changed

7 files changed

+108
-27
lines changed

‎packages/two_dimensional_scrollables/CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
## 0.0.3
2+
3+
* Fixes paint issue when axes are reversed and TableView has pinned rows and columns.
4+
15
## 0.0.2
26

37
* Fixes override of default TwoDimensionalChildBuilderDelegate.addRepaintBoundaries.

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

+18-6
Original file line numberDiff line numberDiff line change
@@ -723,8 +723,12 @@ class RenderTableViewport extends RenderTwoDimensionalViewport {
723723
needsCompositing,
724724
offset,
725725
Rect.fromLTWH(
726-
_pinnedColumnsExtent,
727-
_pinnedRowsExtent,
726+
axisDirectionIsReversed(horizontalAxisDirection)
727+
? 0.0
728+
: _pinnedColumnsExtent,
729+
axisDirectionIsReversed(verticalAxisDirection)
730+
? 0.0
731+
: _pinnedRowsExtent,
728732
viewportDimension.width - _pinnedColumnsExtent,
729733
viewportDimension.height - _pinnedRowsExtent,
730734
),
@@ -750,8 +754,12 @@ class RenderTableViewport extends RenderTwoDimensionalViewport {
750754
needsCompositing,
751755
offset,
752756
Rect.fromLTWH(
753-
0.0,
754-
_pinnedRowsExtent,
757+
axisDirectionIsReversed(horizontalAxisDirection)
758+
? viewportDimension.width - _pinnedColumnsExtent
759+
: 0.0,
760+
axisDirectionIsReversed(verticalAxisDirection)
761+
? 0.0
762+
: _pinnedRowsExtent,
755763
_pinnedColumnsExtent,
756764
viewportDimension.height - _pinnedRowsExtent,
757765
),
@@ -778,8 +786,12 @@ class RenderTableViewport extends RenderTwoDimensionalViewport {
778786
needsCompositing,
779787
offset,
780788
Rect.fromLTWH(
781-
_pinnedColumnsExtent,
782-
0.0,
789+
axisDirectionIsReversed(horizontalAxisDirection)
790+
? 0.0
791+
: _pinnedColumnsExtent,
792+
axisDirectionIsReversed(horizontalAxisDirection)
793+
? viewportDimension.height - _pinnedRowsExtent
794+
: 0.0,
783795
viewportDimension.width - _pinnedColumnsExtent,
784796
_pinnedRowsExtent,
785797
),

‎packages/two_dimensional_scrollables/pubspec.yaml

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
name: two_dimensional_scrollables
22
description: Widgets that scroll using the two dimensional scrolling foundation.
3-
version: 0.0.2
3+
version: 0.0.3
44
repository: https://github.com/flutter/packages/tree/main/packages/two_dimensional_scrollables
55
issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+two_dimensional_scrollables%22+
66

‎packages/two_dimensional_scrollables/test/table_view/goldens/reversed.pinned.painting.png

4.75 KB
Loading

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

0 Bytes
Loading

‎packages/two_dimensional_scrollables/test/table_view/goldens/tableSpanDecoration.horizontalMainAxis.png

-1 Bytes
Loading

‎packages/two_dimensional_scrollables/test/table_view/table_test.dart

+85-20
Original file line numberDiff line numberDiff line change
@@ -957,23 +957,27 @@ void main() {
957957
columnBuilder: (int index) => TableSpan(
958958
extent: const FixedTableSpanExtent(200.0),
959959
foregroundDecoration: const TableSpanDecoration(
960-
border: TableSpanBorder(
961-
trailing: BorderSide(
962-
color: Colors.orange,
963-
width: 3,
964-
))),
960+
border: TableSpanBorder(
961+
trailing: BorderSide(
962+
color: Colors.orange,
963+
width: 3,
964+
),
965+
),
966+
),
965967
backgroundDecoration: TableSpanDecoration(
966968
color: index.isEven ? Colors.red : null,
967969
),
968970
),
969971
rowBuilder: (int index) => TableSpan(
970972
extent: const FixedTableSpanExtent(200.0),
971973
foregroundDecoration: const TableSpanDecoration(
972-
border: TableSpanBorder(
973-
leading: BorderSide(
974-
color: Colors.green,
975-
width: 3,
976-
))),
974+
border: TableSpanBorder(
975+
leading: BorderSide(
976+
color: Colors.green,
977+
width: 3,
978+
),
979+
),
980+
),
977981
backgroundDecoration: TableSpanDecoration(
978982
color: index.isOdd ? Colors.blue : null,
979983
),
@@ -1002,23 +1006,27 @@ void main() {
10021006
columnBuilder: (int index) => TableSpan(
10031007
extent: const FixedTableSpanExtent(200.0),
10041008
foregroundDecoration: const TableSpanDecoration(
1005-
border: TableSpanBorder(
1006-
trailing: BorderSide(
1007-
color: Colors.orange,
1008-
width: 3,
1009-
))),
1009+
border: TableSpanBorder(
1010+
trailing: BorderSide(
1011+
color: Colors.orange,
1012+
width: 3,
1013+
),
1014+
),
1015+
),
10101016
backgroundDecoration: TableSpanDecoration(
10111017
color: index.isEven ? Colors.red : null,
10121018
),
10131019
),
10141020
rowBuilder: (int index) => TableSpan(
10151021
extent: const FixedTableSpanExtent(200.0),
10161022
foregroundDecoration: const TableSpanDecoration(
1017-
border: TableSpanBorder(
1018-
leading: BorderSide(
1019-
color: Colors.green,
1020-
width: 3,
1021-
))),
1023+
border: TableSpanBorder(
1024+
leading: BorderSide(
1025+
color: Colors.green,
1026+
width: 3,
1027+
),
1028+
),
1029+
),
10221030
backgroundDecoration: TableSpanDecoration(
10231031
color: index.isOdd ? Colors.blue : null,
10241032
),
@@ -1040,6 +1048,63 @@ void main() {
10401048
);
10411049
});
10421050

1051+
testWidgets('paint rects are correct when reversed and pinned',
1052+
(WidgetTester tester) async {
1053+
// TODO(Piinks): Rewrite this to remove golden files from this repo when
1054+
// mock_canvas is public - https://github.com/flutter/flutter/pull/131631
1055+
// foreground, background, and precedence per mainAxis
1056+
final TableView tableView = TableView.builder(
1057+
verticalDetails: const ScrollableDetails.vertical(reverse: true),
1058+
horizontalDetails: const ScrollableDetails.horizontal(reverse: true),
1059+
rowCount: 2,
1060+
pinnedRowCount: 1,
1061+
columnCount: 2,
1062+
pinnedColumnCount: 1,
1063+
columnBuilder: (int index) => TableSpan(
1064+
extent: const FixedTableSpanExtent(200.0),
1065+
foregroundDecoration: const TableSpanDecoration(
1066+
border: TableSpanBorder(
1067+
trailing: BorderSide(
1068+
color: Colors.orange,
1069+
width: 3,
1070+
),
1071+
),
1072+
),
1073+
backgroundDecoration: TableSpanDecoration(
1074+
color: index.isEven ? Colors.red : null,
1075+
),
1076+
),
1077+
rowBuilder: (int index) => TableSpan(
1078+
extent: const FixedTableSpanExtent(200.0),
1079+
foregroundDecoration: const TableSpanDecoration(
1080+
border: TableSpanBorder(
1081+
leading: BorderSide(
1082+
color: Colors.green,
1083+
width: 3,
1084+
),
1085+
),
1086+
),
1087+
backgroundDecoration: TableSpanDecoration(
1088+
color: index.isOdd ? Colors.blue : null,
1089+
),
1090+
),
1091+
cellBuilder: (_, TableVicinity vicinity) {
1092+
return const SizedBox.square(
1093+
dimension: 200,
1094+
child: Center(child: FlutterLogo()),
1095+
);
1096+
},
1097+
);
1098+
1099+
await tester.pumpWidget(MaterialApp(home: tableView));
1100+
await tester.pumpAndSettle();
1101+
await expectLater(
1102+
find.byType(TableView),
1103+
matchesGoldenFile('goldens/reversed.pinned.painting.png'),
1104+
skip: !runGoldens,
1105+
);
1106+
});
1107+
10431108
testWidgets('mouse handling', (WidgetTester tester) async {
10441109
int enterCounter = 0;
10451110
int exitCounter = 0;

0 commit comments

Comments
 (0)