List of TextFields clearing when they're updated - Flutter - flutter

Question

I am creating a simple grocery list creator in Flutter. I am trying to go about this by having a plus button that will add ingredient text fields when you press it. Here is what I have done:
body: Container(
padding: EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 30.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(
'Ingredients ',
style: GoogleFonts.biryani(fontSize: 15.0)),
IconButton(
icon: new Icon(Icons.add),
onPressed: () {
setState(() {
countings++;
});
debugPrint('$countings');
},
)
],
),
SizedBox(height: 10.0),
ListOfIngsWidget(countings, key: UniqueKey())
],
),
)
And here is the ListOfIngsWidget:
class ListOfIngsWidget extends StatefulWidget {
final int countIngs;
const ListOfIngsWidget(this.countIngs, {Key key}) : super(key: key);
#override
_ListOfIngsState createState() => _ListOfIngsState();
}
class _ListOfIngsState extends State<ListOfIngsWidget> {
List<TextEditingController> _controllerList = [];
List<TextEditingController> _numControllerList = [];
List<Widget> _ingList = [];
#override
void initState() {
for (int i = 1; i <= widget.countIngs; i++) {
TextEditingController controller = TextEditingController();
TextField textField = TextField(
controller: controller,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Ingredient $i',
),
);
TextEditingController numcontroller = TextEditingController();
TextField numField = TextField(
controller: numcontroller,
decoration: InputDecoration(
border: OutlineInputBorder(), hintText: '#', labelText: '#'),
keyboardType: TextInputType.number,
);
_ingList.add(Row(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(10, 0, 10, 10),
child: SizedBox(
width: 250,
child: textField,
)),
Text('x', style: GoogleFonts.biryani(fontSize: 15)),
Padding(
padding: EdgeInsets.fromLTRB(10, 0, 10, 10),
child: SizedBox(
width: 75,
child: numField,
))
],
));
_controllerList.add(controller);
_numControllerList.add(numcontroller);
}
super.initState();
}
#override
Widget build(BuildContext context) {
return new Container(
child: Flexible(
child: ListView(children: _ingList),
),
);
}
}
The only problem is that if you press the plus button after you have already entered values into one of the textFields, it will clear the field. I kind of understand why this is happening, but is there a way to work around this?

Answer 1

I might be missing some proper disposal of textControllers but here's the gist. As for further reading into keys and why they're necessary, I'd read this medium post
class ParentWidget extends StatefulWidget {
#override
_ParentWidgetState createState() => _ParentWidgetState();
}
class _ParentWidgetState extends State<ParentWidget> {
final _controllerList = <TextEditingController>[];
final _numControllerList = <TextEditingController>[];
/*
If the user had previous ingredients (say from a db), then you
would fill _controllerList and _numControllerList here using
the old ingredients to populate.
#override
void initState() {
for (ingredient in previousIngredients) {
final controller = TextEditingController(text: ingredient.text);
final numController = TextEditingController();
_controllerList.add(controller);
_numControllerList.add(numController);
}
super.initState();
}
*/
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 30.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text('Ingredients'),
IconButton(
icon: Icon(Icons.add),
onPressed: () {
setState(() {
_controllerList.add(TextEditingController());
_numControllerList.add(TextEditingController());
});
},
),
IconButton(
icon: Icon(Icons.remove),
onPressed: () {
if (_controllerList.isEmpty) return;
setState(() {
_controllerList.removeLast();
_numControllerList.removeLast();
});
},
)
],
),
SizedBox(height: 10.0),
ListOfIngsWidget(_controllerList, _numControllerList),
],
),
),
);
}
}
class ListOfIngsWidget extends StatelessWidget {
ListOfIngsWidget(this.controllerList, this.numControllerList)
: assert(controllerList.length == numControllerList.length);
final List<TextEditingController> controllerList;
final List<TextEditingController> numControllerList;
#override
Widget build(BuildContext context) {
final _ingList = <Widget>[];
for (var i = 0; i < controllerList.length; i++) {
final textField = TextField(
controller: controllerList[i],
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Ingredient $i',
),
);
final numField = TextField(
controller: numControllerList[i],
decoration: InputDecoration(
border: OutlineInputBorder(), hintText: '#', labelText: '#'),
keyboardType: TextInputType.number,
);
_ingList.add(
Row(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(10, 0, 10, 10),
child: SizedBox(
width: 250,
child: textField,
)),
Text('x', style: GoogleFonts.biryani(fontSize: 15)),
Padding(
padding: EdgeInsets.fromLTRB(10, 0, 10, 10),
child: SizedBox(
width: 75,
child: numField,
),
)
],
),
);
}
return Container(
child: Flexible(
child: ListView(children: _ingList),
),
);
}
}