Use CupertinoDatePicker in Flutter for Year Picking in iOS Style

Flutter provides a rich set of UI components that allow developers to create stunning mobile applications. One such component is the CupertinoDatePicker, which is designed to mimic the iOS-style date picker. In this article, we will explore how to use the CupertinoDatePicker widget in Flutter to enable users to pick a specific year.

To use the CupertinoDatePicker, we need to import the ‘package:flutter/cupertino.dart’ package. Let’s start by creating a new Flutter project and navigating to the main.dart file. Add the following code snippet to import the package:

import 'package:flutter/cupertino.dart';

Next, we can use the CupertinoDatePicker widget within our Flutter application. Let’s create a stateful widget called ‘YearPicker’ and add the CupertinoDatePicker widget to the build method. Here’s an example:

class YearPicker extends StatefulWidget {
  @override
  _YearPickerState createState() => _YearPickerState();
}

class _YearPickerState extends State<YearPicker> {
  late int selectedYear;

  @override
  Widget build(BuildContext context) {
    return CupertinoDatePicker(
      mode: CupertinoDatePickerMode.date,
      initialDateTime: DateTime.now(),
      minimumYear: 1900,
      maximumYear: 2100,
      onDateTimeChanged: (DateTime newDateTime) {
        setState(() {
          selectedYear = newDateTime.year;
        });
      },
    );
  }
}

In the code above, we have defined a stateful widget called ‘YearPicker’ with a ‘selectedYear’ variable to hold the selected year. We have also set the mode to CupertinoDatePickerMode.date to display only the year picker. We have specified the minimum and maximum years as well.

To update the selected year, we use the ‘onDateTimeChanged’ callback function, which is called whenever the user selects a new year. Inside this function, we update the ‘selectedYear’ variable and call ‘setState()’ to trigger a rebuild of the widget.

Now that we have our YearPicker widget, we can use it in our Flutter application. Let’s update the build method of the main.dart file to include the YearPicker widget:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text('Year Picker'),
        ),
        child: Center(
          child: YearPicker(),
        ),
      ),
    );
  }
}

In the code above, we have created a simple MyApp widget that uses the CupertinoApp and CupertinoPageScaffold to create the iOS-themed layout. Inside the CupertinoPageScaffold, we have added a navigation bar and set the title to ‘Year Picker’. The CupertinoDatePicker widget is placed at the center of the screen using the YearPicker widget.

Finally, we can run the application and see the CupertinoDatePicker in action. Open the terminal and navigate to your project directory. Run the following command to start the app:

flutter run

The app will build and launch on the iOS simulator or connected iOS device. You should see the Year Picker screen with the current date pre-selected. Swipe up or down to select a different year, and you will see the selected year being updated accordingly.

In this article, we have learned how to use the CupertinoDatePicker widget in Flutter for year picking. This widget allows us to create an iOS-style experience for our users when selecting a specific year. Feel free to experiment with different configurations and customize the widget to fit your application’s needs.

Happy coding!

This content is ready to be published on a WordPress blog.