Flutter中如何设置showDatePicker默认先显示年份选择界面？

Nice question! The default showDatePicker in Flutter doesn't expose a direct parameter to jump straight to the year selection view, but there are a couple of solid ways to pull this off—one using a workaround with the native widget, and another using a reliable third-party package. Let's break them down:

Workaround with Native Flutter DatePicker #

Flutter's underlying _DatePickerState has a private method _handleYearPressed() that triggers the switch to the year view. We can tap into this state using a GlobalKey and post-frame callback:

1. First, declare a GlobalKey to track the DatePicker's state:

   final GlobalKey<State<StatefulWidget>> _datePickerKey = GlobalKey();
   

2. Create a function to show the date picker, wrapping it in a StatefulBuilder to assign the key:

   Future<void> _openYearFirstDatePicker() async {
     await showDatePicker(
       context: context,
       initialDate: DateTime.now(),
       firstDate: DateTime(1900),
       lastDate: DateTime(2100),
       builder: (context, child) {
         return StatefulBuilder(
           key: _datePickerKey,
           builder: (context, setState) => child!,
         );
       },
     );
   
     // Trigger the year view switch after the dialog is built
     WidgetsBinding.instance.addPostFrameCallback((_) {
       final datePickerState = _datePickerKey.currentState;
       if (datePickerState != null) {
         // Call the private method to switch to year view
         datePickerState.invokeMethod('_handleYearPressed');
       }
     });
   }
   

Important Note #

This workaround relies on a private internal method of Flutter's DatePicker. While it works in most current Flutter versions, it could break if Flutter's internal implementation changes in future updates. Use this only if you can't add third-party dependencies.

Using a Third-Party Package (Recommended) #

For a more stable, future-proof solution, use a package like flutter_date_pickers which explicitly supports setting the initial view to year selection.

1. Add the package to your pubspec.yaml:

   dependencies:
     flutter_date_pickers: ^2.0.0 # Check for the latest version
   

2. Import the package and use the date picker dialog with DatePickerType.year:

   import 'package:flutter_date_pickers/flutter_date_pickers.dart';
   
   Future<void> _openYearFirstDatePicker() async {
     final selectedDate = await showDatePickerDialog(
       context: context,
       initialDate: DateTime.now(),
       firstDate: DateTime(1900),
       lastDate: DateTime(2100),
       datePickerType: DatePickerType.year, // Opens directly to year view
     );
   
     // Handle the selected date here
     if (selectedDate != null) {
       print('Selected date: $selectedDate');
     }
   }
   

This method is safer because it uses the package's public API, which is maintained and less likely to break with Flutter updates.

内容的提问来源于stack exchange，提问作者Taufik Nur Rahmanda