android - Flutter:使用 Cupertino DatePicker 时出现的问题

Question

我正在尝试检查用户的设备操作系统并向 iOS 用户显示库比蒂诺日期选择器，并向 Android 用户显示 Material 日期选择器。下面是我的代码

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

我的 Android 代码运行良好。但是我的 iOS 代码中存在以下问题。

1. 我无法关闭弹出窗口
2. 这将作为底部工作表打开，但我更喜欢像 Android 版本那样作为对话框。

如何解决这些问题？

Answer 1

尝试下面的代码希望对您有所帮助。

你的android datePicker方法:

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

你的iOS日期选择器方法

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

您的小部件:

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

完整示例:

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'),
        ),
      ),
    );
  }
}

引用 (Android) 日期选择器 showDatePicker和 flutter_datetime_picker

引用 (iOS) Cupertino Datepicker 和 Time Picker 的一些软件包 flutter_cupertino_date_picker和 flutter_cupertino_datetime_picker