firka/flutter
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Date picker overlay colors aren't applied on selected state (#159203)

Browse Source 
## Description

This PR fixes the DatePicker overlay colors for the selected days.
Before this PR, overlays were obscured by the selected day backgound.
This fix simply replaces a DecoratedBox with an Ink to make the overlays
visible.
Combined with https://github.com/flutter/flutter/pull/159072 which fixes
InkWell overlay color resolution related to the selected state, this PR
fixes [Date picker overlay colors aren't applied on
MaterialState.selected
state](https://github.com/flutter/flutter/issues/130586).

Before, no overlay visible for the selected day when hovered, focused,
or pressed:


https://github.com/user-attachments/assets/944d5035-68b2-40da-b606-3e8795229767

After, overlay is visible for the selected day when hovered, focused, or
pressed (color change is slight as defined with M3 defaults):


https://github.com/user-attachments/assets/2627955b-f45a-465f-8eb0-21955ccd8c3e


## Related Issue

Fixes [Date picker overlay colors aren't applied on
MaterialState.selected
state](https://github.com/flutter/flutter/issues/130586).

## Tests

Adds 12 tests.
Updates several existing tests (those tests were looking for a
`DecoratedBox`, make them look for an `Ink`).
This commit is contained in:
Bruno Leroux
2024-11-25 14:09:32 +01:00
committed by GitHub
parent a0c3060c68
commit 8509d78734
5 changed files with 365 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
examples/api/test/material/date_picker/date_picker_theme_day_shape.0_test.dart
View File

@@ -14,6 +14,15 @@ void main() {
const Color todayForegroundColor = Colors.black;
const BorderSide todayBorder = BorderSide(width: 2);
ShapeDecoration? findDayDecoration(WidgetTester tester, String day) {
return tester.widget<Ink>(
find.ancestor(
of: find.text(day),
matching: find.byType(Ink)
),
).decoration as ShapeDecoration?;
}
await tester.pumpWidget(
const example.DatePickerApp(),
);
@@ -21,21 +30,13 @@ void main() {
await tester.tap(find.text('Open Date Picker'));
await tester.pumpAndSettle();
ShapeDecoration dayShapeDecoration = tester.widget<DecoratedBox>(find.ancestor(
of: find.text('15'),
matching: find.byType(DecoratedBox),
)).decoration as ShapeDecoration;
// Test the current day shape decoration.
ShapeDecoration dayShapeDecoration = findDayDecoration(tester, '15')!;
expect(dayShapeDecoration.color, todayBackgroundColor);
expect(dayShapeDecoration.shape, dayShape.copyWith(side: todayBorder.copyWith(color: todayForegroundColor)));
dayShapeDecoration = tester.widget<DecoratedBox>(find.ancestor(
of: find.text('20'),
matching: find.byType(DecoratedBox),
)).decoration as ShapeDecoration;
// Test the selected day shape decoration.
dayShapeDecoration = findDayDecoration(tester, '20')!;
expect(dayShapeDecoration.color, theme.colorScheme.primary);
expect(dayShapeDecoration.shape, dayShape);
@@ -43,12 +44,8 @@ void main() {
await tester.tap(find.text('15'));
await tester.pumpAndSettle();
dayShapeDecoration = tester.widget<DecoratedBox>(find.ancestor(
of: find.text('15'),
matching: find.byType(DecoratedBox),
)).decoration as ShapeDecoration;
// Test the selected day shape decoration.
dayShapeDecoration = findDayDecoration(tester, '15')!;
expect(dayShapeDecoration.color, todayBackgroundColor);
expect(dayShapeDecoration.shape, dayShape.copyWith(side: todayBorder.copyWith(color: todayForegroundColor)));
});