Let’s use the RefreshIndicator with BLoC in Flutter
Welcome back to another new article about Flutter Framework. Today I am going to talk about how to use the ‘RefreshIndicator’ widget with BLoC state management library in Flutter.
I hope you have seen apps like YouTube and Facebook which allows you to swipe down to refresh the content of the screen. RefreshIndicator does just that, it allows you to refresh the page (call an async function) when swiping down. I hope now you have an idea about this widget. Then let’s code!
PREREQUISITES ❓
In this article, I will not talk deeply about the BLoC library; therefore it would be best if you knew about it before moving along with the article. If you have worked with BLoC before, then it’s great!😄 You can skip the next part. But for those who do not have an idea about the BLoC state management library, I strongly recommend you watch this video before moving forward.
Let’s Install the BloC Library 🐱🚀
I believe you now have a good idea about the BLoC library. Let’s install the BLoC library.
First, add the following line to the pubspec.yaml file in your flutter application. (There may be newer versions released by the time you read this article.)
After that, you must install the library. Just write the following code in your command line (for this to work you must have set an environmental variable for flutter). But keep in mind that, for some code editors like VS Code, this line will be automatically completed. Therefore it would be better to check the documentation for your code editor to learn more about that.
Folder Structure 🐱🐉
Create the folder structure for our project as follows (the names can be changed according to your preference).
Now we Code 🐱💻🤖!
Now we are all ready. Then why wait, let’s code!
First, let’s create the refresh_bloc_event.dart file.
After that let’s create the refresh_bloc_state.dart file.
Then let’s make the refresh_bloc_bloc.dart file.
Next, let’s create the IntendedPage widget separately in the intended_page.dart file. This is the widget where we are calling the RefreshIndicator widget. To the onRefresh variable of the ‘RefreshIndicator’’, we pass a function calling the RefreshEvent in the RefreshBlocEvent which will be called when we pull down to refresh. Don’t forget that function we are passing should be an async function.
Finally, let’s create the home.dart and main.dart files respectively(these files may change depending on your project; therefore add this functionality accordingly).
Now all the coding parts are done. Let’s run the programme 👨💻👩💻!
Here I have used three important keywords, async, await and yield. If you want to learn more about those keywords please refer to this link.
Github link to the code shown in the article 🐱👤
If you need to study the code further, you can find this code shown in the article in this GitHub link.
Conclusion ✌
This is the end of the article. Before I finish I want to say, if I have made any mistakes or if there is an easy way to do this, please add a comment below about it. If you find this article useful, feel free to share this among your friends and colleagues.
Thank you, HAPPY CODING! 👩💻👨💻And STAY SAFE! 👨⚕️👩⚕️
