How do I validate dynamically created forms in flutter? - flutter

Question

I'm currently dynamically creating a custom form widget (Row) and am wondering what the best way to validate each form was. By attempting to use a global FormState key, nothing works as the key is shared by each form instance (I assume).
This creates issues such as the keyboard immediately dropping out upon focusing on a textfield.
Was wondering if anyone has a solution to this or could point me in the right direction. Thanks!
Root Widget:
class ExerciseTable extends ConsumerWidget {
final Exercise exercise;
ExerciseTable({#required this.exercise});
#override
Widget build(BuildContext context, ScopedReader watch) {
final _exerciseTableController = watch(exerciseTableControllerProvider);
/*
* Logic of where I build the form rows dynamically
*/
List<Widget> _buildFormRows() {
List<Widget> rows = [];
int sets = int.parse(exercise.sets);
for (int i = 1; i < sets; i++) {
rows.add(
_BuildExerciseRow(
set: i.toString(),
),
);
}
return rows;
}
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
exercise.exerciseName,
style: Theme.of(context).textTheme.headline6,
),
const SizedBox(height: 8),
YoutubePlayerTile(
url: exercise.exerciseURL,
),
const SizedBox(height: 8),
_BuildRowHeader(),
Column(children: _buildFormRows())
],
);
}
}
Individual Form Row Widget:
/**
* * Form Rows
*/
class _BuildExerciseRow extends StatelessWidget {
final String set;
final _formKey = GlobalKey<FormState>();
final _kgTextEditingController = TextEditingController();
final _repsTextEditingController = TextEditingController();
_BuildExerciseRow({this.set});
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 5),
child: Form(
key: _formKey,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
Text(set),
const SizedBox(width: 15),
Text("-"),
const SizedBox(width: 15),
_BuildInputTextField(
controller: _kgTextEditingController,
validator: (value) {
if (value.isEmpty) {
return "Please enter some text";
} else
return "";
}),
// const SizedBox(width: 15),
_BuildInputTextField(
controller: _repsTextEditingController,
),
TickBox(onTap: () => _formKey.currentState.validate())
],
),
),
);
}
}
class _BuildInputTextField extends StatelessWidget {
// final int keyValue;
final String Function(String) validator;
final TextEditingController controller;
_BuildInputTextField({this.validator, #required this.controller});
#override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(vertical: 2),
height: 39,
width: 80,
child: TextFormField(
validator: validator,
inputFormatters: [
LengthLimitingTextInputFormatter(6),
],
controller: controller,
keyboardType: TextInputType.number,
decoration: InputDecoration(
contentPadding: const EdgeInsets.only(bottom: 5, left: 10),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(width: 1),
),
),
onChanged: (value) => {}),
);
}
}
Custom TextFormField Widget:
class _BuildInputTextField extends StatelessWidget {
// final int keyValue;
final String Function(String) validator;
final TextEditingController controller;
_BuildInputTextField({this.validator, #required this.controller});
#override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(vertical: 2),
height: 39,
width: 80,
child: TextFormField(
validator: validator,
inputFormatters: [
LengthLimitingTextInputFormatter(6),
],
controller: controller,
keyboardType: TextInputType.number,
decoration: InputDecoration(
contentPadding: const EdgeInsets.only(bottom: 5, left: 10),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(width: 1),
),
),
onChanged: (value) => {}),
);
}
}

Answer 1

try changing your validator callback as
validator: (value) {
if (value.isEmpty) {
return "Please enter some text";
} else
return null;
}),

Answer 2

Fixed!
It was super simple, I forgot to convert _BuildExerciseRow to a Stateful Widget. (In my case, a Consumer Widget from Riverpod which extends StatefulWidget).