Flutter, Edit object in List - flutter

Question

I have created a simple Flutter app that downloads a list of a person's contacts via an API call. It looks like:
If you click on the pen icon it opens the edit screen for that contact:
All the functionality works except how do I get the list of contacts to update when I click on SAVE in the Edit page? I've tried to understand Provider and Riverpod to do it but all the examples I've found are really really basic and no help. TIA
My model class:
class Contact {
final String id;
final String uid;
String fname;
bool active;
String email;
String lname;
String type;
Contact({
this.id = 'def',
this.uid = 'def',
this.fname = 'def',
this.active = false,
this.email = 'def',
this.lname = 'def',
this.type = 'contacts',
});
factory Contact.fromJson(Map<String, dynamic> json) {
return Contact(
id: json['id'],
uid: json['uid'],
fname: json['fname'],
lname: json['lname'],
active: json['active'],
email: json['email'],
type: json['type']);
}
}
The code to show the list of contacts is:
class Contacts extends ConsumerWidget {
#override
Widget build(BuildContext context, ref) {
final _data = ref.watch(userDataProvider);
;
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
centerTitle: true,
title: const Text('Your Contacts'),
backgroundColor: Colors.green,
),
body: _data.when(
data: (_data) {
return Column(
children: [
..._data.map((e) => ListView(
shrinkWrap: true, children: [ContactCard(cont: e)])),
],
);
},
error: (err, s) => Text(err.toString()),
loading: () => const Center(
child: CircularProgressIndicator(),
),
));
An exceprt of the ContactCard:
Widget build(BuildContext context) {
return Card(
elevation: 50,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.black12, width: 1),
borderRadius: BorderRadius.circular(10),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(children: [
Container(
height: 50.0,
decoration: new BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
child: Center(
child: Stack(
alignment: Alignment.center,
children: <Widget>[
// ignore: avoid_print
DecoratedIcon(
Icons.circle,
size: 50,
color: Colors.green,
),
Text(
'active',
style: TextStyle(fontSize: 10, color: Colors.white),
),
],
),
),
),
Container(
width: 10,
),
Flexible(
fit: FlexFit.tight,
//flex: 2,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
cont.fname + ' ' + cont.lname,
style: TextStyle(
fontWeight: FontWeight.w800,
fontSize: 20,
),
),
The Edit button (pen icon):
ElevatedButton.icon(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => ContactEdit(
e: cont,
)));
},
label: Text(""),
icon: Icon(
Icons.edit,
size: 30,
),
style: ElevatedButton.styleFrom(
primary: Colors.white,
onPrimary: Colors.green,
elevation: 2,
padding:
EdgeInsets.symmetric(horizontal: 10, vertical: 10),
),
),
My provider:
final userDataProvider = FutureProvider<List<Contact>>((ref) async {
return ref.read(apiProvider).fetchData();
});
The API call:
class APIService {
Future<List<Contact>> fetchData() async {
final response = await http.get(Uri.parse('xxxxx'));
if (response.statusCode == 200) {
final List result = jsonDecode(response.body);
return result.map(((ee) => Contact.fromJson(ee))).toList();
} else {
throw Exception(response.reasonPhrase);
}
}
}
final apiProvider = Provider<APIService>((ref) => APIService());