How to give focus to DateTimeFormField on Flutter? - flutter

Question

I have a form with TextFormFields. I can give focus to next field using Tab key as usual. But, it skips DateTimeFormField. How can I make it show the Date picker instead of skipping it when it is its turn?
Did some search but couldn't find anything near it.
Here is my code samples. I simply use TextFormField's and DateTimeFormField inside a Column. But there is no focus option for DateTimeFormField.
class FormDialog extends ConsumerWidget {
const FormDialog({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context, WidgetRef ref) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(
height: 12,
),
CustomTextField(
labelText: firstName,
textInputAction: TextInputAction.next,
),
const SizedBox(
height: 12,
),
CustomTextField(
labelText: lastName,
textInputAction: TextInputAction.next,
),
const SizedBox(
height: 12,
),
CustomDateField(
labelText: dateOfBirth,
),
const SizedBox(
height: 12,
),
CustomTextField.email(
labelText: parentEmail,
),
],
);
}
}
class CustomDateField extends StatelessWidget {
const CustomDateField({
Key? key,
this.labelText,
this.hintText,
}) : super(key: key);
final String? labelText;
final String? hintText;
#override
Widget build(BuildContext context) {
return DateTimeFormField(
mode: DateTimeFieldPickerMode.date,
dateFormat: DateFormat.yMd(),
decoration: InputDecoration(
labelText: labelText,
hintText: hintText,
border: const OutlineInputBorder(),
helperText: ' ',
),
);
}
}
class CustomTextField extends StatelessWidget {
const CustomTextField({
Key? key,
this.labelText,
this.icon,
this.textInputAction,
}) : super(key: key);
final String? labelText;
final TextFieldIcon? icon;
final TextInputAction? textInputAction;
#override
Widget build(BuildContext context) {
return TextFormField(
autovalidateMode: AutovalidateMode.onUserInteraction,
decoration: InputDecoration(
hintText: labelText,
border: const OutlineInputBorder(),
prefixIcon: icon,
helperText: ' ',
),
textInputAction: textInputAction,
);
}
factory CustomTextField.email({
String? errorMessage,
String? labelText,
}) =>
CustomTextField(
labelText: labelText ?? email,
icon: const TextFieldIcon.email(),
textInputAction: TextInputAction.next,
);
}

Answer 1

According to the package's Github repository, it is built upon FormField, creating and initializing a FocusNode and passing the focus node to the widget might resolve the issue. If not you might need to implement your own form field.