Flutter how to display datepicker when textformfield is clicked
To stop keyboard from appearing, you can set the readOnly property of the TextFormField to true.
TextFormField(
readOnly: true,
...
);
TextEditingController dateCtl = TextEditingController();
TextFormField(
controller: dateCtl,
decoration: InputDecoration(
labelText: "Date of birth",
hintText: "Ex. Insert your dob",),
onTap: () async{
DateTime date = DateTime(1900);
FocusScope.of(context).requestFocus(new FocusNode());
date = await showDatePicker(
context: context,
initialDate:DateTime.now(),
firstDate:DateTime(1900),
lastDate: DateTime(2100));
dateCtl.text = date.toIso8601String();},)
You can use OnTap property to achieve this
TextFormField(
onTap: (){
// Below line stops keyboard from appearing
FocusScope.of(context).requestFocus(new FocusNode());
// Show Date Picker Here
},
)
Update 2020:
As pointed by another answer @Lekr0 this can now be done using onTap()
property of TextFormField
.
TextFormField(
onTap: (){
// Below line stops keyboard from appearing
FocusScope.of(context).requestFocus(new FocusNode());
// Show Date Picker Here
},
)
Original Answer:
Simple Way of Doing it :
Wrap your TextFormField
with IgnorePointer
& wrap IgnorePointer
with InkWell
InkWell(
onTap: () {
_selectDate(); // Call Function that has showDatePicker()
},
child: IgnorePointer(
child: new TextFormField(
decoration: new InputDecoration(hintText: 'DOB'),
maxLength: 10,
// validator: validateDob,
onSaved: (String val) {},
),
),
),
Also in Your _selectDate()
make lastDate: new DateTime(2020));
else you will get error.