Skip to content

The network

Add your feed Account Follow @itsallwidgets on X (opens in a new tab)
Videos
Video

How to use API's in your Flutter BLOC Project - UPDATED 2022 (flutter_bloc v8)

by everyDev youtube.com

25 min 34.2k views

Watch on YouTube

Hey there! I've had a request to create a video on how to use API's in your Flutter project when you're using flutter_bloc. In this video, we use the "Bored API" as our endpoint to retrieve a JSON response, and then we use QuickType.io to generate our JSON serialisation/deserialisation logic. We then map the response to our UI, and give the user the option to refresh the page if they want to . Finally, we bring in connectivity_plus to detect if the user is offline, and prevent them from using the app if this is the case. I make a typo later in the guide where I accidentally declare a variable 'late' where I meant to declare it final, but I've highlighted that accordingly, and should work as shown in the video 😀 Sample project: https://github.com/flutterfromscratch/bloc-v8-apis Enjoy the video? Say thanks by buying me a coffee: https://www.buymeacoffee.com/flutterscratch 00:00 - Intro 01:03 - Creating the sample project 01:18 - Setting up dependencies 01:43 - Looking at "Bored API" 03:20 - Generating our API Client with QuickType 04:45 - BLOC - States 05:51 - BLOC - Events 07:15 - Including the http package 07:32 - Creating the BoredService 09:28 - BLOC - Business Logic 11:00 - Bootstrapping the BLOC package and dependency injection 11:40 - Creating the UI 13:10 - BLOC - BlocBuilder 16:05 - Running the sample app 16:33 - Adding a refresh button 18:05 - Bringing in connectivity_plus 20:48 - Connecting connectivity_plus into our UI 23:56 - Sample app with connectivity_plus 24:30 - Conclusion

Forum

Questions about this, or something to add?

Discuss on the forum

Topics Bloc

More like this

Report this · Wrote this? Claim it

Supported by