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.

Tags:

Flutter