Unverified Commit 7668f06f authored by Per Classon's avatar Per Classon Committed by GitHub

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

parent b93f71f9
...@@ -689,12 +689,9 @@ class DataTable extends StatelessWidget { ...@@ -689,12 +689,9 @@ class DataTable extends StatelessWidget {
static const double _dividerThickness = 1.0; static const double _dividerThickness = 1.0;
static const Duration _sortArrowAnimationDuration = Duration(milliseconds: 150); 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({ Widget _buildCheckbox({
required BuildContext context, required BuildContext context,
required Color activeColor,
required bool? checked, required bool? checked,
required VoidCallback? onRowTap, required VoidCallback? onRowTap,
required ValueChanged<bool?>? onCheckboxChanged, required ValueChanged<bool?>? onCheckboxChanged,
...@@ -714,7 +711,9 @@ class DataTable extends StatelessWidget { ...@@ -714,7 +711,9 @@ class DataTable extends StatelessWidget {
), ),
child: Center( child: Center(
child: Checkbox( 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, value: checked,
onChanged: onCheckboxChanged, onChanged: onCheckboxChanged,
tristate: tristate, tristate: tristate,
...@@ -862,13 +861,8 @@ class DataTable extends StatelessWidget { ...@@ -862,13 +861,8 @@ class DataTable extends StatelessWidget {
?? theme.dataTableTheme.dataRowColor; ?? theme.dataTableTheme.dataRowColor;
final MaterialStateProperty<Color?> defaultRowColor = MaterialStateProperty.resolveWith( final MaterialStateProperty<Color?> defaultRowColor = MaterialStateProperty.resolveWith(
(Set<MaterialState> states) { (Set<MaterialState> states) {
if (states.contains(MaterialState.selected)) { if (states.contains(MaterialState.selected))
// The color has to be transparent so you can see the ink on return theme.colorScheme.primary.withOpacity(0.08);
// 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;
}
return null; return null;
}, },
); );
...@@ -928,7 +922,6 @@ class DataTable extends StatelessWidget { ...@@ -928,7 +922,6 @@ class DataTable extends StatelessWidget {
tableColumns[0] = FixedColumnWidth(effectiveHorizontalMargin + Checkbox.width + effectiveHorizontalMargin / 2.0); tableColumns[0] = FixedColumnWidth(effectiveHorizontalMargin + Checkbox.width + effectiveHorizontalMargin / 2.0);
tableRows[0].children![0] = _buildCheckbox( tableRows[0].children![0] = _buildCheckbox(
context: context, context: context,
activeColor: theme.accentColor,
checked: someChecked ? null : allChecked, checked: someChecked ? null : allChecked,
onRowTap: null, onRowTap: null,
onCheckboxChanged: (bool? checked) => _handleSelectAll(checked, someChecked), onCheckboxChanged: (bool? checked) => _handleSelectAll(checked, someChecked),
...@@ -939,7 +932,6 @@ class DataTable extends StatelessWidget { ...@@ -939,7 +932,6 @@ class DataTable extends StatelessWidget {
for (final DataRow row in rows) { for (final DataRow row in rows) {
tableRows[rowIndex].children![0] = _buildCheckbox( tableRows[rowIndex].children![0] = _buildCheckbox(
context: context, context: context,
activeColor: theme.accentColor,
checked: row.selected, checked: row.selected,
onRowTap: () => row.onSelectChanged != null ? row.onSelectChanged!(!row.selected) : null , onRowTap: () => row.onSelectChanged != null ? row.onSelectChanged!(!row.selected) : null ,
onCheckboxChanged: row.onSelectChanged, onCheckboxChanged: row.onSelectChanged,
......
...@@ -1190,6 +1190,82 @@ void main() { ...@@ -1190,6 +1190,82 @@ void main() {
await tester.pumpAndSettle(const Duration(seconds: 1)); 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 { testWidgets('DataRow renders custom colors when selected', (WidgetTester tester) async {
const Color selectedColor = Colors.green; const Color selectedColor = Colors.green;
const Color defaultColor = Colors.red; const Color defaultColor = Colors.red;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment