Flutter - form validate and focus problem - flutter

Question

I am trying to do website form validation and focus on the first error field for users automatically. I found a helpful solution to get to the first error field from [here][1].
However, the focus manager solution does not work properly as I expected when there are dynamic fields or conditional fields wrapped with if...[]. When the form validates, the focus goes to the last field and skipped both dynamic and conditional fields.
I solve the conditional field problem by declaring each field in sequence before the return statement, but the dynamic fields still encounter the same problem on validation. Can anyone tell me what is happening within Widget build and is there any possible solutions to this problem? The following is the code I tested.
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: const Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatefulWidget {
const MyWidget({Key? key}) : super(key: key);
#override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
final _formKey = GlobalKey<FormState>();
final _formValidationManager = FormValidationManager();
int count = 3;
bool isChecked = false;
#override
Widget build(BuildContext context) {
Widget widget1 = Column(
children: [
Text('field 1'),
TextFormField(
autovalidateMode: AutovalidateMode.onUserInteraction,
focusNode: _formValidationManager.getFocusNodeForField('field1'),
validator: _formValidationManager.wrapValidator('field1', (value) {
if (value!.isEmpty) {
return 'Please enter a value';
}
return null;
}))
],
);
Widget widget2 = Column(
children: [
Text('field 2'),
TextFormField(
focusNode: _formValidationManager.getFocusNodeForField('field2'),
validator: _formValidationManager.wrapValidator('field2', (value) {
if (value!.isEmpty) {
return 'Please enter a value';
}
return null;
}))
],
);
Widget dynamicField = ListView.separated(
itemCount: count,
separatorBuilder: (BuildContext context, int index) => Divider(height: 1),
itemBuilder: (BuildContext context, int index) {
return DynamicTextField(
formValidationManager: _formValidationManager, index: index);
},
shrinkWrap: true,
physics: const ScrollPhysics(),
);
Widget widget3 = Row(
children: [
Checkbox(
value: isChecked,
onChanged: (value) {
isChecked = !isChecked;
setState(() {});
}),
SizedBox(
width: 16,
),
Text("Open conditional Field"),
],
);
Widget conditionalWidget = Column(
children: [
Text('conditional field'),
TextFormField(
focusNode: _formValidationManager.getFocusNodeForField('field4'),
validator: _formValidationManager.wrapValidator('field4', (value) {
if (value!.isEmpty) {
return 'Please enter a value';
}
return null;
}))
],
);
Widget widget4 = Column(
children: [
Text("field 3"),
TextFormField(
focusNode: _formValidationManager.getFocusNodeForField('field5'),
validator: _formValidationManager.wrapValidator('field5', (value) {
if (value!.isEmpty) {
return 'Please enter a value';
}
return null;
}))
],
);
return Form(
key: _formKey,
child: SingleChildScrollView(
child: Column(
children: [
widget1,
widget2,
widget3,
if (isChecked) ...[conditionalWidget],
dynamicField,
widget4,
ElevatedButton(
onPressed: () {
if (!_formKey.currentState!.validate()) {
_formValidationManager.erroredFields.first.focusNode
.requestFocus();
}
},
child: Text('SUBMIT'))
],
),
),
);
}
#override
void dispose() {
_formValidationManager.dispose();
super.dispose();
}
}
class FormValidationManager {
final _fieldStates = Map<String, FormFieldValidationState>();
FocusNode getFocusNodeForField(key) {
_ensureExists(key);
return _fieldStates[key]!.focusNode;
}
FormFieldValidator<T> wrapValidator<T>(
String key, FormFieldValidator<T> validator) {
_ensureExists(key);
return (input) {
final result = validator(input);
_fieldStates[key]!.hasError = (result?.isNotEmpty ?? false);
return result;
};
}
List<FormFieldValidationState> get erroredFields => _fieldStates.entries
.where((s) => s.value.hasError)
.map((s) => s.value)
.toList();
void _ensureExists(String key) {
_fieldStates[key] ??= FormFieldValidationState(key: key);
}
void dispose() {
_fieldStates.entries.forEach((s) {
s.value.focusNode.dispose();
});
}
}
class FormFieldValidationState {
final String key;
bool hasError;
FocusNode focusNode;
FormFieldValidationState({required this.key})
: hasError = false,
focusNode = FocusNode();
}
class DynamicTextField extends StatelessWidget {
final FormValidationManager formValidationManager;
final int index;
const DynamicTextField(
{Key? key, required this.formValidationManager, required this.index})
: super(key: key);
#override
Widget build(BuildContext context) {
return TextFormField(
focusNode: formValidationManager.getFocusNodeForField('node$index'),
validator: formValidationManager.wrapValidator('node$index', (value) {
if (value!.isEmpty) {
return 'Please enter a value';
}
return null;
}));
}
}```
Thank you very much!
[1]: https://stackoverflow.com/questions/63833619/flutter-forms-get-the-list-of-fields-in-error