Flutter: Convert future to stream to get realtime updates from API and rebuild widget

205 Views Asked by At

I'm learning flutter by building an app. I have a like button where I'm displaying the count of likes using a FutureBuilder like this :

  FutureBuilder(
    future: likeNotifier.getLikesCount(
      postId: widget.postId,
    ),
    builder: (context, snapshot) {
      final likesCount = snapshot.data;
      if (snapshot.connectionState == ConnectionState.waiting) {
        return const SizedBox();
      }
      return Column(
        children: [
          Text(
            likesCount.toString(),
            style: const TextStyle(
              fontSize: 13,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 9),
        ],
      );
    },
  ),

likeNotifier extends ChangeNotifier and the method to get the future is:

  Future getLikesCount({required int postId}) async {
    try {
      final data = await _postLikeAPI.getLikesCount(
        postId: postId,
      );
      final parsedData = await jsonDecode(data);
      final isReceived = parsedData['received'];
      final likes = parsedData['data'];
      if (isReceived) {
        return likes;
      } else {
        debugPrint(likes);
      }
    } catch (e) {
      debugPrint('postLikeNotifier getLikesCount error: ' + e.toString());
    }
  }

Finally, the method that connects to the node.js api and is accessed above using _postLikeAPI is:

  Future getLikesCount({required int postId}) async {
    final Uri uri = Uri.parse(likeURL + "/$postId");
    final http.Response response = await client.get(uri, headers: headers);
    final dynamic body = response.body;
    return body;
  }

Now this works and I do get correct updates but only when the widget is built on the client end, either when the page is built or the like button is clicked. I want to convert it into a stream so that whenever there's an update in the like count in the database, its updated in the ui.

I tried using Stream.fromFuture and wrapping the button in StreamBuilder instead of FutureBuilder but it didn't work. Maybe coz the underlying method that connects to the api is still a future that runs only once.

I want it to update whenever any other user likes/unlikes a post just like its supposed to, on any viable modern app. How to convert the methods from future to stream to get realtime updates?

I found out that polling/long polling is one way this is done for REST api. Is there any other way?

0

There are 0 best solutions below