Skip to content

Commit

Permalink
Fix DataCell overflows when cell height is large by adding dataRowMin…
Browse files Browse the repository at this point in the history 
…Height, dataRowMaxHeight props. (flutter#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 <katelovett@google.com>
  • Loading branch information
@inouiw @Piinks
inouiw and Piinks authored Feb 23, 2023
1 parent 9793885 commit 3681b27
Show file tree
Hide file tree
Showing 7 changed files with 405 additions and 46 deletions.
1 change: 1 addition & 0 deletions AUTHORS
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,5 +101,6 @@ Junhua Lin <1075209054@qq.com>
Tomasz Gucio <tgucio@gmail.com>
Jason C.H <ctrysbita@outlook.com>
Hubert Jóźwiak <hjozwiakdx@gmail.com>
David Neuy <quantjump@gmail.com>
Eli Albert <crasowas@gmail.com>
Jan Kuß <jan@kuss.dev>
50 changes: 44 additions & 6 deletions packages/flutter/lib/src/material/data_table.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -392,7 +392,13 @@ class DataTable extends StatelessWidget {
this.onSelectAll,
this.decoration,
this.dataRowColor,
this.dataRowHeight,
@Deprecated(
'Migrate to use dataRowMinHeight and dataRowMaxHeight instead. '
'This feature was deprecated after v3.7.0-5.0.pre.',
)
double? dataRowHeight,
double? dataRowMinHeight,
double? dataRowMaxHeight,
this.dataTextStyle,
this.headingRowColor,
this.headingRowHeight,
Expand All @@ -410,6 +416,11 @@ class DataTable extends StatelessWidget {
assert(sortColumnIndex == null || (sortColumnIndex >= 0 && sortColumnIndex < columns.length)),
assert(!rows.any((DataRow row) => row.cells.length != columns.length)),
assert(dividerThickness == null || dividerThickness >= 0),
assert(dataRowMinHeight == null || dataRowMaxHeight == null || dataRowMaxHeight >= dataRowMinHeight),
assert(dataRowHeight == null || (dataRowMinHeight == null && dataRowMaxHeight == null),
'dataRowHeight ($dataRowHeight) must not be set if dataRowMinHeight ($dataRowMinHeight) or dataRowMaxHeight ($dataRowMaxHeight) are set.'),
dataRowMinHeight = dataRowHeight ?? dataRowMinHeight,
dataRowMaxHeight = dataRowHeight ?? dataRowMaxHeight,
_onlyTextColumn = _initOnlyTextColumn(columns);

/// The configuration and labels for the columns in the table.
Expand Down Expand Up @@ -504,7 +515,29 @@ class DataTable extends StatelessWidget {
/// If null, [DataTableThemeData.dataRowHeight] is used. This value defaults
/// to [kMinInteractiveDimension] to adhere to the Material Design
/// specifications.
final double? dataRowHeight;
@Deprecated(
'Migrate to use dataRowMinHeight and dataRowMaxHeight instead. '
'This feature was deprecated after v3.7.0-5.0.pre.',
)
double? get dataRowHeight => dataRowMinHeight == dataRowMaxHeight ? dataRowMinHeight : null;

/// {@template flutter.material.dataTable.dataRowMinHeight}
/// The minimum height of each row (excluding the row that contains column headings).
/// {@endtemplate}
///
/// If null, [DataTableThemeData.dataRowMinHeight] is used. This value defaults
/// to [kMinInteractiveDimension] to adhere to the Material Design
/// specifications.
final double? dataRowMinHeight;

/// {@template flutter.material.dataTable.dataRowMaxHeight}
/// The maximum height of each row (excluding the row that contains column headings).
/// {@endtemplate}
///
/// If null, [DataTableThemeData.dataRowMaxHeight] is used. This value defaults
/// to [kMinInteractiveDimension] to adhere to the Material Design
/// specifications.
final double? dataRowMaxHeight;

/// {@template flutter.material.dataTable.dataTextStyle}
/// The text style for data rows.
Expand Down Expand Up @@ -841,13 +874,17 @@ class DataTable extends StatelessWidget {
?? dataTableTheme.dataTextStyle
?? themeData.dataTableTheme.dataTextStyle
?? themeData.textTheme.bodyMedium!;
final double effectiveDataRowHeight = dataRowHeight
?? dataTableTheme.dataRowHeight
?? themeData.dataTableTheme.dataRowHeight
final double effectiveDataRowMinHeight = dataRowMinHeight
?? dataTableTheme.dataRowMinHeight
?? themeData.dataTableTheme.dataRowMinHeight
?? kMinInteractiveDimension;
final double effectiveDataRowMaxHeight = dataRowMaxHeight
?? dataTableTheme.dataRowMaxHeight
?? themeData.dataTableTheme.dataRowMaxHeight
?? kMinInteractiveDimension;
label = Container(
padding: padding,
height: effectiveDataRowHeight,
constraints: BoxConstraints(minHeight: effectiveDataRowMinHeight, maxHeight: effectiveDataRowMaxHeight),
alignment: numeric ? Alignment.centerRight : AlignmentDirectional.centerStart,
child: DefaultTextStyle(
style: effectiveDataTextStyle.copyWith(
Expand Down Expand Up @@ -1063,6 +1100,7 @@ class DataTable extends StatelessWidget {
clipBehavior: clipBehavior,
child: Table(
columnWidths: tableColumns.asMap(),
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
children: tableRows,
border: border,
),
Expand Down
46 changes: 39 additions & 7 deletions packages/flutter/lib/src/material/data_table_theme.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,13 @@ class DataTableThemeData with Diagnosticable {
const DataTableThemeData({
this.decoration,
this.dataRowColor,
this.dataRowHeight,
@Deprecated(
'Migrate to use dataRowMinHeight and dataRowMaxHeight instead. '
'This feature was deprecated after v3.7.0-5.0.pre.',
)
double? dataRowHeight,
double? dataRowMinHeight,
double? dataRowMaxHeight,
this.dataTextStyle,
this.headingRowColor,
this.headingRowHeight,
Expand All @@ -49,7 +55,11 @@ class DataTableThemeData with Diagnosticable {
this.columnSpacing,
this.dividerThickness,
this.checkboxHorizontalMargin,
});
}) : assert(dataRowMinHeight == null || dataRowMaxHeight == null || dataRowMaxHeight >= dataRowMinHeight),
assert(dataRowHeight == null || (dataRowMinHeight == null && dataRowMaxHeight == null),
'dataRowHeight ($dataRowHeight) must not be set if dataRowMinHeight ($dataRowMinHeight) or dataRowMaxHeight ($dataRowMaxHeight) are set.'),
dataRowMinHeight = dataRowHeight ?? dataRowMinHeight,
dataRowMaxHeight = dataRowHeight ?? dataRowMaxHeight;

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

/// {@macro flutter.material.dataTable.dataRowHeight}
final double? dataRowHeight;
@Deprecated(
'Migrate to use dataRowMinHeight and dataRowMaxHeight instead. '
'This feature was deprecated after v3.7.0-5.0.pre.',
)
double? get dataRowHeight => dataRowMinHeight == dataRowMaxHeight ? dataRowMinHeight : null;

/// {@macro flutter.material.dataTable.dataRowMinHeight}
final double? dataRowMinHeight;

/// {@macro flutter.material.dataTable.dataRowMaxHeight}
final double? dataRowMaxHeight;

/// {@macro flutter.material.dataTable.dataTextStyle}
final TextStyle? dataTextStyle;
Expand Down Expand Up @@ -91,7 +111,13 @@ class DataTableThemeData with Diagnosticable {
DataTableThemeData copyWith({
Decoration? decoration,
MaterialStateProperty<Color?>? dataRowColor,
@Deprecated(
'Migrate to use dataRowMinHeight and dataRowMaxHeight instead. '
'This feature was deprecated after v3.7.0-5.0.pre.',
)
double? dataRowHeight,
double? dataRowMinHeight,
double? dataRowMaxHeight,
TextStyle? dataTextStyle,
MaterialStateProperty<Color?>? headingRowColor,
double? headingRowHeight,
Expand All @@ -105,6 +131,8 @@ class DataTableThemeData with Diagnosticable {
decoration: decoration ?? this.decoration,
dataRowColor: dataRowColor ?? this.dataRowColor,
dataRowHeight: dataRowHeight ?? this.dataRowHeight,
dataRowMinHeight: dataRowMinHeight ?? this.dataRowMinHeight,
dataRowMaxHeight: dataRowMaxHeight ?? this.dataRowMaxHeight,
dataTextStyle: dataTextStyle ?? this.dataTextStyle,
headingRowColor: headingRowColor ?? this.headingRowColor,
headingRowHeight: headingRowHeight ?? this.headingRowHeight,
Expand All @@ -128,7 +156,8 @@ class DataTableThemeData with Diagnosticable {
return DataTableThemeData(
decoration: Decoration.lerp(a.decoration, b.decoration, t),
dataRowColor: MaterialStateProperty.lerp<Color?>(a.dataRowColor, b.dataRowColor, t, Color.lerp),
dataRowHeight: lerpDouble(a.dataRowHeight, b.dataRowHeight, t),
dataRowMinHeight: lerpDouble(a.dataRowMinHeight, b.dataRowMinHeight, t),
dataRowMaxHeight: lerpDouble(a.dataRowMaxHeight, b.dataRowMaxHeight, t),
dataTextStyle: TextStyle.lerp(a.dataTextStyle, b.dataTextStyle, t),
headingRowColor: MaterialStateProperty.lerp<Color?>(a.headingRowColor, b.headingRowColor, t, Color.lerp),
headingRowHeight: lerpDouble(a.headingRowHeight, b.headingRowHeight, t),
Expand All @@ -144,7 +173,8 @@ class DataTableThemeData with Diagnosticable {
int get hashCode => Object.hash(
decoration,
dataRowColor,
dataRowHeight,
dataRowMinHeight,
dataRowMaxHeight,
dataTextStyle,
headingRowColor,
headingRowHeight,
Expand All @@ -166,7 +196,8 @@ class DataTableThemeData with Diagnosticable {
return other is DataTableThemeData
&& other.decoration == decoration
&& other.dataRowColor == dataRowColor
&& other.dataRowHeight == dataRowHeight
&& other.dataRowMinHeight == dataRowMinHeight
&& other.dataRowMaxHeight == dataRowMaxHeight
&& other.dataTextStyle == dataTextStyle
&& other.headingRowColor == headingRowColor
&& other.headingRowHeight == headingRowHeight
Expand All @@ -182,7 +213,8 @@ class DataTableThemeData with Diagnosticable {
super.debugFillProperties(properties);
properties.add(DiagnosticsProperty<Decoration>('decoration', decoration, defaultValue: null));
properties.add(DiagnosticsProperty<MaterialStateProperty<Color?>>('dataRowColor', dataRowColor, defaultValue: null));
properties.add(DoubleProperty('dataRowHeight', dataRowHeight, defaultValue: null));
properties.add(DoubleProperty('dataRowMinHeight', dataRowMinHeight, defaultValue: null));
properties.add(DoubleProperty('dataRowMaxHeight', dataRowMaxHeight, defaultValue: null));
properties.add(DiagnosticsProperty<TextStyle>('dataTextStyle', dataTextStyle, defaultValue: null));
properties.add(DiagnosticsProperty<MaterialStateProperty<Color?>>('headingRowColor', headingRowColor, defaultValue: null));
properties.add(DoubleProperty('headingRowHeight', headingRowHeight, defaultValue: null));
Expand Down
34 changes: 31 additions & 3 deletions packages/flutter/lib/src/material/paginated_data_table.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,13 @@ class PaginatedDataTable extends StatefulWidget {
this.sortColumnIndex,
this.sortAscending = true,
this.onSelectAll,
this.dataRowHeight = kMinInteractiveDimension,
@Deprecated(
'Migrate to use dataRowMinHeight and dataRowMaxHeight instead. '
'This feature was deprecated after v3.7.0-5.0.pre.',
)
double? dataRowHeight,
double? dataRowMinHeight,
double? dataRowMaxHeight,
this.headingRowHeight = 56.0,
this.horizontalMargin = 24.0,
this.columnSpacing = 56.0,
Expand All @@ -91,6 +97,11 @@ class PaginatedDataTable extends StatefulWidget {
}) : assert(actions == null || (header != null)),
assert(columns.isNotEmpty),
assert(sortColumnIndex == null || (sortColumnIndex >= 0 && sortColumnIndex < columns.length)),
assert(dataRowMinHeight == null || dataRowMaxHeight == null || dataRowMaxHeight >= dataRowMinHeight),
assert(dataRowHeight == null || (dataRowMinHeight == null && dataRowMaxHeight == null),
'dataRowHeight ($dataRowHeight) must not be set if dataRowMinHeight ($dataRowMinHeight) or dataRowMaxHeight ($dataRowMaxHeight) are set.'),
dataRowMinHeight = dataRowHeight ?? dataRowMinHeight ?? kMinInteractiveDimension,
dataRowMaxHeight = dataRowHeight ?? dataRowMaxHeight ?? kMinInteractiveDimension,
assert(rowsPerPage > 0),
assert(() {
if (onRowsPerPageChanged != null) {
Expand Down Expand Up @@ -147,7 +158,23 @@ class PaginatedDataTable extends StatefulWidget {
///
/// This value is optional and defaults to kMinInteractiveDimension if not
/// specified.
final double dataRowHeight;
@Deprecated(
'Migrate to use dataRowMinHeight and dataRowMaxHeight instead. '
'This feature was deprecated after v3.7.0-5.0.pre.',
)
double? get dataRowHeight => dataRowMinHeight == dataRowMaxHeight ? dataRowMinHeight : null;

/// The minimum height of each row (excluding the row that contains column headings).
///
/// This value is optional and defaults to [kMinInteractiveDimension] if not
/// specified.
final double dataRowMinHeight;

/// The maximum height of each row (excluding the row that contains column headings).
///
/// This value is optional and defaults to kMinInteractiveDimension if not
/// specified.
final double dataRowMaxHeight;

/// The height of the heading row.
///
Expand Down Expand Up @@ -518,7 +545,8 @@ class PaginatedDataTableState extends State<PaginatedDataTable> {
// Make sure no decoration is set on the DataTable
// from the theme, as its already wrapped in a Card.
decoration: const BoxDecoration(),
dataRowHeight: widget.dataRowHeight,
dataRowMinHeight: widget.dataRowMinHeight,
dataRowMaxHeight: widget.dataRowMaxHeight,
headingRowHeight: widget.headingRowHeight,
horizontalMargin: widget.horizontalMargin,
checkboxHorizontalMargin: widget.checkboxHorizontalMargin,
Expand Down
Loading

0 comments on commit 3681b27

Please sign in to comment.