Flutter Cupertino Date Picker

This tutorial teaches you how to add a Cupertino date picker to your Flutter app using the CupertinoDatePicker widget. The date picker is designed to match the look and feel of iOS and offers an easy and intuitive way for users to select a date.

Usage:

The Cupertino date picker is useful in situations where you want to offer a familiar and consistent date selection experience to iOS users. It can be used in various scenarios such as booking appointments, setting reminders, or scheduling events.

Code:

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_courses/utils.dart';

class MyDatePickerRoute extends StatefulWidget {

  const MyDatePickerRoute({super.key});

  @override
  MyDatePickerRouteState createState() => MyDatePickerRouteState();
}

class MyDatePickerRouteState extends State {

  // Define initial date value
  DateTime _selectedDate = DateTime.now();
  String date = "-";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // backgroundColor: Colors.white,
      body: Column(
        children: [

          const Spacer(flex: 10),

          Container(
            alignment: Alignment.center,
            width: double.infinity,
            height: 45,
            color: Colors.grey[300],
            child:
            Text("$date"),
          ),

          Align(
            alignment: Alignment.center,
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                  elevation: 0, backgroundColor: Theme.of(context).colorScheme.primary,
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
                  padding: const EdgeInsets.symmetric(horizontal: 30)
              ),
              child: const Text("PICK DATE", style: TextStyle(color: Colors.white)),
              onPressed: (){
                _showDatePicker(); // call function to show date picker
              },
            ),
          ),

        ],
      ),
    );
  }

  // function to show date picker
  void _showDatePicker() {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext builder) {
        return Container(
          height: MediaQuery.of(context).copyWith().size.height / 3,
          child: Column(
            children: [
              Expanded(
                child: CupertinoDatePicker(
                  mode: CupertinoDatePickerMode.date, // set mode to date
                  initialDateTime: _selectedDate, // set initial date
                  onDateTimeChanged: (newDate) {
                    setState(() {
                      _selectedDate = newDate;
                      date = Utils.getFormattedDateSimple(
                          newDate.millisecondsSinceEpoch); // format selected date and update UI
                    });
                  },
                ),
              ),
              ElevatedButton(
                onPressed: () {
                  Navigator.pop(context); // close date picker
                },
                child: const Text('Close'),
              ),
            ],
          ),
        );
      },
    );
  }
}

..

Properties:

• MyDatePickerRoute: A stateful widget that defines the layout and behavior of the date picker screen.
• _selectedDate: A DateTime variable that stores the currently selected date.
• date: A String variable that stores the formatted date string to be displayed on the screen.
• _showDatePicker(): A function that displays the date picker in a modal bottom sheet.
• CupertinoDatePicker: A widget that displays a native-looking date picker with options to choose the year, month, and day.

..

Flutter Widgets,