DataTable Custom Horizontal Padding (#33628)

* Add optional horizontalMargin and columnSpacing properties to DataTable

* Add horizontalMargin and columnSpacing tests for DataTable and PaginatedDataTable

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

@@ -262,11 +262,15 @@ class DataTable extends StatelessWidget {
     this.sortColumnIndex,
     this.sortAscending = true,
     this.onSelectAll,
+    this.horizontalMargin = 24.0,
+    this.columnSpacing = 56.0,
     @required this.rows,
   }) : assert(columns != null),
        assert(columns.isNotEmpty),
        assert(sortColumnIndex == null || (sortColumnIndex >= 0 && sortColumnIndex < columns.length)),
        assert(sortAscending != null),
+       assert(horizontalMargin != null),
+       assert(columnSpacing != null),
        assert(rows != null),
        assert(!rows.any((DataRow row) => row.cells.length != columns.length)),
        _onlyTextColumn = _initOnlyTextColumn(columns),
@@ -311,6 +315,20 @@ class DataTable extends StatelessWidget {
   /// row is selectable.
   final ValueSetter<bool> onSelectAll;
 
+  /// The horizontal margin between the edges of the table and the content
+  /// in the first and last cells of each row.
+  ///
+  /// When a checkbox is displayed, it is also the margin between the checkbox
+  /// the content in the first data column.
+  ///
+  /// This value defaults to 24.0 to adhere to the Material Design specifications.
+  final double horizontalMargin;
+
+  /// The horizontal margin between the contents of each data column.
+  ///
+  /// This value defaults to 56.0 to adhere to the Material Design specifications.
+  final double columnSpacing;
+
   /// The data to show in each row (excluding the row that contains
   /// the column headings). Must be non-null, but may be empty.
   final List<DataRow> rows;
@@ -351,8 +369,6 @@ class DataTable extends StatelessWidget {
 
   static const double _headingRowHeight = 56.0;
   static const double _dataRowHeight = 48.0;
-  static const double _tablePadding = 24.0;
-  static const double _columnSpacing = 56.0;
   static const double _sortArrowPadding = 2.0;
   static const double _headingFontSize = 12.0;
   static const Duration _sortArrowAnimationDuration = Duration(milliseconds: 150);
@@ -368,7 +384,7 @@ class DataTable extends StatelessWidget {
     Widget contents = Semantics(
       container: true,
       child: Padding(
-        padding: const EdgeInsetsDirectional.only(start: _tablePadding, end: _tablePadding / 2.0),
+        padding: EdgeInsetsDirectional.only(start: horizontalMargin, end: horizontalMargin / 2.0),
         child: Center(
           child: Checkbox(
             activeColor: color,
@@ -533,7 +549,7 @@ class DataTable extends StatelessWidget {
 
     int displayColumnIndex = 0;
     if (showCheckboxColumn) {
-      tableColumns[0] = const FixedColumnWidth(_tablePadding + Checkbox.width + _tablePadding / 2.0);
+      tableColumns[0] = FixedColumnWidth(horizontalMargin + Checkbox.width + horizontalMargin / 2.0);
       tableRows[0].children[0] = _buildCheckbox(
         color: theme.accentColor,
         checked: allChecked,
@@ -554,9 +570,26 @@ class DataTable extends StatelessWidget {
 
     for (int dataColumnIndex = 0; dataColumnIndex < columns.length; dataColumnIndex += 1) {
       final DataColumn column = columns[dataColumnIndex];
+
+      double paddingStart;
+      if (dataColumnIndex == 0 && showCheckboxColumn) {
+        paddingStart = horizontalMargin / 2.0;
+      } else if (dataColumnIndex == 0 && !showCheckboxColumn) {
+        paddingStart = horizontalMargin;
+      } else {
+        paddingStart = columnSpacing / 2.0;
+      }
+
+      double paddingEnd;
+      if (dataColumnIndex == columns.length - 1) {
+        paddingEnd = horizontalMargin;
+      } else {
+        paddingEnd = columnSpacing / 2.0;
+      }
+
       final EdgeInsetsDirectional padding = EdgeInsetsDirectional.only(
-        start: dataColumnIndex == 0 ? showCheckboxColumn ? _tablePadding / 2.0 : _tablePadding : _columnSpacing / 2.0,
-        end: dataColumnIndex == columns.length - 1 ? _tablePadding : _columnSpacing / 2.0,
+        start: paddingStart,
+        end: paddingEnd,
       );
       if (dataColumnIndex == _onlyTextColumn) {
         tableColumns[displayColumnIndex] = const IntrinsicColumnWidth(flex: 1.0);

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

@@ -70,6 +70,8 @@ class PaginatedDataTable extends StatefulWidget {
     this.sortColumnIndex,
     this.sortAscending = true,
     this.onSelectAll,
+    this.horizontalMargin = 24.0,
+    this.columnSpacing = 56.0,
     this.initialFirstRowIndex = 0,
     this.onPageChanged,
     this.rowsPerPage = defaultRowsPerPage,
@@ -83,6 +85,8 @@ class PaginatedDataTable extends StatefulWidget {
        assert(columns.isNotEmpty),
        assert(sortColumnIndex == null || (sortColumnIndex >= 0 && sortColumnIndex < columns.length)),
        assert(sortAscending != null),
+       assert(horizontalMargin != null),
+       assert(columnSpacing != null),
        assert(rowsPerPage != null),
        assert(rowsPerPage > 0),
        assert(() {
@@ -131,6 +135,20 @@ class PaginatedDataTable extends StatefulWidget {
   /// See [DataTable.onSelectAll].
   final ValueSetter<bool> onSelectAll;
 
+  /// The horizontal margin between the edges of the table and the content
+  /// in the first and last cells of each row.
+  ///
+  /// When a checkbox is displayed, it is also the margin between the checkbox
+  /// the content in the first data column.
+  ///
+  /// This value defaults to 24.0 to adhere to the Material Design specifications.
+  final double horizontalMargin;
+
+  /// The horizontal margin between the contents of each data column.
+  ///
+  /// This value defaults to 56.0 to adhere to the Material Design specifications.
+  final double columnSpacing;
+
   /// The index of the first row to display when the widget is first created.
   final int initialFirstRowIndex;
 
@@ -430,6 +448,8 @@ class PaginatedDataTableState extends State<PaginatedDataTable> {
               sortColumnIndex: widget.sortColumnIndex,
               sortAscending: widget.sortAscending,
               onSelectAll: widget.onSelectAll,
+              horizontalMargin: widget.horizontalMargin,
+              columnSpacing: widget.columnSpacing,
               rows: _getRows(_firstRowIndex, widget.rowsPerPage),
             ),
           ),