Skip to content

Commit 42d8383

Browse files
author
Shi-Hao Hong
authored
DataTable Custom Horizontal Padding (flutter#33628)
* Add optional horizontalMargin and columnSpacing properties to DataTable * Add horizontalMargin and columnSpacing tests for DataTable and PaginatedDataTable
1 parent e6f896e commit 42d8383

File tree

4 files changed

+757
-6
lines changed

4 files changed

+757
-6
lines changed

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

Lines changed: 39 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -262,11 +262,15 @@ class DataTable extends StatelessWidget {
262262
this.sortColumnIndex,
263263
this.sortAscending = true,
264264
this.onSelectAll,
265+
this.horizontalMargin = 24.0,
266+
this.columnSpacing = 56.0,
265267
@required this.rows,
266268
}) : assert(columns != null),
267269
assert(columns.isNotEmpty),
268270
assert(sortColumnIndex == null || (sortColumnIndex >= 0 && sortColumnIndex < columns.length)),
269271
assert(sortAscending != null),
272+
assert(horizontalMargin != null),
273+
assert(columnSpacing != null),
270274
assert(rows != null),
271275
assert(!rows.any((DataRow row) => row.cells.length != columns.length)),
272276
_onlyTextColumn = _initOnlyTextColumn(columns),
@@ -311,6 +315,20 @@ class DataTable extends StatelessWidget {
311315
/// row is selectable.
312316
final ValueSetter<bool> onSelectAll;
313317

318+
/// The horizontal margin between the edges of the table and the content
319+
/// in the first and last cells of each row.
320+
///
321+
/// When a checkbox is displayed, it is also the margin between the checkbox
322+
/// the content in the first data column.
323+
///
324+
/// This value defaults to 24.0 to adhere to the Material Design specifications.
325+
final double horizontalMargin;
326+
327+
/// The horizontal margin between the contents of each data column.
328+
///
329+
/// This value defaults to 56.0 to adhere to the Material Design specifications.
330+
final double columnSpacing;
331+
314332
/// The data to show in each row (excluding the row that contains
315333
/// the column headings). Must be non-null, but may be empty.
316334
final List<DataRow> rows;
@@ -351,8 +369,6 @@ class DataTable extends StatelessWidget {
351369

352370
static const double _headingRowHeight = 56.0;
353371
static const double _dataRowHeight = 48.0;
354-
static const double _tablePadding = 24.0;
355-
static const double _columnSpacing = 56.0;
356372
static const double _sortArrowPadding = 2.0;
357373
static const double _headingFontSize = 12.0;
358374
static const Duration _sortArrowAnimationDuration = Duration(milliseconds: 150);
@@ -368,7 +384,7 @@ class DataTable extends StatelessWidget {
368384
Widget contents = Semantics(
369385
container: true,
370386
child: Padding(
371-
padding: const EdgeInsetsDirectional.only(start: _tablePadding, end: _tablePadding / 2.0),
387+
padding: EdgeInsetsDirectional.only(start: horizontalMargin, end: horizontalMargin / 2.0),
372388
child: Center(
373389
child: Checkbox(
374390
activeColor: color,
@@ -533,7 +549,7 @@ class DataTable extends StatelessWidget {
533549

534550
int displayColumnIndex = 0;
535551
if (showCheckboxColumn) {
536-
tableColumns[0] = const FixedColumnWidth(_tablePadding + Checkbox.width + _tablePadding / 2.0);
552+
tableColumns[0] = FixedColumnWidth(horizontalMargin + Checkbox.width + horizontalMargin / 2.0);
537553
tableRows[0].children[0] = _buildCheckbox(
538554
color: theme.accentColor,
539555
checked: allChecked,
@@ -554,9 +570,26 @@ class DataTable extends StatelessWidget {
554570

555571
for (int dataColumnIndex = 0; dataColumnIndex < columns.length; dataColumnIndex += 1) {
556572
final DataColumn column = columns[dataColumnIndex];
573+
574+
double paddingStart;
575+
if (dataColumnIndex == 0 && showCheckboxColumn) {
576+
paddingStart = horizontalMargin / 2.0;
577+
} else if (dataColumnIndex == 0 && !showCheckboxColumn) {
578+
paddingStart = horizontalMargin;
579+
} else {
580+
paddingStart = columnSpacing / 2.0;
581+
}
582+
583+
double paddingEnd;
584+
if (dataColumnIndex == columns.length - 1) {
585+
paddingEnd = horizontalMargin;
586+
} else {
587+
paddingEnd = columnSpacing / 2.0;
588+
}
589+
557590
final EdgeInsetsDirectional padding = EdgeInsetsDirectional.only(
558-
start: dataColumnIndex == 0 ? showCheckboxColumn ? _tablePadding / 2.0 : _tablePadding : _columnSpacing / 2.0,
559-
end: dataColumnIndex == columns.length - 1 ? _tablePadding : _columnSpacing / 2.0,
591+
start: paddingStart,
592+
end: paddingEnd,
560593
);
561594
if (dataColumnIndex == _onlyTextColumn) {
562595
tableColumns[displayColumnIndex] = const IntrinsicColumnWidth(flex: 1.0);

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,8 @@ class PaginatedDataTable extends StatefulWidget {
7070
this.sortColumnIndex,
7171
this.sortAscending = true,
7272
this.onSelectAll,
73+
this.horizontalMargin = 24.0,
74+
this.columnSpacing = 56.0,
7375
this.initialFirstRowIndex = 0,
7476
this.onPageChanged,
7577
this.rowsPerPage = defaultRowsPerPage,
@@ -83,6 +85,8 @@ class PaginatedDataTable extends StatefulWidget {
8385
assert(columns.isNotEmpty),
8486
assert(sortColumnIndex == null || (sortColumnIndex >= 0 && sortColumnIndex < columns.length)),
8587
assert(sortAscending != null),
88+
assert(horizontalMargin != null),
89+
assert(columnSpacing != null),
8690
assert(rowsPerPage != null),
8791
assert(rowsPerPage > 0),
8892
assert(() {
@@ -131,6 +135,20 @@ class PaginatedDataTable extends StatefulWidget {
131135
/// See [DataTable.onSelectAll].
132136
final ValueSetter<bool> onSelectAll;
133137

138+
/// The horizontal margin between the edges of the table and the content
139+
/// in the first and last cells of each row.
140+
///
141+
/// When a checkbox is displayed, it is also the margin between the checkbox
142+
/// the content in the first data column.
143+
///
144+
/// This value defaults to 24.0 to adhere to the Material Design specifications.
145+
final double horizontalMargin;
146+
147+
/// The horizontal margin between the contents of each data column.
148+
///
149+
/// This value defaults to 56.0 to adhere to the Material Design specifications.
150+
final double columnSpacing;
151+
134152
/// The index of the first row to display when the widget is first created.
135153
final int initialFirstRowIndex;
136154

@@ -430,6 +448,8 @@ class PaginatedDataTableState extends State<PaginatedDataTable> {
430448
sortColumnIndex: widget.sortColumnIndex,
431449
sortAscending: widget.sortAscending,
432450
onSelectAll: widget.onSelectAll,
451+
horizontalMargin: widget.horizontalMargin,
452+
columnSpacing: widget.columnSpacing,
433453
rows: _getRows(_firstRowIndex, widget.rowsPerPage),
434454
),
435455
),

0 commit comments

Comments
 (0)