Flutter Cupertino Time Picker

This Flutter code demonstrates how to implement a Cupertino time picker using the showModalBottomSheet widget. The time picker is displayed in a modal bottom sheet when the user taps the "PICK TIME" button. The selected time is displayed in a container above the button.


This code can be used as a starting point for implementing a Cupertino time picker in a Flutter app. The code can be customized to suit the app's specific requirements.


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

class MyTimePickerRoute extends StatefulWidget {

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

  MyTimePickerRouteState createState() => MyTimePickerRouteState();

class MyTimePickerRouteState extends State {

  // Define initial time value
  DateTime _selectedTime = DateTime.now();
  String time = "-";

  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [

          // Add spacer widget to push container to the bottom
          const Spacer(flex: 10),

          // Display selected time in a container
            alignment: Alignment.center,
            width: double.infinity,
            height: 45,
            color: Colors.grey[300],

          // Button to open time picker
            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 TIME", style: TextStyle(color: Colors.white)),
              onPressed: (){


  // Function to show the modal bottom sheet containing the Cupertino time picker
  void _showDatePicker() {
      context: context,
      builder: (BuildContext builder) {

        // Create the modal bottom sheet widget containing the time picker and close button
        return SizedBox(
          height: MediaQuery.of(context).copyWith().size.height / 3,
          child: Column(
            children: [

              // Time picker
                child: CupertinoDatePicker(
                  mode: CupertinoDatePickerMode.time,
                  initialDateTime: DateTime.now(),
                  onDateTimeChanged: (newTime) {
                    setState(() {
                      _selectedTime = newTime;
                      time = "${_selectedTime.hour} : ${_selectedTime.minute}";

              // Close button
                onPressed: () {
                child: const Text('Close'),





  • MyTimePickerRoute: A StatefulWidget that creates the time picker widget.
  • _selectedTime: A DateTime variable that holds the selected time.
  • time: A String variable that displays the selected time in the container.
  • build: A method that builds the time picker widget.
  • _showDatePicker: A method that displays the modal bottom sheet with the time picker.
Flutter Widgets,