Flutter Cupertino Date & Time Picker

This code implements a simple Flutter app that displays a date & time picker using Cupertino-style components. The user can select a date and time, and the selected value is displayed in a text widget.

Usage:

To use this code, simply copy and paste it into a new Flutter project. Then, import the necessary packages and run the app. When the "PICK DATE & TIME" button is pressed, a dialog will appear containing the date & time picker.

Code:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class MyDateTimePickerRoute extends StatefulWidget {

  const MyDateTimePickerRoute({Key? key}) : super(key: key);

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

class MyDateTimePickerRouteState extends State {
  String time = "-";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // Add a spacer to create some blank space at the top of the screen
          const Spacer(flex: 10),

          // Create a container to display the selected time
          Container(
            alignment: Alignment.center,
            width: double.infinity,
            height: 45,
            color: Colors.grey[300],
            child: Text(time),
          ),

          // Add a button to open the date & time picker
          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 & TIME", style: TextStyle(color: Colors.white)),
              // Display a CupertinoDatePicker in dateTime picker mode.
              onPressed: () => _showDialog(
                CupertinoDatePicker(
                  initialDateTime: dateTime,
                  use24hFormat: true,
                  // This is called when the user changes the dateTime.
                  onDateTimeChanged: (DateTime newDateTime) {
                    setState(() => {
                      time = "$newDateTime"
                    });
                  },
                ),
              ),
            ),
          ),

        ],
      ),
    );
  }

  // Set an initial date and time for the picker
  DateTime dateTime = DateTime(2016, 8, 3, 17, 45);

  // This function displays a CupertinoModalPopup with a reasonable fixed height
  // which hosts CupertinoDatePicker.
  void _showDialog(Widget child) {
    showCupertinoModalPopup(
        context: context,
        builder: (BuildContext context) => Container(
          height: 216,
          padding: const EdgeInsets.only(top: 6.0),
          // The Bottom margin is provided to align the popup above the system
          // navigation bar.
          margin: EdgeInsets.only(
            bottom: MediaQuery.of(context).viewInsets.bottom,
          ),
          // Provide a background color for the popup.
          color: CupertinoColors.systemBackground.resolveFrom(context),
          // Use a SafeArea widget to avoid system overlaps.
          child: SafeArea(
            top: false,
            child: child,
          ),
        ));
  }

}

..

Properties:

• MyDateTimePickerRoute: A stateful widget that creates the date & time picker screen.
• time: A string that stores the selected time.
• build: A function that builds the widget tree for the screen.
• Spacer: A widget that creates blank space between components.
• dateTime: A DateTime variable that holds the initial date and time value for the picker.
• _showDialog(): A function that displays a Cupertino-style popup dialog containing a CupertinoDatePicker widget for selecting a date and time.