How to remove index from form list in flutter - flutter

Question

I have a list of report observations in flutter for a ListView.separated widget
Map _report = {
'observations': <Observation>[
const Observation(observation: ''),
]
};
I added a function to add new observations to the list. That works well. But when I try to remove an observation from the list, instead of removing the observation from the selected index form I always removes the last observation on the list.
This is my full code
class AddReportScreen extends StatefulWidget {
const AddReportScreen({Key? key}) : super(key: key);
static const routeName = '/add-report';
#override
State<AddReportScreen> createState() => _AddReportScreenState();
}
class _AddReportScreenState extends State<AddReportScreen> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
Map _report = {
'observations': <Observation>[
const Observation(observation: ''),
]
};
// Add a new observation to the list
void _addNewObservation() {
setState(() {
_report['observations'].add(Observation(observation: ''));
});
}
// REset the form
void _resetForm() {
setState(() {
_formKey.currentState!.reset();
_report = {
'observations': <Observation>[
const Observation(observation: ''),
]
};
});
}
// Remove observation function
void _removeObservation(int index) {
setState(() {
final obs = _report['observations'];
obs.removeAt(index);
_report['observations'] = obs;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Add Report'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
// Submit the form
print('Valid');
print([
for (var observation in _report['observations'])
'${observation.observation}'
]);
_resetForm();
}
},
child: const Icon(Icons.add),
),
body: Form(
key: _formKey,
child: Column(
children: [
Flexible(
child: ListView.separated(
shrinkWrap: true,
itemBuilder: (BuildContext context, index) {
return Row(
key: Key(index.toString()),
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Expanded(
flex: 4,
child: TextFormField(
onChanged: (value) {
_report['observations'][index] =
Observation(observation: value);
},
decoration: InputDecoration(
hintText: "Observation ${index + 1}",
),
validator: (String? value) {
if (value == null || value.isEmpty) {
return 'Required field.';
}
return null;
},
),
),
if (_report['observations'].length > 1)
Expanded(
child: ElevatedButton(
onPressed: () {
// Remove the observation
_removeObservation(index);
},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.red),
shape: MaterialStateProperty.all<OutlinedBorder>(
const CircleBorder()),
),
child: const Icon(Icons.remove),
))
],
);
},
itemCount: _report['observations'].length,
separatorBuilder: (BuildContext context, index) =>
const Divider(),
),
),
const SizedBox(
height: 10.0,
),
ElevatedButton(
onPressed: () {
_addNewObservation();
},
style: ButtonStyle(
minimumSize: MaterialStateProperty.all<Size>(
const Size(
double.infinity,
50.0,
),
),
),
child: const Text('Add Observation'),
),
const SizedBox(
height: 10.0,
),
const ElevatedButton(onPressed: null, child: Text("Add Images")),
],
),
),
);
}
}
When I print the list of observations after removal, it shows that the selected observation was removed from the list. But when flutter sets state it removes the last observation from the list.

Answer 1

Your item's key in the itemBuilder should be connected somehow with your observation object and not index
Try changing:
key: Key(index.toString()),
to something like:
key: Key(_report['observations'][index].id),
More info about keys in Flutter: https://www.youtube.com/watch?v=kn0EOS-ZiIc