Add DataTableTheme to allow for themable DataTables (#64316)

packages/flutter/lib/material.dart

@@ -52,6 +52,7 @@ export 'src/material/constants.dart';
 export 'src/material/curves.dart';
 export 'src/material/data_table.dart';
 export 'src/material/data_table_source.dart';
+export 'src/material/data_table_theme.dart';
 export 'src/material/debug.dart';
 export 'src/material/dialog.dart';
 export 'src/material/dialog_theme.dart';

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

+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// @dart = 2.8
+
+import 'dart:ui' show lerpDouble;
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/widgets.dart';
+
+import 'material_state.dart';
+import 'theme.dart';
+
+/// Defines default property values for descendant [DataTable]
+/// widgets.
+///
+/// Descendant widgets obtain the current [DataTableThemeData] object
+/// using `DataTableTheme.of(context)`. Instances of
+/// [DataTableThemeData] can be customized with
+/// [DataTableThemeData.copyWith].
+///
+/// Typically a [DataTableThemeData] is specified as part of the
+/// overall [Theme] with [ThemeData.dataTableTheme].
+///
+/// All [DataTableThemeData] properties are `null` by default. When
+/// null, the [DataTable] will use the values from [ThemeData] if they exist,
+/// otherwise it will provide its own defaults based on the overall [Theme]'s
+/// textTheme and colorScheme. See the individual [DataTable] properties for
+/// details.
+///
+/// See also:
+///
+///  * [ThemeData], which describes the overall theme information for the
+///    application.
+@immutable
+class DataTableThemeData with Diagnosticable {
+  /// Creates a theme that can be used for [ThemeData.dataTableTheme].
+  const DataTableThemeData({
+    this.decoration,
+    this.dataRowColor,
+    this.dataRowHeight,
+    this.dataTextStyle,
+    this.headingRowColor,
+    this.headingRowHeight,
+    this.headingTextStyle,
+    this.horizontalMargin,
+    this.columnSpacing,
+    this.dividerThickness,
+  });
+
+  /// {@macro flutter.material.dataTable.decoration}
+  final Decoration decoration;
+
+  /// {@macro flutter.material.dataTable.dataRowColor}
+  /// {@macro flutter.material.dataTable.dataRowColorCode}
+  final MaterialStateProperty<Color> dataRowColor;
+
+  /// {@macro flutter.material.dataTable.dataRowHeight}
+  final double dataRowHeight;
+
+  /// {@macro flutter.material.dataTable.dataTextStyle}
+  final TextStyle dataTextStyle;
+
+  /// {@macro flutter.material.dataTable.headingRowColor}
+  final MaterialStateProperty<Color> headingRowColor;
+
+  /// {@macro flutter.material.dataTable.headingRowHeight}
+  final double headingRowHeight;
+
+  /// {@macro flutter.material.dataTable.headingTextStyle}
+  final TextStyle headingTextStyle;
+
+  /// {@macro flutter.material.dataTable.horizontalMargin}
+  final double horizontalMargin;
+
+  /// {@macro flutter.material.dataTable.columnSpacing}
+  final double columnSpacing;
+
+  /// {@macro flutter.material.dataTable.dividerThickness}
+  final double dividerThickness;
+
+  /// Creates a copy of this object but with the given fields replaced with the
+  /// new values.
+  DataTableThemeData copyWith({
+    Decoration decoration,
+    MaterialStateProperty<Color> dataRowColor,
+    double dataRowHeight,
+    TextStyle dataTextStyle,
+    MaterialStateProperty<Color> headingRowColor,
+    double headingRowHeight,
+    TextStyle headingTextStyle,
+    double horizontalMargin,
+    double columnSpacing,
+    double dividerThickness,
+  }) {
+    return DataTableThemeData(
+      decoration: decoration ?? this.decoration,
+      dataRowColor: dataRowColor ?? this.dataRowColor,
+      dataRowHeight: dataRowHeight ?? this.dataRowHeight,
+      dataTextStyle: dataTextStyle ?? this.dataTextStyle,
+      headingRowColor: headingRowColor ?? this.headingRowColor,
+      headingRowHeight: headingRowHeight ?? this.headingRowHeight,
+      headingTextStyle: headingTextStyle ?? this.headingTextStyle,
+      horizontalMargin: horizontalMargin ?? this.horizontalMargin,
+      columnSpacing: columnSpacing ?? this.columnSpacing,
+      dividerThickness: dividerThickness ?? this.dividerThickness,
+    );
+  }
+
+  /// Linearly interpolate between two [DataTableThemeData]s.
+  ///
+  /// The argument `t` must not be null.
+  ///
+  /// {@macro dart.ui.shadow.lerp}
+  static DataTableThemeData lerp(DataTableThemeData a, DataTableThemeData b, double t) {
+    assert(t != null);
+    return DataTableThemeData(
+      decoration: Decoration.lerp(a.decoration, b.decoration, t),
+      dataRowColor: _lerpProperties(a.dataRowColor, b.dataRowColor, t, Color.lerp),
+      dataRowHeight: lerpDouble(a.dataRowHeight, b.dataRowHeight, t),
+      dataTextStyle: TextStyle.lerp(a.dataTextStyle, b.dataTextStyle, t),
+      headingRowColor: _lerpProperties(a.headingRowColor, b.headingRowColor, t, Color.lerp),
+      headingRowHeight: lerpDouble(a.headingRowHeight, b.headingRowHeight, t),
+      headingTextStyle: TextStyle.lerp(a.headingTextStyle, b.headingTextStyle, t),
+      horizontalMargin: lerpDouble(a.horizontalMargin, b.horizontalMargin, t),
+      columnSpacing: lerpDouble(a.columnSpacing, b.columnSpacing, t),
+      dividerThickness: lerpDouble(a.dividerThickness, b.dividerThickness, t)
+    );
+  }
+
+  @override
+  int get hashCode {
+    return hashValues(
+      decoration,
+      dataRowColor,
+      dataRowHeight,
+      dataTextStyle,
+      headingRowColor,
+      headingRowHeight,
+      headingTextStyle,
+      horizontalMargin,
+      columnSpacing,
+      dividerThickness,
+    );
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other))
+      return true;
+    if (other.runtimeType != runtimeType)
+      return false;
+    return other is DataTableThemeData
+      && other.decoration == decoration
+      && other.dataRowColor == dataRowColor
+      && other.dataRowHeight == dataRowHeight
+      && other.dataTextStyle == dataTextStyle
+      && other.headingRowColor == headingRowColor
+      && other.headingRowHeight == headingRowHeight
+      && other.headingTextStyle == headingTextStyle
+      && other.horizontalMargin == horizontalMargin
+      && other.columnSpacing == columnSpacing
+      && other.dividerThickness == dividerThickness;
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    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(DiagnosticsProperty<TextStyle>('dataTextStyle', dataTextStyle, defaultValue: null));
+    properties.add(DiagnosticsProperty<MaterialStateProperty<Color>>('headingRowColor', headingRowColor, defaultValue: null));
+    properties.add(DoubleProperty('headingRowHeight', headingRowHeight, defaultValue: null));
+    properties.add(DiagnosticsProperty<TextStyle>('headingTextStyle', headingTextStyle, defaultValue: null));
+    properties.add(DoubleProperty('horizontalMargin', horizontalMargin, defaultValue: null));
+    properties.add(DoubleProperty('columnSpacing', columnSpacing, defaultValue: null));
+    properties.add(DoubleProperty('dividerThickness', dividerThickness, defaultValue: null));
+  }
+
+  static MaterialStateProperty<T> _lerpProperties<T>(MaterialStateProperty<T> a, MaterialStateProperty<T> b, double t, T Function(T, T, double) lerpFunction ) {
+    // Avoid creating a _LerpProperties object for a common case.
+    if (a == null && b == null)
+      return null;
+    return _LerpProperties<T>(a, b, t, lerpFunction);
+  }
+}
+
+class _LerpProperties<T> implements MaterialStateProperty<T> {
+  const _LerpProperties(this.a, this.b, this.t, this.lerpFunction);
+
+  final MaterialStateProperty<T> a;
+  final MaterialStateProperty<T> b;
+  final double t;
+  final T Function(T, T, double) lerpFunction;
+
+  @override
+  T resolve(Set<MaterialState> states) {
+    final T resolvedA = a?.resolve(states);
+    final T resolvedB = b?.resolve(states);
+    return lerpFunction(resolvedA, resolvedB, t);
+  }
+}
+
+/// Applies a data table theme to descendant [DataTable] widgets.
+///
+/// Descendant widgets obtain the current theme's [DataTableTheme] object using
+/// [DataTableTheme.of]. When a widget uses [DataTableTheme.of], it is
+/// automatically rebuilt if the theme later changes.
+///
+/// A data table theme can be specified as part of the overall Material
+/// theme using [ThemeData.dataTableTheme].
+///
+/// See also:
+///
+///  * [DataTableThemeData], which describes the actual configuration
+///    of a data table theme.
+class DataTableTheme extends InheritedWidget {
+  /// Constructs a data table theme that configures all descendant
+  /// [DataTable] widgets.
+  ///
+  /// The [data] must not be null.
+  const DataTableTheme({
+    Key key,
+    @required this.data,
+    Widget child,
+  }) : assert(data != null), super(key: key, child: child);
+
+  /// The properties used for all descendant [DataTable] widgets.
+  final DataTableThemeData data;
+
+  /// Returns the configuration [data] from the closest
+  /// [DataTableTheme] ancestor. If there is no ancestor, it returns
+  /// [ThemeData.dataTableTheme]. Applications can assume that the
+  /// returned value will not be null.
+  ///
+  /// Typical usage is as follows:
+  ///
+  /// ```dart
+  /// DataTableThemeData theme = DataTableTheme.of(context);
+  /// ```
+  static DataTableThemeData of(BuildContext context) {
+    final DataTableTheme dataTableTheme = context.dependOnInheritedWidgetOfExactType<DataTableTheme>();
+    return dataTableTheme?.data ?? Theme.of(context).dataTableTheme;
+  }
+
+  @override
+  bool updateShouldNotify(DataTableTheme oldWidget) => data != oldWidget.data;
+}

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

