firka/flutter
firka/flutter
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Material] Use primary color for selected rows and checkboxes in DataTable (#67919)

Browse Source
This commit is contained in:
Per Classon 2020-10-12 19:17:03 +02:00 committed by GitHub
parent b93f71f9c8
commit 7668f06ffe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 81 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/flutter/lib/src/material/data_table.dart
View File

@ -689,12 +689,9 @@ class DataTable extends StatelessWidget {
static const double _dividerThickness = 1.0;
static const Duration _sortArrowAnimationDuration = Duration(milliseconds: 150);
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.
Widget _buildCheckbox({
required BuildContext context,
required Color activeColor,
required bool? checked,
required VoidCallback? onRowTap,
required ValueChanged<bool?>? onCheckboxChanged,
@ -714,7 +711,9 @@ class DataTable extends StatelessWidget {
),
child: Center(
child: Checkbox(
activeColor: activeColor,
// TODO(per): Remove when Checkbox has theme, https://github.com/flutter/flutter/issues/53420.
activeColor: themeData.colorScheme.primary,
checkColor: themeData.colorScheme.onPrimary,
value: checked,
onChanged: onCheckboxChanged,
tristate: tristate,
@ -862,13 +861,8 @@ class DataTable extends StatelessWidget {
?? theme.dataTableTheme.dataRowColor;
final MaterialStateProperty<Color?> defaultRowColor = MaterialStateProperty.resolveWith(
(Set<MaterialState> states) {
if (states.contains(MaterialState.selected)) {
// The color has to be transparent so you can see the ink on
// the [Material].
// TODO(perclasson): Align with Material specs, use translucent primary color: https://github.com/flutter/flutter/issues/64314.
return (Theme.of(context)!.brightness == Brightness.light) ?
_grey100Opacity : _grey300Opacity;
}
if (states.contains(MaterialState.selected))
return theme.colorScheme.primary.withOpacity(0.08);
return null;
},
);
@ -928,7 +922,6 @@ class DataTable extends StatelessWidget {
tableColumns[0] = FixedColumnWidth(effectiveHorizontalMargin + Checkbox.width + effectiveHorizontalMargin / 2.0);
tableRows[0].children![0] = _buildCheckbox(
context: context,
activeColor: theme.accentColor,
checked: someChecked ? null : allChecked,
onRowTap: null,
onCheckboxChanged: (bool? checked) => _handleSelectAll(checked, someChecked),
@ -939,7 +932,6 @@ class DataTable extends StatelessWidget {
for (final DataRow row in rows) {
tableRows[rowIndex].children![0] = _buildCheckbox(
context: context,
activeColor: theme.accentColor,
checked: row.selected,
onRowTap: () => row.onSelectChanged != null ? row.onSelectChanged!(!row.selected) : null ,
onCheckboxChanged: row.onSelectChanged,

76
packages/flutter/test/material/data_table_test.dart
View File

@ -1190,6 +1190,82 @@ void main() {
await tester.pumpAndSettle(const Duration(seconds: 1));
});
testWidgets('DataRow renders default selected row colors', (WidgetTester tester) async {
final ThemeData _themeData = ThemeData.light();
Widget buildTable({bool selected = false}) {
return MaterialApp(
theme: _themeData,
home: Material(
child: DataTable(
columns: const <DataColumn>[
DataColumn(
label: Text('Column1'),
),
],
rows: <DataRow>[
DataRow(
onSelectChanged: (bool? checked) {},
selected: selected,
cells: const <DataCell>[
DataCell(Text('Content1')),
],
),
],
),
),
);
}
BoxDecoration lastTableRowBoxDecoration() {
final Table table = tester.widget(find.byType(Table));
final TableRow tableRow = table.children.last;
return tableRow.decoration! as BoxDecoration;
}
await tester.pumpWidget(buildTable(selected: false));
expect(lastTableRowBoxDecoration().color, null);
await tester.pumpWidget(buildTable(selected: true));
expect(
lastTableRowBoxDecoration().color,
_themeData.colorScheme.primary.withOpacity(0.08),
);
});
testWidgets('DataRow renders checkbox with colors from Theme', (WidgetTester tester) async {
final ThemeData _themeData = ThemeData.light();
Widget buildTable() {
return MaterialApp(
theme: _themeData,
home: Material(
child: DataTable(
columns: const <DataColumn>[
DataColumn(
label: Text('Column1'),
),
],
rows: <DataRow>[
DataRow(
onSelectChanged: (bool? checked) {},
cells: const <DataCell>[
DataCell(Text('Content1')),
],
),
],
),
),
);
}
Checkbox lastCheckbox() {
return tester.widgetList<Checkbox>(find.byType(Checkbox)).last;
}
await tester.pumpWidget(buildTable());
expect(lastCheckbox().activeColor, _themeData.colorScheme.primary);
expect(lastCheckbox().checkColor, _themeData.colorScheme.onPrimary);
});
testWidgets('DataRow renders custom colors when selected', (WidgetTester tester) async {
const Color selectedColor = Colors.green;
const Color defaultColor = Colors.red;