Flutter: Issues in using Cupertino DatePicker

Question

I am trying to check the user's device OS and display the Cupertino date picker top iOS users, and Material date picker to android users. Below is my code

Future<void> _selectDate(BuildContext context) async {
    DateTime? picked;

    if (Platform.isIOS) {
      showCupertinoModalPopup(
        context: context,
        builder: (context) {
          return Theme(
            data: ThemeData.dark(),
            child: Container(
              height: 300,
              color: Color.fromARGB(255, 255, 255, 255),
              child: CupertinoDatePicker(
                  mode: CupertinoDatePickerMode.date,
                  initialDateTime: DateTime.now(),
                  onDateTimeChanged: (val) {
                    setState(() {
                      picked = val;
                    });
                  }),
            ), // This will change to light theme.
          );
        },
      );
    } else if (Platform.isAndroid) {
      picked = await showDatePicker(
          context: context,
          initialDate: selectedDate,
          firstDate: DateTime(2015, 8),
          lastDate: DateTime(2101),
          builder: (context, child) {
            return Theme(
                data: ThemeData.dark(), // This will change to light theme.
                child: child!);
          });
    }

    if (picked != null && picked != selectedDate)
      setState(() {
        selectedDate = picked!;
        formattedSelectedDate = picked.toString();
      });
  }

My Android code is working fine. However I have the following issues in my iOS code.

I can't close the popup
This opens as a bottom sheet, but I prefer as a dialog box like in Android version.

How can I fix these issues?

You have `showCupertinoDialog` method. – Ante Bule Mar 18 '22 at 08:08 — Ante Bule, Mar 18 '22 at 08:08

score 5 · Answer 1 · answered Mar 18 '22 at 08:53

Try below code hope its helpful to you.

Your android datePicker method:

androidDatePicker(BuildContext context) async {
    chosenDateTime = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2000),
      lastDate: DateTime(2100),
    );
    print(chosenDateTime);
  }

Your iOS date picker method

iosDatePicker(BuildContext context) {
    showCupertinoModalPopup(
        context: context,
        builder: (BuildContext builder) {
          return Container(
            height: MediaQuery.of(context).copyWith().size.height * 0.25,
            color: Colors.white,
            child: CupertinoDatePicker(
              mode: CupertinoDatePickerMode.date,
              onDateTimeChanged: (value) {
                chosenDateTime = value;
                print(chosenDateTime);
              },
              initialDateTime: DateTime.now(),
              minimumYear: 2000,
              maximumYear: 3000,
            ),
          );
        });
  }

Your Widget:

ElevatedButton(
    onPressed: () {
      if (defaultTargetPlatform == TargetPlatform.macOS ||
          defaultTargetPlatform == TargetPlatform.iOS) {
        iosDatePicker(context);
      } else {
        androidDatePicker(context);
      }
    },
    child: Text('Pick Date'),
  ),

Full example:

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

class HomeScreen extends StatelessWidget {
  DateTime? chosenDateTime;
  //android datepicker
  androidDatePicker(BuildContext context) async {
    chosenDateTime = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2000),
      lastDate: DateTime(2100),
    );
    print(chosenDateTime);
  }
//ios date picker
  iosDatePicker(BuildContext context) {
    showCupertinoModalPopup(
        context: context,
        builder: (BuildContext builder) {
          return Container(
            height: MediaQuery.of(context).copyWith().size.height * 0.25,
            color: Colors.white,
            child: CupertinoDatePicker(
              mode: CupertinoDatePickerMode.date,
              onDateTimeChanged: (value) {
                chosenDateTime = value;
                print(chosenDateTime);
              },
              initialDateTime: DateTime.now(),
              minimumYear: 2000,
              maximumYear: 3000,
            ),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            if (defaultTargetPlatform == TargetPlatform.macOS ||
                defaultTargetPlatform == TargetPlatform.iOS) {
              iosDatePicker(context);
            } else {
              androidDatePicker(context);
            }
          },
          child: const Text('Pick Date'),
        ),
      ),
    );
  }
}

Refer (Android) Date Picker showDatePicker and flutter_datetime_picker

Refer some packages for (iOS) Cupertino Datepicker and Time Picker aslo flutter_cupertino_date_picker and flutter_cupertino_datetime_picker

Thank you for sharing this! This helped me out 5 months later lol. — Vik, Aug 26 '22 at 04:32

Flutter: Issues in using Cupertino DatePicker

1 Answers1