Skip to content

Commit 3681b27

Browse files
inouiwPiinks
inouiw
and
Piinks
authored
Fix DataCell overflows when cell height is large by adding dataRowMinHeight, dataRowMaxHeight props. (#114338)
* Fix DataCell overflows when cell height is large by adding dataRowMinHeight, dataRowMaxHeight props. * Fix DataCell overflows when cell height is large by adding dataRowMinHeight, dataRowMaxHeight props - add tests. * Fix analysis errors * Review changes. * Add asserts for dataRowMinHeight and dataRowMaxHeight * Add asserts for dataRowMinHeight and dataRowMaxHeight * Make dataRowHeight a computed getter * Remove get only dataRowHeight from hashCode... * Update deprecated after * Add new line at end of AUTHORS * Apply suggestions from code review * Update packages/flutter/test/material/data_table_test.dart --------- Co-authored-by: Kate Lovett <[email protected]>
1 parent 9793885 commit 3681b27

File tree

7 files changed

+405
-46
lines changed

7 files changed

+405
-46
lines changed

‎AUTHORS‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,5 +101,6 @@ Junhua Lin <[email protected]>
101101
Tomasz Gucio <[email protected]>
102102
Jason C.H <[email protected]>
103103
Hubert Jóźwiak <[email protected]>
104+
David Neuy <[email protected]>
104105
Eli Albert <[email protected]>
105106
Jan Kuß <[email protected]>

‎packages/flutter/lib/src/material/data_table.dart‎

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -392,7 +392,13 @@ class DataTable extends StatelessWidget {
392392
this.onSelectAll,
393393
this.decoration,
394394
this.dataRowColor,
395-
this.dataRowHeight,
395+
@Deprecated(
396+
'Migrate to use dataRowMinHeight and dataRowMaxHeight instead. '
397+
'This feature was deprecated after v3.7.0-5.0.pre.',
398+
)
399+
double? dataRowHeight,
400+
double? dataRowMinHeight,
401+
double? dataRowMaxHeight,
396402
this.dataTextStyle,
397403
this.headingRowColor,
398404
this.headingRowHeight,
@@ -410,6 +416,11 @@ class DataTable extends StatelessWidget {
410416
assert(sortColumnIndex == null || (sortColumnIndex >= 0 && sortColumnIndex < columns.length)),
411417
assert(!rows.any((DataRow row) => row.cells.length != columns.length)),
412418
assert(dividerThickness == null || dividerThickness >= 0),
419+
assert(dataRowMinHeight == null || dataRowMaxHeight == null || dataRowMaxHeight >= dataRowMinHeight),
420+
assert(dataRowHeight == null || (dataRowMinHeight == null && dataRowMaxHeight == null),
421+
'dataRowHeight ($dataRowHeight) must not be set if dataRowMinHeight ($dataRowMinHeight) or dataRowMaxHeight ($dataRowMaxHeight) are set.'),
422+
dataRowMinHeight = dataRowHeight ?? dataRowMinHeight,
423+
dataRowMaxHeight = dataRowHeight ?? dataRowMaxHeight,
413424
_onlyTextColumn = _initOnlyTextColumn(columns);
414425

415426
/// The configuration and labels for the columns in the table.
@@ -504,7 +515,29 @@ class DataTable extends StatelessWidget {
504515
/// If null, [DataTableThemeData.dataRowHeight] is used. This value defaults
505516
/// to [kMinInteractiveDimension] to adhere to the Material Design
506517
/// specifications.
507-
final double? dataRowHeight;
518+
@Deprecated(
519+
'Migrate to use dataRowMinHeight and dataRowMaxHeight instead. '
520+
'This feature was deprecated after v3.7.0-5.0.pre.',
521+
)
522+
double? get dataRowHeight => dataRowMinHeight == dataRowMaxHeight ? dataRowMinHeight : null;
523+
524+
/// {@template flutter.material.dataTable.dataRowMinHeight}
525+
/// The minimum height of each row (excluding the row that contains column headings).
526+
/// {@endtemplate}
527+
///
528+
/// If null, [DataTableThemeData.dataRowMinHeight] is used. This value defaults
529+
/// to [kMinInteractiveDimension] to adhere to the Material Design
530+
/// specifications.
531+
final double? dataRowMinHeight;
532+
533+
/// {@template flutter.material.dataTable.dataRowMaxHeight}
534+
/// The maximum height of each row (excluding the row that contains column headings).
535+
/// {@endtemplate}
536+
///
537+
/// If null, [DataTableThemeData.dataRowMaxHeight] is used. This value defaults
538+
/// to [kMinInteractiveDimension] to adhere to the Material Design
539+
/// specifications.
540+
final double? dataRowMaxHeight;
508541

509542
/// {@template flutter.material.dataTable.dataTextStyle}
510543
/// The text style for data rows.
@@ -841,13 +874,17 @@ class DataTable extends StatelessWidget {
841874
?? dataTableTheme.dataTextStyle
842875
?? themeData.dataTableTheme.dataTextStyle
843876
?? themeData.textTheme.bodyMedium!;
844-
final double effectiveDataRowHeight = dataRowHeight
845-
?? dataTableTheme.dataRowHeight
846-
?? themeData.dataTableTheme.dataRowHeight
877+
final double effectiveDataRowMinHeight = dataRowMinHeight
878+
?? dataTableTheme.dataRowMinHeight
879+
?? themeData.dataTableTheme.dataRowMinHeight
880+
?? kMinInteractiveDimension;
881+
final double effectiveDataRowMaxHeight = dataRowMaxHeight
882+
?? dataTableTheme.dataRowMaxHeight
883+
?? themeData.dataTableTheme.dataRowMaxHeight
847884
?? kMinInteractiveDimension;
848885
label = Container(
849886
padding: padding,
850-
height: effectiveDataRowHeight,
887+
constraints: BoxConstraints(minHeight: effectiveDataRowMinHeight, maxHeight: effectiveDataRowMaxHeight),
851888
alignment: numeric ? Alignment.centerRight : AlignmentDirectional.centerStart,
852889
child: DefaultTextStyle(
853890
style: effectiveDataTextStyle.copyWith(
@@ -1063,6 +1100,7 @@ class DataTable extends StatelessWidget {
10631100
clipBehavior: clipBehavior,
10641101
child: Table(
10651102
columnWidths: tableColumns.asMap(),
1103+
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
10661104
children: tableRows,
10671105
border: border,
10681106
),

‎packages/flutter/lib/src/material/data_table_theme.dart‎

Lines changed: 39 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,13 @@ class DataTableThemeData with Diagnosticable {
4040
const DataTableThemeData({
4141
this.decoration,
4242
this.dataRowColor,
43-
this.dataRowHeight,
43+
@Deprecated(
44+
'Migrate to use dataRowMinHeight and dataRowMaxHeight instead. '
45+
'This feature was deprecated after v3.7.0-5.0.pre.',
46+
)
47+
double? dataRowHeight,
48+
double? dataRowMinHeight,
49+
double? dataRowMaxHeight,
4450
this.dataTextStyle,
4551
this.headingRowColor,
4652
this.headingRowHeight,
@@ -49,7 +55,11 @@ class DataTableThemeData with Diagnosticable {
4955
this.columnSpacing,
5056
this.dividerThickness,
5157
this.checkboxHorizontalMargin,
52-
});
58+
}) : assert(dataRowMinHeight == null || dataRowMaxHeight == null || dataRowMaxHeight >= dataRowMinHeight),
59+
assert(dataRowHeight == null || (dataRowMinHeight == null && dataRowMaxHeight == null),
60+
'dataRowHeight ($dataRowHeight) must not be set if dataRowMinHeight ($dataRowMinHeight) or dataRowMaxHeight ($dataRowMaxHeight) are set.'),
61+
dataRowMinHeight = dataRowHeight ?? dataRowMinHeight,
62+
dataRowMaxHeight = dataRowHeight ?? dataRowMaxHeight;
5363

5464
/// {@macro flutter.material.dataTable.decoration}
5565
final Decoration? decoration;
@@ -59,7 +69,17 @@ class DataTableThemeData with Diagnosticable {
5969
final MaterialStateProperty<Color?>? dataRowColor;
6070

6171
/// {@macro flutter.material.dataTable.dataRowHeight}
62-
final double? dataRowHeight;
72+
@Deprecated(
73+
'Migrate to use dataRowMinHeight and dataRowMaxHeight instead. '
74+
'This feature was deprecated after v3.7.0-5.0.pre.',
75+
)
76+
double? get dataRowHeight => dataRowMinHeight == dataRowMaxHeight ? dataRowMinHeight : null;
77+
78+
/// {@macro flutter.material.dataTable.dataRowMinHeight}
79+
final double? dataRowMinHeight;
80+
81+
/// {@macro flutter.material.dataTable.dataRowMaxHeight}
82+
final double? dataRowMaxHeight;
6383

6484
/// {@macro flutter.material.dataTable.dataTextStyle}
6585
final TextStyle? dataTextStyle;
@@ -91,7 +111,13 @@ class DataTableThemeData with Diagnosticable {
91111
DataTableThemeData copyWith({
92112
Decoration? decoration,
93113
MaterialStateProperty<Color?>? dataRowColor,
114+
@Deprecated(
115+
'Migrate to use dataRowMinHeight and dataRowMaxHeight instead. '
116+
'This feature was deprecated after v3.7.0-5.0.pre.',
117+
)
94118
double? dataRowHeight,
119+
double? dataRowMinHeight,
120+
double? dataRowMaxHeight,
95121
TextStyle? dataTextStyle,
96122
MaterialStateProperty<Color?>? headingRowColor,
97123
double? headingRowHeight,
@@ -105,6 +131,8 @@ class DataTableThemeData with Diagnosticable {
105131
decoration: decoration ?? this.decoration,
106132
dataRowColor: dataRowColor ?? this.dataRowColor,
107133
dataRowHeight: dataRowHeight ?? this.dataRowHeight,
134+
dataRowMinHeight: dataRowMinHeight ?? this.dataRowMinHeight,
135+
dataRowMaxHeight: dataRowMaxHeight ?? this.dataRowMaxHeight,
108136
dataTextStyle: dataTextStyle ?? this.dataTextStyle,
109137
headingRowColor: headingRowColor ?? this.headingRowColor,
110138
headingRowHeight: headingRowHeight ?? this.headingRowHeight,
@@ -128,7 +156,8 @@ class DataTableThemeData with Diagnosticable {
128156
return DataTableThemeData(
129157
decoration: Decoration.lerp(a.decoration, b.decoration, t),
130158
dataRowColor: MaterialStateProperty.lerp<Color?>(a.dataRowColor, b.dataRowColor, t, Color.lerp),
131-
dataRowHeight: lerpDouble(a.dataRowHeight, b.dataRowHeight, t),
159+
dataRowMinHeight: lerpDouble(a.dataRowMinHeight, b.dataRowMinHeight, t),
160+
dataRowMaxHeight: lerpDouble(a.dataRowMaxHeight, b.dataRowMaxHeight, t),
132161
dataTextStyle: TextStyle.lerp(a.dataTextStyle, b.dataTextStyle, t),
133162
headingRowColor: MaterialStateProperty.lerp<Color?>(a.headingRowColor, b.headingRowColor, t, Color.lerp),
134163
headingRowHeight: lerpDouble(a.headingRowHeight, b.headingRowHeight, t),
@@ -144,7 +173,8 @@ class DataTableThemeData with Diagnosticable {
144173
int get hashCode => Object.hash(
145174
decoration,
146175
dataRowColor,
147-
dataRowHeight,
176+
dataRowMinHeight,
177+
dataRowMaxHeight,
148178
dataTextStyle,
149179
headingRowColor,
150180
headingRowHeight,
@@ -166,7 +196,8 @@ class DataTableThemeData with Diagnosticable {
166196
return other is DataTableThemeData
167197
&& other.decoration == decoration
168198
&& other.dataRowColor == dataRowColor
169-
&& other.dataRowHeight == dataRowHeight
199+
&& other.dataRowMinHeight == dataRowMinHeight
200+
&& other.dataRowMaxHeight == dataRowMaxHeight
170201
&& other.dataTextStyle == dataTextStyle
171202
&& other.headingRowColor == headingRowColor
172203
&& other.headingRowHeight == headingRowHeight
@@ -182,7 +213,8 @@ class DataTableThemeData with Diagnosticable {
182213
super.debugFillProperties(properties);
183214
properties.add(DiagnosticsProperty<Decoration>('decoration', decoration, defaultValue: null));
184215
properties.add(DiagnosticsProperty<MaterialStateProperty<Color?>>('dataRowColor', dataRowColor, defaultValue: null));
185-
properties.add(DoubleProperty('dataRowHeight', dataRowHeight, defaultValue: null));
216+
properties.add(DoubleProperty('dataRowMinHeight', dataRowMinHeight, defaultValue: null));
217+
properties.add(DoubleProperty('dataRowMaxHeight', dataRowMaxHeight, defaultValue: null));
186218
properties.add(DiagnosticsProperty<TextStyle>('dataTextStyle', dataTextStyle, defaultValue: null));
187219
properties.add(DiagnosticsProperty<MaterialStateProperty<Color?>>('headingRowColor', headingRowColor, defaultValue: null));
188220
properties.add(DoubleProperty('headingRowHeight', headingRowHeight, defaultValue: null));

‎packages/flutter/lib/src/material/paginated_data_table.dart‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,13 @@ class PaginatedDataTable extends StatefulWidget {
7171
this.sortColumnIndex,
7272
this.sortAscending = true,
7373
this.onSelectAll,
74-
this.dataRowHeight = kMinInteractiveDimension,
74+
@Deprecated(
75+
'Migrate to use dataRowMinHeight and dataRowMaxHeight instead. '
76+
'This feature was deprecated after v3.7.0-5.0.pre.',
77+
)
78+
double? dataRowHeight,
79+
double? dataRowMinHeight,
80+
double? dataRowMaxHeight,
7581
this.headingRowHeight = 56.0,
7682
this.horizontalMargin = 24.0,
7783
this.columnSpacing = 56.0,
@@ -91,6 +97,11 @@ class PaginatedDataTable extends StatefulWidget {
9197
}) : assert(actions == null || (header != null)),
9298
assert(columns.isNotEmpty),
9399
assert(sortColumnIndex == null || (sortColumnIndex >= 0 && sortColumnIndex < columns.length)),
100+
assert(dataRowMinHeight == null || dataRowMaxHeight == null || dataRowMaxHeight >= dataRowMinHeight),
101+
assert(dataRowHeight == null || (dataRowMinHeight == null && dataRowMaxHeight == null),
102+
'dataRowHeight ($dataRowHeight) must not be set if dataRowMinHeight ($dataRowMinHeight) or dataRowMaxHeight ($dataRowMaxHeight) are set.'),
103+
dataRowMinHeight = dataRowHeight ?? dataRowMinHeight ?? kMinInteractiveDimension,
104+
dataRowMaxHeight = dataRowHeight ?? dataRowMaxHeight ?? kMinInteractiveDimension,
94105
assert(rowsPerPage > 0),
95106
assert(() {
96107
if (onRowsPerPageChanged != null) {
@@ -147,7 +158,23 @@ class PaginatedDataTable extends StatefulWidget {
147158
///
148159
/// This value is optional and defaults to kMinInteractiveDimension if not
149160
/// specified.
150-
final double dataRowHeight;
161+
@Deprecated(
162+
'Migrate to use dataRowMinHeight and dataRowMaxHeight instead. '
163+
'This feature was deprecated after v3.7.0-5.0.pre.',
164+
)
165+
double? get dataRowHeight => dataRowMinHeight == dataRowMaxHeight ? dataRowMinHeight : null;
166+
167+
/// The minimum height of each row (excluding the row that contains column headings).
168+
///
169+
/// This value is optional and defaults to [kMinInteractiveDimension] if not
170+
/// specified.
171+
final double dataRowMinHeight;
172+
173+
/// The maximum height of each row (excluding the row that contains column headings).
174+
///
175+
/// This value is optional and defaults to kMinInteractiveDimension if not
176+
/// specified.
177+
final double dataRowMaxHeight;
151178

152179
/// The height of the heading row.
153180
///
@@ -518,7 +545,8 @@ class PaginatedDataTableState extends State<PaginatedDataTable> {
518545
// Make sure no decoration is set on the DataTable
519546
// from the theme, as its already wrapped in a Card.
520547
decoration: const BoxDecoration(),
521-
dataRowHeight: widget.dataRowHeight,
548+
dataRowMinHeight: widget.dataRowMinHeight,
549+
dataRowMaxHeight: widget.dataRowMaxHeight,
522550
headingRowHeight: widget.headingRowHeight,
523551
horizontalMargin: widget.horizontalMargin,
524552
checkboxHorizontalMargin: widget.checkboxHorizontalMargin,

0 commit comments

Comments
 (0)