Skip to content

Using RefreshIndicator with Flutter StreamBuilder

Posted in Dart

I wish I knew this earlier on, so I’ll will make it quick and straightforward. If this is the scenario you find yourself in, then this article might be what you’re looking for.

  • You’re using the ListView.builder to build a list which is incoming from an endpoint (say, REST API)
  • You want the user to, upon swipe down (using the RefreshIndicator), Flutter goes to load new data from server, and update the ListView.builder content accordingly

If that’s what you wish to do, then please, here we go with what we’ll do in this article

  • Retrieve a list of posts from a wordpress endpoint (will use data from blog.khophi.co – which is data that is being used to feed khophi.blog)
  • Upon refresh, go to endpoint to pull more data.

Let’s get going then.

Below is the entire code for this article. I’m not here to waste your time. So go ahead and read the code to see how the StreamBuilder is being used

With the code above, you should get a result looking like this:

Using RefreshIndicator with the StreamBuilder

Our basic Project

flutter create basic && cd basic && flutter run

Delete everything from the lib/main.dart file and replace with the code above.

Boom, you’re done, after you install the Http package from https://pub.dartlang.org/packages/http#-installing-tab- and add to your project

So that’s it?

Yes, that’s it. You wanted more? I didn’t bother going into details because I assume the code is obvious. 

A StreamBuilder basically allows you to fetch new content, and push it through to your ListView.builder which will automatically rebuild itself based on new incoming data. 

I assume to be interested to use Flutter’s StreamBuilder, then you know your way around Flutter and not here for any long ‘distin

In any case, the comment section is below. Lemme know if any issue.

Conclusion

The full source code of the above project is in the RefreshIndicator with StreamBuilder project I have on Github.

If any questions, please leave them in the comments.