Repository navigation
[YearPicker] Hover/Splash goes out of clipped bounds #155198
Copy link
Copy link
Closed
Labels
P2Important issues not at the top of the work listImportant issues not at the top of the work listf: date/time pickerDate or time picker widgetsDate or time picker widgetsfound in release: 3.24Found to occur in 3.24Found to occur in 3.24found in release: 3.26Found to occur in 3.26Found to occur in 3.26frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesmaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamOwned by Design Languages teamtriaged-designTriaged by Design Languages teamTriaged by Design Languages team
Description
Steps to reproduce
- Run the code sample for DatePicker
- Go to change year
- Scroll and hover over the year that is clipped
Expected results
Not sure. I believe it should be clipped
Actual results
The hover goes out of bounds. Screenshots included for clarity.
Code sample
Code sample
import 'package:flutter/material.dart';
/// Flutter code sample for [showDatePicker].
void main() => runApp(const DatePickerApp());
class DatePickerApp extends StatelessWidget {
const DatePickerApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
restorationScopeId: 'app',
home: DatePickerExample(restorationId: 'main'),
);
}
}
class DatePickerExample extends StatefulWidget {
const DatePickerExample({super.key, this.restorationId});
final String? restorationId;
@override
State<DatePickerExample> createState() => _DatePickerExampleState();
}
/// RestorationProperty objects can be used because of RestorationMixin.
class _DatePickerExampleState extends State<DatePickerExample>
with RestorationMixin {
// In this example, the restoration ID for the mixin is passed in through
// the [StatefulWidget]'s constructor.
@override
String? get restorationId => widget.restorationId;
final RestorableDateTime _selectedDate =
RestorableDateTime(DateTime(2021, 7, 25));
late final RestorableRouteFuture<DateTime?> _restorableDatePickerRouteFuture =
RestorableRouteFuture<DateTime?>(
onComplete: _selectDate,
onPresent: (NavigatorState navigator, Object? arguments) {
return navigator.restorablePush(
_datePickerRoute,
arguments: _selectedDate.value.millisecondsSinceEpoch,
);
},
);
@pragma('vm:entry-point')
static Route<DateTime> _datePickerRoute(
BuildContext context,
Object? arguments,
) {
return DialogRoute<DateTime>(
context: context,
builder: (BuildContext context) {
return DatePickerDialog(
restorationId: 'date_picker_dialog',
initialEntryMode: DatePickerEntryMode.calendarOnly,
initialDate: DateTime.fromMillisecondsSinceEpoch(arguments! as int),
firstDate: DateTime(2021),
lastDate: DateTime(2022),
);
},
);
}
@override
void restoreState(RestorationBucket? oldBucket, bool initialRestore) {
registerForRestoration(_selectedDate, 'selected_date');
registerForRestoration(
_restorableDatePickerRouteFuture, 'date_picker_route_future');
}
void _selectDate(DateTime? newSelectedDate) {
if (newSelectedDate != null) {
setState(() {
_selectedDate.value = newSelectedDate;
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text(
'Selected: ${_selectedDate.value.day}/${_selectedDate.value.month}/${_selectedDate.value.year}'),
));
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: OutlinedButton(
onPressed: () {
_restorableDatePickerRouteFuture.present();
},
child: const Text('Open Date Picker'),
),
),
);
}
}
Screenshots or Video
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
[Paste your output here]Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
P2Important issues not at the top of the work listImportant issues not at the top of the work listf: date/time pickerDate or time picker widgetsDate or time picker widgetsfound in release: 3.24Found to occur in 3.24Found to occur in 3.24found in release: 3.26Found to occur in 3.26Found to occur in 3.26frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesmaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamOwned by Design Languages teamtriaged-designTriaged by Design Languages teamTriaged by Design Languages team
Type
Projects
- StatusShow more project fieldsDone (PR merged)
Activity
darshankawar commentedon Sep 16, 2024
@sabin26
What platform are you seeing this behavior on ? Can you also provide
flutter doctor -v?I tried on macOS desktop with latest master version but don't see the reported behavior.
155198.mov
sabin26 commentedon Sep 16, 2024
I tried it on dartpad included in the flutter docs page for showDatePicker
Platform: Windows 10
sabin26 commentedon Sep 16, 2024
Make sure the year to be selected is partially visible and not fully visible.
Screen_Recording_20240916_134926_Chrome.mp4
darshankawar commentedon Sep 17, 2024
Thanks for the update. I was able to replicate the reported behavior on all platforms (mobile, web, desktop). In order to properly replicate using example code, adjust years as below:
2 remaining items
Fix ink features painting in YearPicker. (#177014)
github-actions commentedon Nov 4, 2025
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.Fix ink features painting in YearPicker. (flutter#177014)
Fix ink features painting in YearPicker. (#177014)
Fix ink features painting in YearPicker. (#177014)