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.

Usage:

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.

Code:

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);

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

class MyTimePickerRouteState extends State {

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

  @override
  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
          Container(
            alignment: Alignment.center,
            width: double.infinity,
            height: 45,
            color: Colors.grey[300],
            child:
            Text("$time"),
          ),

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

        ],
      ),
    );
  }

  // Function to show the modal bottom sheet containing the Cupertino time picker
  void _showDatePicker() {
    showModalBottomSheet(
      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
              Expanded(
                child: CupertinoDatePicker(
                  mode: CupertinoDatePickerMode.time,
                  initialDateTime: DateTime.now(),
                  onDateTimeChanged: (newTime) {
                    setState(() {
                      _selectedTime = newTime;
                      time = "${_selectedTime.hour} : ${_selectedTime.minute}";
                    });
                  },
                ),
              ),

              // Close button
              ElevatedButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: const Text('Close'),
              ),

            ],
          ),
        );
      },
    );
  }

}

..

Properties:

• 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,