Material DataTable: added support of setting table row border thickness (#49692)

This commit is contained in:
Dmitry Ratushnyy 2020-02-25 02:46:03 +09:00 committed by GitHub
parent 92a028cf6d
commit a70e4aec93
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 62 additions and 2 deletions

View file

@ -331,6 +331,7 @@ class DataTable extends StatelessWidget {
this.horizontalMargin = 24.0,
this.columnSpacing = 56.0,
this.showCheckboxColumn = true,
this.dividerThickness = 1.0,
@required this.rows,
}) : assert(columns != null),
assert(columns.isNotEmpty),
@ -343,6 +344,7 @@ class DataTable extends StatelessWidget {
assert(showCheckboxColumn != null),
assert(rows != null),
assert(!rows.any((DataRow row) => row.cells.length != columns.length)),
assert(dividerThickness != null && dividerThickness >= 0),
_onlyTextColumn = _initOnlyTextColumn(columns),
super(key: key);
@ -467,6 +469,12 @@ class DataTable extends StatelessWidget {
static const Color _grey100Opacity = Color(0x0A000000); // Grey 100 as opacity instead of solid color
static const Color _grey300Opacity = Color(0x1E000000); // Dark theme variant is just a guess.
/// The width of the divider that appears between [TableRow]s.
///
/// Must be non-null and greater than or equal to zero.
/// This value defaults to 1.0.
final double dividerThickness;
Widget _buildCheckbox({
Color color,
bool checked,
@ -613,12 +621,12 @@ class DataTable extends StatelessWidget {
final ThemeData theme = Theme.of(context);
final BoxDecoration _kSelectedDecoration = BoxDecoration(
border: Border(bottom: Divider.createBorderSide(context, width: 1.0)),
border: Border(bottom: Divider.createBorderSide(context, width: dividerThickness)),
// The backgroundColor has to be transparent so you can see the ink on the material
color: (Theme.of(context).brightness == Brightness.light) ? _grey100Opacity : _grey300Opacity,
);
final BoxDecoration _kUnselectedDecoration = BoxDecoration(
border: Border(bottom: Divider.createBorderSide(context, width: 1.0)),
border: Border(bottom: Divider.createBorderSide(context, width: dividerThickness)),
);
final bool displayCheckboxColumn = showCheckboxColumn && rows.any((DataRow row) => row.onSelectChanged != null);

View file

@ -866,4 +866,56 @@ void main() {
_customHorizontalMargin,
);
});
testWidgets('DataTable set border width test', (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),
];
// no thickness provided - border should be default: i.e "1.0" as it
// set in DataTable constructor
await tester.pumpWidget(
MaterialApp(
home: Material(
child: DataTable(
columns: columns,
rows: rows,
),
),
),
);
Table table = tester.widget(find.byType(Table));
TableRow tableRow = table.children.first;
BoxDecoration boxDecoration = tableRow.decoration as BoxDecoration;
expect(boxDecoration.border.bottom.width, 1.0);
const double thickness = 4.2;
await tester.pumpWidget(
MaterialApp(
home: Material(
child: DataTable(
dividerThickness: thickness,
columns: columns,
rows: rows,
),
),
),
);
table = tester.widget(find.byType(Table));
tableRow = table.children.first;
boxDecoration = tableRow.decoration as BoxDecoration;
expect(boxDecoration.border.bottom.width, thickness);
});
}