我正在构建一个包含输入字段表单的注册屏幕,其中一个字段是通过在用户单击该字段时显示日期选择器来输入用户的出生日期,首先我创建了一个DateFormField实例并实现了如下解决方案:
//Date picker for birth of date field
final format = DateFormat('dd-mm-yyyy');
final birthDateField = DateTimeField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
labelText: 'تاريخ الميلاد',
prefixIcon: Icon(Icons.calendar_month),
),
format: format,
onShowPicker: (context, currentValue) async {
final date = showDatePicker(
context: context,
initialDate: currentValue ?? DateTime.now(),
firstDate: DateTime(1920),
lastDate: DateTime(2022));
return date;
},
);
然后我在Scaffold中渲染了birthDateField,如下所示:
return Scaffold(
backgroundColor: Colors.white,
body: Center(
//Use the SingleChildScrollView as a wrapper to ensure scrolling in case scrolling is needed.
child: SingleChildScrollView(
//wrap the elements with Container to provide flexibility in designing the elements.
child: Container(
color: Colors.white,
//use the form as a container of the input fields as it is a Registration form.
child: Padding(
padding: const EdgeInsets.all(36.0),
child: Form(
//give the form wrapper the key value to tell flutter that this is the form design for your form functions.
key: _formKey,
//use the column to show the elements in vertical array.
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
//Use children property inside the column to specify list of widgets
children: <Widget>[
nameField,
SizedBox(
height: 20,
),
emailField,
SizedBox(
height: 20,
),
passwordField,
SizedBox(
height: 20,
),
confirmPasswordField,
SizedBox(
height: 20,
),
birthDateField,
SizedBox(
height: 20,
),
]),
),
),
),
),
),
);
所以运行代码后字段正常出现,但当点击它不打开选择器,我试图设置一个TextEdittingController i虽然它更新的状态问题,但不工作,它不显示任何错误,我会很感激,如果有人知道我缺少什么。
注意:我已经导入了必要的库:
import 'dart:io';
import 'package:image_picker/image_picker.dart';
import 'package:intl/intl.dart';
import 'package:datetime_picker_formfield/datetime_picker_formfield.dart';
import 'package:flutter/material.dart';
问题在这里,最后日期是2022/01/01,当前日期大于最后日期。
为了解决这个问题,你需要提供最后日期,必须是更大的初始日期。您可以包含lastDate: DateTime(2023)
onShowPicker: (context, currentValue) async {
final date = await showDatePicker(
context: context,
initialDate: currentValue ?? DateTime.now(),
firstDate: DateTime(1920),
lastDate: DateTime(2023));
return date;
},