@@ -476,6 +476,7 @@ class PaginatedDataTableState extends State<PaginatedDataTable> {
                     horizontalMargin: widget.horizontalMargin,
                     columnSpacing: widget.columnSpacing,
                     showCheckboxColumn: widget.showCheckboxColumn,
+                    showBottomBorder: true,
                     rows: _getRows(_firstRowIndex, widget.rowsPerPage),
                   ),
                 ),

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

@@ -22,6 +22,7 @@ import 'card_theme.dart';
 import 'chip_theme.dart';
 import 'color_scheme.dart';
 import 'colors.dart';
+import 'data_table_theme.dart';
 import 'dialog_theme.dart';
 import 'divider_theme.dart';
 import 'elevated_button_theme.dart';
@@ -283,6 +284,7 @@ class ThemeData with Diagnosticable {
     ElevatedButtonThemeData elevatedButtonTheme,
     OutlinedButtonThemeData outlinedButtonTheme,
     TextSelectionThemeData textSelectionTheme,
+    DataTableThemeData dataTableTheme,
     bool fixTextFieldOutlineLabel,
     bool useTextSelectionTheme,
   }) {
@@ -400,6 +402,7 @@ class ThemeData with Diagnosticable {
     elevatedButtonTheme ??= const ElevatedButtonThemeData();
     outlinedButtonTheme ??= const OutlinedButtonThemeData();
     textSelectionTheme ??= const TextSelectionThemeData();
+    dataTableTheme ??= const DataTableThemeData();
 
     fixTextFieldOutlineLabel ??= false;
     useTextSelectionTheme ??= false;
@@ -475,6 +478,7 @@ class ThemeData with Diagnosticable {
       elevatedButtonTheme: elevatedButtonTheme,
       outlinedButtonTheme: outlinedButtonTheme,
       textSelectionTheme: textSelectionTheme,
+      dataTableTheme: dataTableTheme,
       fixTextFieldOutlineLabel: fixTextFieldOutlineLabel,
       useTextSelectionTheme: useTextSelectionTheme,
     );
@@ -561,6 +565,7 @@ class ThemeData with Diagnosticable {
     @required this.elevatedButtonTheme,
     @required this.outlinedButtonTheme,
     @required this.textSelectionTheme,
+    @required this.dataTableTheme,
     @required this.fixTextFieldOutlineLabel,
     @required this.useTextSelectionTheme,
   }) : assert(visualDensity != null),
@@ -629,8 +634,8 @@ class ThemeData with Diagnosticable {
        assert(textButtonTheme != null),
        assert(elevatedButtonTheme != null),
        assert(outlinedButtonTheme != null),
-       assert(fixTextFieldOutlineLabel != null),
        assert(textSelectionTheme != null),
+       assert(dataTableTheme != null),
        assert(fixTextFieldOutlineLabel != null),
        assert(useTextSelectionTheme != null);
 
@@ -1107,6 +1112,10 @@ class ThemeData with Diagnosticable {
   /// A theme for customizing the appearance and layout of [TextField] widgets.
   final TextSelectionThemeData textSelectionTheme;
 
+  /// A theme for customizing the appearance and layout of [DataTable]
+  /// widgets.
+  final DataTableThemeData dataTableTheme;
+
   /// A temporary flag to allow apps to opt-in to a
   /// [small fix](https://github.com/flutter/flutter/issues/54028) for the Y
   /// coordinate of the floating label in a [TextField] [OutlineInputBorder].
@@ -1206,6 +1215,7 @@ class ThemeData with Diagnosticable {
     ElevatedButtonThemeData elevatedButtonTheme,
     OutlinedButtonThemeData outlinedButtonTheme,
     TextSelectionThemeData textSelectionTheme,
+    DataTableThemeData dataTableTheme,
     bool fixTextFieldOutlineLabel,
     bool useTextSelectionTheme,
   }) {
@@ -1281,6 +1291,7 @@ class ThemeData with Diagnosticable {
       elevatedButtonTheme: elevatedButtonTheme ?? this.elevatedButtonTheme,
       outlinedButtonTheme: outlinedButtonTheme ?? this.outlinedButtonTheme,
       textSelectionTheme: textSelectionTheme ?? this.textSelectionTheme,
+      dataTableTheme: dataTableTheme ?? this.dataTableTheme,
       fixTextFieldOutlineLabel: fixTextFieldOutlineLabel ?? this.fixTextFieldOutlineLabel,
       useTextSelectionTheme: useTextSelectionTheme ?? this.useTextSelectionTheme,
     );
@@ -1434,6 +1445,7 @@ class ThemeData with Diagnosticable {
       elevatedButtonTheme: ElevatedButtonThemeData.lerp(a.elevatedButtonTheme, b.elevatedButtonTheme, t),
       outlinedButtonTheme: OutlinedButtonThemeData.lerp(a.outlinedButtonTheme, b.outlinedButtonTheme, t),
       textSelectionTheme: TextSelectionThemeData .lerp(a.textSelectionTheme, b.textSelectionTheme, t),
+      dataTableTheme: DataTableThemeData.lerp(a.dataTableTheme, b.dataTableTheme, t),
       fixTextFieldOutlineLabel: t < 0.5 ? a.fixTextFieldOutlineLabel : b.fixTextFieldOutlineLabel,
       useTextSelectionTheme: t < 0.5 ? a.useTextSelectionTheme : b.useTextSelectionTheme,
     );
@@ -1515,6 +1527,7 @@ class ThemeData with Diagnosticable {
         && other.elevatedButtonTheme == elevatedButtonTheme
         && other.outlinedButtonTheme == outlinedButtonTheme
         && other.textSelectionTheme == textSelectionTheme
+        && other.dataTableTheme == dataTableTheme
         && other.fixTextFieldOutlineLabel == fixTextFieldOutlineLabel
         && other.useTextSelectionTheme == useTextSelectionTheme;
   }
@@ -1595,6 +1608,7 @@ class ThemeData with Diagnosticable {
       elevatedButtonTheme,
       outlinedButtonTheme,
       textSelectionTheme,
+      dataTableTheme,
       fixTextFieldOutlineLabel,
       useTextSelectionTheme,
     ];
@@ -1673,6 +1687,7 @@ class ThemeData with Diagnosticable {
     properties.add(DiagnosticsProperty<TextButtonThemeData>('textButtonTheme', textButtonTheme, defaultValue: defaultData.textButtonTheme, level: DiagnosticLevel.debug));
     properties.add(DiagnosticsProperty<ElevatedButtonThemeData>('elevatedButtonTheme', elevatedButtonTheme, defaultValue: defaultData.elevatedButtonTheme, level: DiagnosticLevel.debug));
     properties.add(DiagnosticsProperty<OutlinedButtonThemeData>('outlinedButtonTheme', outlinedButtonTheme, defaultValue: defaultData.outlinedButtonTheme, level: DiagnosticLevel.debug));
+    properties.add(DiagnosticsProperty<DataTableThemeData>('dataTableTheme', dataTableTheme, defaultValue: defaultData.dataTableTheme, level: DiagnosticLevel.debug));
   }
 }
 

packages/flutter/test/material/data_table_test.dart

@@ -177,6 +177,10 @@ void main() {
       MaterialApp(
         home: Material(
           child: DataTable(
+            headingTextStyle: const TextStyle(
+              fontSize: 14.0,
+              letterSpacing: 0.0, // Will overflow if letter spacing is larger than 0.0.
+            ),
             columns: <DataColumn>[
               DataColumn(
                 label: Text('X' * 2000),
@@ -195,6 +199,7 @@ void main() {
         ),
       ),
     );
+
     expect(tester.renderObject<RenderBox>(find.byType(Text).first).size.width, greaterThan(800.0));
     expect(tester.renderObject<RenderBox>(find.byType(Row).first).size.width, greaterThan(800.0));
     expect(tester.takeException(), isNull); // column overflows table, but text doesn't overflow cell
@@ -692,7 +697,7 @@ void main() {
     );
 
     // custom first column padding
-    padding = find.widgetWithText(Padding, 'Frozen yogurt');
+    padding = find.widgetWithText(Padding, 'Frozen yogurt').first;
     cellContent = find.widgetWithText(Align, 'Frozen yogurt'); // DataTable wraps its DataCells in an Align widget
     expect(
       tester.getRect(cellContent).left - tester.getRect(padding).left,
@@ -952,9 +957,9 @@ void main() {
     );
 
     Table table = tester.widget(find.byType(Table));
-    TableRow tableRow = table.children.first;
+    TableRow tableRow = table.children.last;
     BoxDecoration boxDecoration = tableRow.decoration as BoxDecoration;
-    expect(boxDecoration.border.bottom.width, 1.0);
+    expect(boxDecoration.border.top.width, 1.0);
 
     const double thickness =  4.2;
     await tester.pumpWidget(
@@ -969,9 +974,58 @@ void main() {
       ),
     );
     table = tester.widget(find.byType(Table));
-    tableRow = table.children.first;
+    tableRow = table.children.last;
+    boxDecoration = tableRow.decoration as BoxDecoration;
+    expect(boxDecoration.border.top.width, thickness);
+  });
+
+  testWidgets('DataTable set show bottom border', (WidgetTester tester) async {
+    const List<DataColumn> columns = <DataColumn>[
+      DataColumn(label: Text('column1')),
+      DataColumn(label: Text('column2')),
+    ];
+
+    const List<DataCell> cells = <DataCell>[
+      DataCell(Text('cell1')),
+      DataCell(Text('cell2')),
+    ];
+
+    const List<DataRow> rows = <DataRow>[
+      DataRow(cells: cells),
+      DataRow(cells: cells),
+    ];
+
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Material(
+          child: DataTable(
+            showBottomBorder: true,
+            columns: columns,
+            rows: rows,
+          ),
+        ),
+      ),
+    );
+
+    Table table = tester.widget(find.byType(Table));
+    TableRow tableRow = table.children.last;
+    BoxDecoration boxDecoration = tableRow.decoration as BoxDecoration;
+    expect(boxDecoration.border.bottom.width, 1.0);
+
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Material(
+          child: DataTable(
+            columns: columns,
+            rows: rows,
+          ),
+        ),
+      ),
+    );
+    table = tester.widget(find.byType(Table));
+    tableRow = table.children.last;
     boxDecoration = tableRow.decoration as BoxDecoration;
-    expect(boxDecoration.border.bottom.width, thickness);
+    expect(boxDecoration.border.bottom.width, 0.0);
   });
 
   testWidgets('DataTable column heading cell - with and without sorting', (WidgetTester tester) async {
@@ -1225,7 +1279,7 @@ void main() {
     final TestGesture gesture = await tester.startGesture(tester.getCenter(find.text('Content1')));
     await tester.pump(const Duration(milliseconds: 200)); // splash is well underway
     final RenderBox box = Material.of(tester.element(find.byType(InkWell))) as RenderBox;
-    expect(box, paints..circle(x: 64.0, y: 24.0, color: pressedColor));
+    expect(box, paints..circle(x: 68.0, y: 24.0, color: pressedColor));
     await gesture.up();
   });
 }

packages/flutter/test/material/theme_data_test.dart

@@ -288,6 +288,7 @@ void main() {
       elevatedButtonTheme: ElevatedButtonThemeData(style: ElevatedButton.styleFrom(primary: Colors.green)),
       outlinedButtonTheme: OutlinedButtonThemeData(style: OutlinedButton.styleFrom(primary: Colors.blue)),
       textSelectionTheme: const TextSelectionThemeData(cursorColor: Colors.black),
+      dataTableTheme: const DataTableThemeData(),
       fixTextFieldOutlineLabel: false,
       useTextSelectionTheme: false,
     );
@@ -376,6 +377,7 @@ void main() {
       elevatedButtonTheme: const ElevatedButtonThemeData(),
       outlinedButtonTheme: const OutlinedButtonThemeData(),
       textSelectionTheme: const TextSelectionThemeData(cursorColor: Colors.white),
+      dataTableTheme: const DataTableThemeData(),
       fixTextFieldOutlineLabel: true,
       useTextSelectionTheme: true,
     );