如何在文本字段的onclick而不是flutter的键盘上显示日期选择器？

Question

希望在单击TextFormField而不是键盘时显示日期选择器。我已尝试使用GestureDetector但未按预期工作。

DateTime _date = new DateTime.now();
TimeOfDay _time = new TimeOfDay.now();

Future<Null> _selectedDate(BuildContext context) async {
  final DateTime picked = await showDatePicker(
      context: context,
      initialDate: _date,
      firstDate: new DateTime(2016),
      lastDate: new DateTime(2019));

  if (picked != null && picked != _date) {
    print("Date selected ${_date.toString()}");
    setState(() {
      _date = picked;
    });
  }
}
 ......
new GestureDetector(

       onTap: (){
         _selectedTime(context);
             },
            child:
             new TextFormField(
              initialValue: convertToDate(_date),
                decoration: const InputDecoration(
                  icon: const Icon(Icons.calendar_today),
                  hintText: 'Enter your date of event',
                  labelText: 'Date',
                ),
                keyboardType: null,
              ),
            ),

Answer 1

你可以用你的TextFormField有AbsorbPointer（见文档）。它将“吸收”子项上传入的标准行为，因此单击 TextFormField 将什么也不做。如果您现在AbsorbPointer使用 using包装，则GestureDetector可以使用该onTap()方法来调用您的 showDatePicker 方法。

DateTime selectedDate = DateTime.now();
TextEditingController _date = new TextEditingController();

Future<Null> _selectDate(BuildContext context) async {
  final DateTime picked = await showDatePicker(
      context: context,
      initialDate: selectedDate,
      firstDate: DateTime(1901, 1),
      lastDate: DateTime(2100));
  if (picked != null && picked != selectedDate)
    setState(() {
      selectedDate = picked;
      _date.value = TextEditingValue(text: picked.toString());
    });
}

// inside Widget build
GestureDetector(
  onTap: () => _selectDate(context),
  child: AbsorbPointer(
    child: TextFormField(
      controller: _date,
      keyboardType: TextInputType.datetime,
      decoration: InputDecoration(
        hintText: 'Date of Birth',
        prefixIcon: Icon(
          Icons.dialpad,
          color: _icon,
        ),
      ),
    ),
  ),
);

Answer 2

您可以将包裹TextField起来AbsorbPointer，这样您的小部件树将如下所示：

GestureDetector(
  onTap:()=>showDialog(),
  child:AbsorbPointer(
    child: MyTextField(),
  )
)

Answer 3

这里的其他答案有很多小部件来完成工作。但这可以简单地通过使用来完成TextFormField。只需将小部件设置为只读（以便它不接受输入），然后定义一个 onTap。连接到它的控制器将从日期选择器中获取值。

首先创建一个TextFormField像这样的小部件：

TextFormField(
  readOnly: true, //this is important
  onTap: _selectDate,  //the method for opening data picker
  controller: _textcontroller,  //the controller
),

现在编写_selectDate函数：

DateTime dateTime = DateTime.now();

_selectDate() async {
  final DateTime? picked = await showDatePicker(
      context: context,
      initialDate: dateTime,
      initialDatePickerMode: DatePickerMode.day,
      firstDate: DateTime.now(),
      lastDate: DateTime(2101));
  if (picked != null) {
    dateTime = picked;
    //assign the chosen date to the controller
    _textController.text = DateFormat.yMd().format(dateTime);
  }
}

我个人认为这是最简单的解决方案。