Flutter web, weired results after Consumer rebuild - flutter

Question

I have a Form in flutter, containing a column with rows with textFormFields.
Each row has a iconButton at the end for deleting said row. The rows is built with a Consumer.
I have a notifier class containing data that the consumer listens for.
When the delete button is pressed a function in the notifier class is called, responsible for deleting the row with the given index. The same function is printing out the dataset befor deletion and again after deletion. The print looks good, the result is as expected.
The Consumer also rebuilds the dataset with one row less. But the data that is presented in the ui is not as expected.
In the Widget that is responsible for building the rows I print out the data that is put in the initialValue of the textFormField. The print looks good, again as expected. But the ui does not render what the print is showing.
See pictures and code.
Ready for deleting the second row:
After deletion:
Code that deletes the row and prints the data.
void deletePoint({int switchpointIndex, int pointIndex, Point point}) {
for (Switchpoint switchpoint in _settings.switchpoints) {
for (Point point in switchpoint.points) {
print("Tag: ${point.tag}. And Type: ${point.type}");
}
}
_settings.switchpoints[switchpointIndex].points.removeAt(pointIndex);
for (Switchpoint switchpoint in _settings.switchpoints) {
for (Point point in switchpoint.points) {
print("Tag: ${point.tag}. And Type: ${point.type}");
}
}
notifyListeners();
}
Result of the print (as expected):
Tag: a. And Type: a
Tag: b. And Type: b
Tag: c. And Type: c
Tag: a. And Type: a
Tag: c. And Type: c
Code that prints and renders the data in the row Widget:
#override
Widget build(BuildContext context) {
print("PointIndex: $pointIndex, value: ${point.tag} and ${point.type}");
return Row(
...
TextFormField(
...
initialValue: point.tag ?? ''
...
TextFormField(
...
initialValue: point.type ?? ''
...
This also prints the expected:
PointIndex: 0, value: a and a
PointIndex: 1, value: c and c
Anyone who understands whats going on?
-- EDIT --
No TextEditingController.
Form code:
return Container(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 50,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Switchpoint Layout',
style: TextStyle(
color: Colors.teal,
fontSize: 20,
fontWeight: FontWeight.bold),
),
TextButton.icon(
onPressed: () {
context
.read<SettingsNotifier>()
.addEmptySwitchpoint();
},
icon: Icon(Icons.add),
label: Text('Add Switchpoint')),
],
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Consumer<SettingsNotifier>(
builder: (context, notifier, child) {
List<SwitchpointRow> switchpointRows = [];
int switchpointIndex = 0;
for (Switchpoint switchpoint
in notifier.switchPoints) {
switchpointRows.add(SwitchpointRow(
switchpoint: switchpoint,
switchpointIndex: switchpointIndex,
formKey: _formKey,
));
switchpointIndex++;
}
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: switchpointRows),
],
);
}),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 16.0),
child: ElevatedButton(
onPressed: () async {
print(context
.read<SettingsNotifier>()
.settings
.toJson());
if (_formKey.currentState.validate()) {}
},
child: Text('Submit'),
),
),
],
),
),
);
SwitchpointRow code:
class SwitchpointRow extends StatelessWidget {
const SwitchpointRow({
Key key,
#required this.switchpoint,
#required this.switchpointIndex,
#required this.formKey,
}) : super(key: key);
final int switchpointIndex;
final Switchpoint switchpoint;
final formKey;
List<PointRow> loadPoints(List<Point> points) {
List<PointRow> pointRows = [];
int pointIndex = 0;
for (Point point in points) {
pointRows.add(PointRow(
point: point,
switchpointIndex: switchpointIndex,
pointIndex: pointIndex,
last: points.last == point ? true : false));
pointIndex++;
}
return pointRows;
}
#override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: const EdgeInsets.only(bottom: 20),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
AppBar(
backgroundColor: Colors.amberAccent,
title: TextFormField(
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.fromLTRB(0, 2, 0, 4),
isDense: true,
hintText: 'Switchpoint name',
labelText: 'Switchpoint name',
),
initialValue: switchpoint.name ?? '',
onChanged: (value) {
context
.read<SettingsNotifier>()
.switchPoints[switchpointIndex]
.name = value;
},
validator: (value) {
if (value.isEmpty) {
return 'mandatory';
}
return null;
}),
actions: [
Padding(
padding: const EdgeInsets.only(right: 18.0),
child: TextButton.icon(
onPressed: () {
context.read<SettingsNotifier>().deleteSwitchpoint(
switchpointIndex: switchpointIndex);
},
icon: Icon(Icons.delete),
label: Text('Delete Switchpoint'),
),
),
Padding(
padding: const EdgeInsets.only(right: 8.0),
child: TextButton.icon(
onPressed: () {
context
.read<SettingsNotifier>()
.addPoint(switchpointIndex);
},
icon: Icon(Icons.add),
label: Text('Point'),
),
),
],
),
Padding(
padding: const EdgeInsets.only(left: 50.0),
child: Column(children: loadPoints(switchpoint.points)),
),
],
),
),
);
}
}
PointRow code:
class PointRow extends StatelessWidget {
const PointRow(
{Key key,
#required this.point,
#required this.switchpointIndex,
#required this.pointIndex,
#required this.last})
: super(key: key);
final Point point;
final int pointIndex;
final int switchpointIndex;
final bool last;
#override
Widget build(BuildContext context) {
print("PointIndex: $pointIndex, value: ${point.tag} and ${point.type}");
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
flex: 3,
child: TextFormField(
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(0, 2, 0, 4),
isDense: true,
hintText: 'Tag',
labelText: 'Point tag',
),
onChanged: (value) {
context
.read<SettingsNotifier>()
.switchPoints[switchpointIndex]
.points[pointIndex]
.tag = value;
},
initialValue: point.tag ?? '',
validator: (value) {
if (value.isEmpty) {
return 'mandatory';
}
return null;
}),
),
SizedBox(width: 30.0),
Expanded(
flex: 3,
child: TextFormField(
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(0, 2, 0, 4),
isDense: true,
hintText: 'Type',
labelText: 'Type of point',
),
onChanged: (value) {
context
.read<SettingsNotifier>()
.switchPoints[switchpointIndex]
.points[pointIndex]
.type = value;
},
initialValue: point.type ?? '',
),
),
Expanded(
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Icon(Icons.delete),
onPressed: () {
context.read<SettingsNotifier>().deletePoint(
switchpointIndex: switchpointIndex,
pointIndex: pointIndex,
point: point);
},
),
)
],
);
}
}
The whole Form picture:

Answer 1

So, after some trial and error the solution had to be a TextEditingController which I wanted to avoid since eventually there will be several fields.
So the solution is a inline controller like this:
TextFormField(
...
controller: TextEditingController()..text = 'the value',
...
);
In this way the UI behaves as I want.