Skip to content

Commit 8509d78

Browse files
authored
Fix Date picker overlay colors aren't applied on selected state (flutter#159203)
## 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 flutter#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](flutter#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](flutter#130586). ## Tests Adds 12 tests. Updates several existing tests (those tests were looking for a `DecoratedBox`, make them look for an `Ink`).
1 parent a0c3060 commit 8509d78

File tree

5 files changed

+364
-53
lines changed

5 files changed

+364
-53
lines changed

examples/api/test/material/date_picker/date_picker_theme_day_shape.0_test.dart

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,41 +14,38 @@ void main() {
1414
const Color todayForegroundColor = Colors.black;
1515
const BorderSide todayBorder = BorderSide(width: 2);
1616

17+
ShapeDecoration? findDayDecoration(WidgetTester tester, String day) {
18+
return tester.widget<Ink>(
19+
find.ancestor(
20+
of: find.text(day),
21+
matching: find.byType(Ink)
22+
),
23+
).decoration as ShapeDecoration?;
24+
}
25+
1726
await tester.pumpWidget(
1827
const example.DatePickerApp(),
1928
);
2029

2130
await tester.tap(find.text('Open Date Picker'));
2231
await tester.pumpAndSettle();
2332

24-
ShapeDecoration dayShapeDecoration = tester.widget<DecoratedBox>(find.ancestor(
25-
of: find.text('15'),
26-
matching: find.byType(DecoratedBox),
27-
)).decoration as ShapeDecoration;
28-
2933
// Test the current day shape decoration.
34+
ShapeDecoration dayShapeDecoration = findDayDecoration(tester, '15')!;
3035
expect(dayShapeDecoration.color, todayBackgroundColor);
3136
expect(dayShapeDecoration.shape, dayShape.copyWith(side: todayBorder.copyWith(color: todayForegroundColor)));
3237

33-
dayShapeDecoration = tester.widget<DecoratedBox>(find.ancestor(
34-
of: find.text('20'),
35-
matching: find.byType(DecoratedBox),
36-
)).decoration as ShapeDecoration;
37-
3838
// Test the selected day shape decoration.
39+
dayShapeDecoration = findDayDecoration(tester, '20')!;
3940
expect(dayShapeDecoration.color, theme.colorScheme.primary);
4041
expect(dayShapeDecoration.shape, dayShape);
4142

4243
// Tap to select current day as the selected day.
4344
await tester.tap(find.text('15'));
4445
await tester.pumpAndSettle();
4546

46-
dayShapeDecoration = tester.widget<DecoratedBox>(find.ancestor(
47-
of: find.text('15'),
48-
matching: find.byType(DecoratedBox),
49-
)).decoration as ShapeDecoration;
50-
5147
// Test the selected day shape decoration.
48+
dayShapeDecoration = findDayDecoration(tester, '15')!;
5249
expect(dayShapeDecoration.color, todayBackgroundColor);
5350
expect(dayShapeDecoration.shape, dayShape.copyWith(side: todayBorder.copyWith(color: todayForegroundColor)));
5451
});

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import 'debug.dart';
2020
import 'divider.dart';
2121
import 'icon_button.dart';
2222
import 'icons.dart';
23+
import 'ink_decoration.dart';
2324
import 'ink_well.dart';
2425
import 'material_localizations.dart';
2526
import 'material_state.dart';
@@ -1056,7 +1057,7 @@ class _Day extends StatefulWidget {
10561057
final bool isSelectedDay;
10571058
final bool isToday;
10581059
final ValueChanged<DateTime> onChanged;
1059-
final FocusNode? focusNode;
1060+
final FocusNode focusNode;
10601061

10611062
@override
10621063
State<_Day> createState() => _DayState();
@@ -1111,7 +1112,7 @@ class _DayState extends State<_Day> {
11111112
shape: dayShape,
11121113
);
11131114

1114-
Widget dayWidget = DecoratedBox(
1115+
Widget dayWidget = Ink(
11151116
decoration: decoration,
11161117
child: Center(
11171118
child: Text(localizations.formatDecimal(widget.day.day), style: dayStyle?.apply(color: dayForegroundColor)),

packages/flutter/test/material/calendar_date_picker_test.dart

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1196,7 +1196,7 @@ void main() {
11961196
await gesture.moveTo(tester.getCenter(find.text('25')));
11971197
await tester.pumpAndSettle();
11981198
inkFeatures = tester.allRenderObjects.firstWhere((RenderObject object) => object.runtimeType.toString() == '_RenderInkFeatures');
1199-
expect(inkFeatures, paints..circle(radius: 35.0, color: theme.colorScheme.onSurfaceVariant.withOpacity(0.08)));
1199+
expect(inkFeatures, paints..circle()..circle(radius: 35.0, color: theme.colorScheme.onSurfaceVariant.withOpacity(0.08)));
12001200
expect(inkFeatures, paintsExactlyCountTimes(#clipPath, 1));
12011201

12021202
final Rect expectedClipRect = Rect.fromCircle(center: const Offset(400.0, 241.0), radius: 35.0);

0 commit comments

Comments
 (0)