Skip to content

[YearPicker] Hover/Splash goes out of clipped bounds #155198

Description

@sabin26

Steps to reproduce

  1. Run the code sample for DatePicker
  2. Go to change year
  3. 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

Screenshots / Video demonstration

bug1
bug2

Logs

Logs
[Paste your logs here]

Flutter Doctor output

Doctor output
[Paste your output here]

Activity

  1. darshankawar commented on Sep 16, 2024

    @darshankawar
    Member

    @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
  2. added
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Sep 16, 2024
  3. sabin26 commented on Sep 16, 2024

    @sabin26
    ContributorAuthor

    I tried it on dartpad included in the flutter docs page for showDatePicker

    Platform: Windows 10

  4. removed
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Sep 16, 2024
  5. sabin26 commented on Sep 16, 2024

    @sabin26
    ContributorAuthor

    Make sure the year to be selected is partially visible and not fully visible.

    Screen_Recording_20240916_134926_Chrome.mp4
  6. darshankawar commented on Sep 17, 2024

    @darshankawar
    Member

    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:

     firstDate: DateTime(2017),
     lastDate: DateTime(2030),
    
    Screenshot 2024-09-17 at 11 12 58 AM
    Stable : 3.24.3
    Master : 3.26.0-1.0.pre.129
    
  7. added
    frameworkflutter/packages/flutter repository. See also f: labels.
    p: material_uimaterial_ui package in flutter/packages
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    team-designOwned by Design Languages team
    and removed
    in triagePresently being triaged by the triage team
    on Sep 17, 2024
  8. 2 remaining items

  9. self-assigned this
    on Oct 14, 2025
  10. moved this from To do to In progress in Nevercodeon Oct 14, 2025
  11. moved this from In progress to PR submitted in Nevercodeon Oct 14, 2025
  12. moved this from PR submitted to Done (PR merged) in Nevercodeon Oct 20, 2025
  13. added
    r: fixedIssue is closed as already fixed in a newer version
    on Oct 21, 2025
  14. github-actions commented on Nov 4, 2025

    @github-actions

    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 -v and a minimal reproduction of the issue.

  15. locked as resolved and limited conversation to collaborators on Nov 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work listf: date/time pickerDate or time picker widgetsfound in release: 3.24Found to occur in 3.24found in release: 3.26Found to occur in 3.26frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

  • Status
    Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions