Flutter - Providers and Future calls, how to share the same instance?

Question

I'm learning Flutter and there is something I cannot grasp my head around. I implemented a Infinite scroll pagination, with a package (infine_scroll_pagination), it works fine, but the data this Package is getting, comes from a Future call, which takes data from the WEB, and parses it in my Provider Class.

My issue is, the data that is loaded by the Infinite Scroll widget, cannot be accessed, in its state, anywhere else.

Example: Let's take a contact list, that loads 10 contacts at a time:

class ContactsBody extends StatefulWidget {
  @override
  _ContactsBodyState createState() => _ContactsBodyState();
}

class _ContactsBodyState extends State<ContactsBody> {
  static const _pageSize = 10;
  final PagingController<int, Contact> pagingController =
      PagingController(firstPageKey: 0);

  @override
  void initState() {
    super.initState();
    pagingController.addPageRequestListener((pageKey) {
      _fetchPage(pageKey);
    });
  }

  Future<void> _fetchPage(int pageKey) async {
    try {
      final newItems = await ContactsService().fetchContactsPaged(pageKey, _pageSize);
      final isLastPage = newItems.length < _pageSize;

      if (isLastPage) {
        pagingController.appendLastPage(newItems.contacts);
      } else {
        final nextPageKey = pageKey + 1;
        pagingController.appendPage(newItems.contacts, nextPageKey);
      }
    } catch (error) {
      pagingController.error = error;
    }
  }
  @override
  Widget build(BuildContext context) {
    return ContactsList(pagingController);
  }

  @override
  void dispose() {
    pagingController.dispose();
    super.dispose();
  }

So basically this Infinite Scroll package, will fetch my contacts, 10 at a time, and here my ContactsService call:

 Future<Contacts> fetchContactsPaged(int pageKey, int pageSize) async {
    final response = await http.get(.....);

    if (response.statusCode == 200) {
    return Contacts.fromJson(jsonDecode(response.body));
    } else {
      throw Exception('Failed to load contacts');
    }
  }

And finally, as you can see here above, it initializes my Provider class (Contacts), using its factory method, "fromJson()", and returns the parsed data.

Now my Provider class:

class Contacts extends ChangeNotifier {
      List<Contact> _contacts = <Contact>[];
    
      Contacts();
    
      factory Contacts.fromJson(final Map<String, dynamic> json) {
        final Contacts contacts = Contacts();
        if (json['data'] != null) {
          json['data'].forEach((contact) {
            contacts.add(Contact.fromJson(contact));
          });
        }
        return contacts;
      }

  void add(final Contact contact) {
    this._contacts.add(contact);
    this.notifyListeners();
  }

The problem I'm having here is, when the Inifinite Scroll listView is loaded, and for example I change the state of a single contact (contacts can be set as favorite for example),

How can I access the SAME instance of the Contacts() class, that the FUTURE call initialized, so that I can access the current state of the data in that class?

Of course if I were to POST my changes onto the API, and refetch the new values where I need them, I would get the updated state of my data, but I want to understand how to access the same instance here and make the current data available inside the app everywhere

Answer 1

EDIT : I removed the original answer to give a better sample of what the OP wants to achieve.

I made a repo on GitHub to try to show you what you want to achieve: https://github.com/Kobatsu/stackoverflow_66578191

There are a few confusing things in your code :

• When to create instances of your objects (ContactsService, Contacts)
• Provider usage
• (Accessing the list of the pagingController ?)
• Parsing a JSON / using a factory method

The repository results in the following :

When you update the list (by scrolling down), the yellow container is updated with the number of contacts and the number of favorites. If you click on a Contact, it becomes a favorite and the yellow container is also updated.

I commented the repository to explain you each part.

Note: the Contacts class in your code became ContactProvider in mine.

The ContactsService class to make the API call :

class ContactsService {
  static Future<List<Contact>> fetchContactsPaged(
      int pageKey, int pageSize) async {
    // Here, you should get your data from your API

    // final response = await http.get(.....);
    // if (response.statusCode == 200) {
    //   return Contacts.fromJson(jsonDecode(response.body));
    // } else {
    //   throw Exception('Failed to load contacts');
    // }

    // I didn't do the backend part, so here is an example
    // with what I understand you get from your API:
    var responseBody =
        "{\"data\":[{\"name\":\"John\", \"isFavorite\":false},{\"name\":\"Rose\", \"isFavorite\":false}]}";
    Map<String, dynamic> decoded = json.decode(responseBody);
    List<dynamic> contactsDynamic = decoded["data"];

    List<Contact> listOfContacts =
        contactsDynamic.map((c) => Contact.fromJson(c)).toList();

    // you can return listOfContacts, for this example, I will add 
    // more Contacts for the Pagination plugin since my json only has 2 contacts
    for (int i = pageKey + listOfContacts.length; i < pageKey + pageSize; i++) {
      listOfContacts.add(Contact(name: "Name $i"));
    }
    return listOfContacts;
  }
}

Usage of Provider :

Consumer<ContactProvider>(
        builder: (_, foo, __) => Container(
              child: Text(
                  "${foo.contacts.length} contacts - ${foo.contacts.where((c) => c.isFavorite).length} favorites"),
              padding: EdgeInsets.symmetric(
                  horizontal: 20, vertical: 10),
              color: Colors.amber,
            )),
    Expanded(child: ContactsBody())
  ]),
)

Fetch page method in the ContactsBody class, where we add the contact to our ContactProvider :

  Future<void> _fetchPage(int pageKey) async {
    try {
      // Note : no need to make a ContactsService, this can be a static method if you only need what's done in the fetchContactsPaged method
      final newItems =
          await ContactsService.fetchContactsPaged(pageKey, _pageSize);
      final isLastPage = newItems.length < _pageSize;
      if (isLastPage) {
        _pagingController.appendLastPage(newItems);
      } else {
        final nextPageKey = pageKey + newItems.length;
        _pagingController.appendPage(newItems, nextPageKey);
      }

      // Important : we add the contacts to our provider so we can get
      // them in other parts of our app
      context.read<ContactProvider>().addContacts(newItems);
    } catch (error) {
      print(error);
      _pagingController.error = error;
    }
  }

ContactItem widget, in which we update the favorite statuts and notify the listeners :

class ContactItem extends StatefulWidget {
  final Contact contact;
  ContactItem({this.contact});

  @override
  _ContactItemState createState() => _ContactItemState();
}

class _ContactItemState extends State<ContactItem> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
        child: Padding(child: Row(children: [
          Expanded(child: Text(widget.contact.name)),
          if (widget.contact.isFavorite) Icon(Icons.favorite)
        ]), padding: EdgeInsets.symmetric(vertical: 8, horizontal: 10),),
        onTap: () {
          // the below code updates the item
          // BUT others parts of our app won't get updated because
          // we are not notifying the listeners of our ContactProvider !
          setState(() {
            widget.contact.isFavorite = !widget.contact.isFavorite;
          });

          // To update other parts, we need to use the provider
          context.read<ContactProvider>().notifyContactUpdated(widget.contact);
        });
  }
}

And the ContactProvider :

class ContactProvider extends ChangeNotifier {
  final List<Contact> _contacts = [];
  List<Contact> get contacts => _contacts;

  void addContacts(List<Contact> newContacts) {
    _contacts.addAll(newContacts);
    notifyListeners();
  }

  void notifyContactUpdated(Contact contact) {
    // You might want to update the contact in your database,
    // send it to your backend, etc...
    // Here we don't have these so we just notify our listeners :
    notifyListeners();
  }
}