title: Flutter, Edit object in List
body: <p>I have created a simple Flutter app that downloads a list of a person's contacts via an API call. It looks like:
  <a href="https://i.stack.imgur.com/7cJ65.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7cJ65.png" alt="enter image description here" /></a></p>
  <p>If you click on the pen icon it opens the edit screen  for that contact:</p>
  <p><a href="https://i.stack.imgur.com/N1pKM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N1pKM.png" alt="enter image description here" /></a></p>
  <p>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</p>
  <p>My model class:</p>
  <pre><code>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&lt;String, dynamic&gt; json) {
      return Contact(
          id: json['id'],
          uid: json['uid'],
          fname: json['fname'],
          lname: json['lname'],
          active: json['active'],
          email: json['email'],
          type: json['type']);
    }
  }
  </code></pre>
  <p>The code to show the list of contacts is:</p>
  <pre><code>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) =&gt; ListView(
                      shrinkWrap: true, children: [ContactCard(cont: e)])),
                ],
              );
            },
            error: (err, s) =&gt; Text(err.toString()),
            loading: () =&gt; const Center(
              child: CircularProgressIndicator(),
            ),
          ));
  </code></pre>
  <p>An exceprt of the ContactCard:</p>
  <pre><code>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: &lt;Widget&gt;[
                        // 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,
                        ),
                      ),
  </code></pre>
  <p>The Edit button (pen icon):</p>
  <pre><code> ElevatedButton.icon(
                        onPressed: () {
                          Navigator.of(context).push(MaterialPageRoute(
                              builder: (context) =&gt; ContactEdit(
                                    e: cont,
                                  )));
                        },
                        label: Text(&quot;&quot;),
                        icon: Icon(
                          Icons.edit,
                          size: 30,
                        ),
                        style: ElevatedButton.styleFrom(
                          primary: Colors.white,
                          onPrimary: Colors.green,
                          elevation: 2,
                          padding:
                              EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                        ),
                      ),
  </code></pre>
  <p>My provider:</p>
  <pre><code>final userDataProvider = FutureProvider&lt;List&lt;Contact&gt;&gt;((ref) async {
    return ref.read(apiProvider).fetchData();
  });
  </code></pre>
  <p>The API call:</p>
  <pre><code>class APIService {
    Future&lt;List&lt;Contact&gt;&gt; fetchData() async {
      final response = await http.get(Uri.parse('xxxxx'));
  
      if (response.statusCode == 200) {
        final List result = jsonDecode(response.body);
        return result.map(((ee) =&gt; Contact.fromJson(ee))).toList();
      } else {
        throw Exception(response.reasonPhrase);
      }
    }
  }
  
  final apiProvider = Provider&lt;APIService&gt;((ref) =&gt; APIService());
  </code></pre>