Access input data from dynamically created FormTextFields with validation in Flutter - flutter

Question

I created a custom FormBuilderTextField with built in validation and am able to build them when called through LisView.Builder. My problem now is that I am unable to access the data within each generated FormBuilderTextField and pass that data to another page. I have a GlobalKey<FormState>() on the page with the ListView.Builder but cant seem to access that data. Any advice?
Custom TextField
TextFieldEntry({
required this.name,
});
final String name;
final myDecorationField = InputDecoration(
labelText: 'textFieldName',
labelStyle: TextStyle(fontSize: 20, color: Colors.pink),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(0),
bottomRight: Radius.circular(0),
),
borderSide: BorderSide(
width: 1,
color: Colors.pink,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(0),
bottomRight: Radius.circular(0),
),
borderSide: BorderSide(
color: Colors.pink,
width: 1,
),
),
);
#override
State<TextFieldEntry> createState() => _TextFieldEntryState();
}
class _TextFieldEntryState extends State<TextFieldEntry> {
Input model = Input();
var _validator;
var _keyboard;
var _myUnit;
Widget build(BuildContext context) {
var _onSaved = (value) {
model.title = value;
};
if (widget.name == 'height') {
final heightValidate = FormBuilderValidators.compose([
FormBuilderValidators.required(context),
FormBuilderValidators.numeric(context),
FormBuilderValidators.max(context, 200),
FormBuilderValidators.min(context, 30)
]);
_validator = heightValidate;
_keyboard = TextInputType.number;
_myUnit = MyUnit();
} else {
final weightValidate = FormBuilderValidators.compose([
FormBuilderValidators.required(context),
FormBuilderValidators.numeric(context),
FormBuilderValidators.max(context, 450),
FormBuilderValidators.min(context, 30)
]);
_validator = weightValidate;
_keyboard = TextInputType.number;
_myUnit = MyUnit(imperial: 'lbs', metric: 'kg');
}
return Padding(
padding: const EdgeInsets.all(2.0),
child: Column(
children: [
Container(
constraints: BoxConstraints(maxWidth: 375, maxHeight: 50),
child: Row(
children: [
Expanded(
child: FormBuilderTextField(
name: widget.name,
decoration: widget.myDecorationField
.copyWith(labelText: widget.name),
onSaved: _onSaved,
validator: _validator,
keyboardType: _keyboard,
),
),
Container(
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(color: Colors.pink, width: 2)),
child: Row(
children: [
Container(
padding: EdgeInsets.all(5),
child: Center(
child: ValueListenableBuilder<Units>(
valueListenable: _myUnit,
builder: (context, unit, _) => AutoSizeText(
_myUnit.unitType,
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w500),
)),
),
),
Builder(
builder: (context) {
if (widget.name == 'height' ||
widget.name == 'weight' ||
{
return Container(
constraints:
BoxConstraints(maxHeight: 50, maxWidth: 60),
child: TextButton(
onPressed: () {
Units unit = _myUnit.unit;
_myUnit.unit = unit == Units.unit1
? Units.unit2
: Units.unit1;
},
child: Center(
child: Icon(
Icons.loop,
size: 30,
color: Colors.white,
),
),
),
);
} else {
return Text('');
}
},
),
],
),
),
],
),
),
SizedBox(
height: 12,
)
],
),
);
}
}
ListView.Builder Page
var title;
Input({this.title});
}
class BMI extends StatefulWidget {
static const String id = 'BMI';
#override
State<BMI> createState() => _BMIState();
}
class _BMIState extends State<BMI> {
final _formKey = GlobalKey<FormState>();
List<Input> _bmiInputs = [
Input(title: 'height'),
Input(title: 'weight'),
Input(title: 'gender'),
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: CustomAppBar(
title: 'BMI',
),
drawer: MainDrawer(),
backgroundColor: Theme.of(context).colorScheme.secondary,
body: SingleChildScrollView(
child: Column(children: [
Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
constraints: BoxConstraints(maxHeight: 500, maxWidth: 375),
child: ListView.builder(
itemCount: _bmiInputs.length,
itemBuilder: (BuildContext inp, index) {
return FittedBox(
child: TextFieldEntry(
name: _bmiInputs[index].title,
),
);
},
),
),
ElevatedButton(
child: Text('Calculate'),
onPressed: () {
_formKey.currentState?.save();
if (_formKey.currentState!.validate()) {}
print('Calculate');
// need to access Data here to pass to the calculator
// BMICalc bmiCalc;
// bmiCalc = BMICalc(
// height: ______,
// weight: ______,
// gender: _______,
// );
Navigator.push(context,
MaterialPageRoute(builder: (context) => ResultsScreen(bmi: bmiCalc.calculateBMI(),)));
})
],
),
),
])));
}
}

Answer 1

you use the onSaved as a parameter, you can get Data back to the first Widget
in the FormBuilderTextField it will be at the onSaved
ListView.Builder
return FittedBox(
child: TextFieldEntry(
name: _bmiInputs[index].title,
onSaved: (value) {
_bmiInputs[index].title = value;
}),
);
TextFieldEntry
typedef OnSaved(value);
TextFieldEntry({
required this.name, required this.onSaved
});
final String name;
final OnSaved onSaved;
...
...
FormBuilderTextField(
name: widget.name,
decoration: widget.myDecorationField
.copyWith(labelText: widget.name),
onSaved: widget.onSaved,
validator: _validator,
keyboardType: _keyboard,
),