Тёмный
No video :(

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

Flutter From Scratch
Подписаться 1,9 тыс.
Просмотров 34 тыс.
50% 1

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: github.com/flu...
Enjoy the video? Say thanks by buying me a coffee: www.buymeacoff...
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

Опубликовано:

 

13 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 105   
@dimitristotsios2292
@dimitristotsios2292 2 года назад
It is very pleasant to watch videos like that, to the point and praktical examples. The only thing I'd like to see is to make the code larger to be clearer. Thank you.
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
I'll keep it in mind for next time, thanks Dimitris!
@Septix
@Septix 2 года назад
Just wanted to say thank you for such a quality tutorial and not plopping sizeable code bites out of nowhere, more Bloc content would be awesome!
@bmwgang7611
@bmwgang7611 2 года назад
Amazing video!! Love that you use the latest version of bloc, there are so many outdated videos out there and I would love to see more bloc 8 content!
@alanbosco7174
@alanbosco7174 2 года назад
This was one of the best Bloc - Network content i ever see on RU-vid . Clean and neat 🌟
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
Thanks! I look forward to uploading more in the future. Just a bit light on time at the moment.
@constantinLu_
@constantinLu_ Год назад
Best explination of the BLOC package from the internet. Thank you
@422raziel
@422raziel 2 года назад
Very nice video! Just some small quick tips: 2:25 - You can right-click on the folder -> Mark directory as -> Unmark as Sources root and they will be named Folders ~ 4:15 - I think that those generally are named models ~ 4:20 - You can scroll click and drag to select multiple lines vertically Really nice info around 15:10 didn't know about it, but just using it as default.
@bennettemolepo6741
@bennettemolepo6741 2 года назад
Awesome video, this helped me to build my first ever flutter project following the BLOC
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
Thanks! Bloc can be hard to learn so I'm glad it helped
@ladonskliarov535
@ladonskliarov535 2 года назад
It's better than all RU-vid videos about this topic, you're the best! Thank you! Cool idea, cool example!
@albertussindhu3909
@albertussindhu3909 2 года назад
your video cover all my questions hahaha... keep doing that dude.. also maybe you can upload make video about project ecommerce using bloc v8...
@makisetakashi
@makisetakashi Год назад
This tutorial is so good, thanks man for helping us as newbie to easily understand the BLoC
@flutterfromscratch9913
@flutterfromscratch9913 Год назад
Thanks! I need to make some time to record some more resources
@iAnguel
@iAnguel 2 года назад
Hi, thanks for your BLOC v8 tutorials. I am new to Flutter and what I am trying to build now by using BLOC is a flutter raw TCP client talking to some raw TCP server using the dart:io Socket class. This can be for controlling some local home automation device. Probably pretty simple if you know how to do it, but as I am new to Flutter it is still a challenge for me. In the good old days when I learned Java, books were full of raw TCP examples, but now in the modern days of http and websockets I can't even find a good example of using a raw TCP socket with the lower level Socket class in flutter, including error handling. Looks like this is something that is not the "typical" Flutter project you see in every tutorial out there but I think BLOC is really a good fit here. So if you are looking for some project ideas, maybe this would be interesting not just for me but also for other people who may want to control some devices over LAN. The basic idea is: In the UI you enter a server IP and a port, the client then connects and opens another screen, then you enter some temperature or other value or push a "light on" switch in the UI. The flutter client will then send raw tcp commands to the home device server (e.g. "settemp 25.0" or "light on", terminated by for example) and the server will reply with "OK " or some error if the value is outside the limits. Querying the current temperature from the server periodically is also interesting. If a communication error occurs this should of course be caught and appear in the UI.
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
I could make a video like that ☺️ I’ll add it to my list. If I am to be totally honest though, I think it could be a fairly niche topic, but worth covering. Would you consider commissioning a video covering this topic?
@hunter2473
@hunter2473 2 года назад
This was an awesome video! I can't thank you enough for how much this has helped me to learn how to use BLoC 8.0!
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
Thanks!
@rozpodev
@rozpodev 2 года назад
Please keep going, straight to the point explanation about the bloc. You know what you are doing, respect :)
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
Thanks Piotr! I'll post some new videos soon. Just been short on time lately.
@nathanmersha5295
@nathanmersha5295 2 года назад
One of the best flutter_bloc tutorial I have found.
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
Thankssss
@ketansatani1191
@ketansatani1191 2 года назад
Thanks, man. You saved me. The Multirepository OR Repository provider was not added in my _MyAppState and I was getting errors for null and type cast. Now it's gone.
@alaasayed6508
@alaasayed6508 2 года назад
it gets error and still at loadingstate if u open the app without connection with wifi what is the best way to solve that
@md.ruhulamin7963
@md.ruhulamin7963 2 года назад
Thank you sir. BLoC 8 is very interesting.
@celestinoloopes
@celestinoloopes Год назад
Thank you sir, your explanation is very easy to understand . Great tutorial !
@harshbsv
@harshbsv 2 года назад
Precise, and straight-forward. Thank you for this video!
@sandeepv933
@sandeepv933 2 года назад
It's a clean, simple, detailed, and understandable video. Thanks a lot for the video this will help me build a better flutter app.
@yosua7893
@yosua7893 2 года назад
This what i was looking for, i'm new to flutter, Thank you, Sir.
2 года назад
Thank you bro. Very helpfully video. Please continue make videos.
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
Thanks Savas!
@marlonvonansale6457
@marlonvonansale6457 2 года назад
Loved your tutorial cheers
@TheSclare
@TheSclare 2 года назад
Hi mate. Many thanks for the video. You're good at teaching. By the way, prefer using snake_case instead of camelCase when you name folders and files. Keep it up!
@yakupbaser6423
@yakupbaser6423 2 года назад
Amazing tuts! Waiting for flutter_bloc from scratch (:
@masihkarimi5952
@masihkarimi5952 Год назад
Thank you for the amazing videos, I watched so many videos about Bloc but all of them very so complex but by the help of your videos now playing with Bloc is fun!!! Just one question what if I want to save the API response to a local database like hive or isar how I can achieve that???
@NoBodyknow172
@NoBodyknow172 2 года назад
Can we have video about pagination api for fetching data and show it bloc commusmer and there thing
@baguzzzaji6097
@baguzzzaji6097 Год назад
We might need connectivity check on other pages as well. Should we make a dedicaated bloc for it or calling it on every other page's bloc?
@nicoaudy
@nicoaudy 2 года назад
Hi, what about catching an exception from http? like 404 api not found. Thanks
@sasaleniyan7595
@sasaleniyan7595 2 года назад
This is articulate and precise...thanks alot
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
Thanks so much!
@reiaxel8285
@reiaxel8285 Год назад
thanks sir, really appreciate, very helpful
@higorgustavobarbosadasilva9624
@higorgustavobarbosadasilva9624 2 года назад
You are The Best Man. I'm from Brazil. Thanks for your help and light. For suggestion, could You please make a vídeo about login/signup with simple things (not with dartz or freezer or nothing complex). Just You, US, flutter and bloC library... Hehe
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
It's a good idea. But where would the user register or login to if we're just using bloc? Or do you just want the user to create a local account within the flutter app?
@lowlydeveloper3693
@lowlydeveloper3693 2 года назад
Personally, I am in a different boat. There are tons of beginner level tutorials with a use-case you've described (and don't get me wrong, everybody starts a beginner, so there is nothing wrong about that... ). However, there are comparatively few intermediate and advanced Flutter tutorials, and youtube channels -- so I am always on a lookout for those more advanced tutorials (like dartz, or any other functional programming; and freezed, which is an amazing package to streamline your development and improve quality of your work.) The real-life app development, after the introductory level courses, that's my preference.
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
I hope to get enough time to produce entry level and advanced videos 🙂I've added a link for donations via buy me a coffee to hopefully offset some costs. Optimistically if I can turn this into a small income then I can take more time in producing video guides on topics like these.
@victortanpengshen6454
@victortanpengshen6454 2 года назад
Hi, does anyone face the problem the state is loading in HomeLoadingState and unable to get the api data?
@niravpatel1056
@niravpatel1056 2 года назад
So nicely explained. Thanks a lot 🔥
@tarikulislamtuhin5544
@tarikulislamtuhin5544 2 года назад
Could you tell me what is the difference between bloc patterns like stream controller, sink, etc and flutter bloc package?
@Abolfazl-MI27
@Abolfazl-MI27 2 года назад
Hi , I relly like your viedos and your explataination , please make series for bloc ! ,there is no simple video one is old ! one is used so much complex code that make me very sad about bloc,please if you can do it
@goldenlife6166
@goldenlife6166 2 года назад
Hey your videos are fresh and energetic
@keanallen
@keanallen 2 года назад
Unhandled Exception: LateInitializationError: Field 'connectivityStream' has not been initialized.
@ashutoshtiwari6104
@ashutoshtiwari6104 2 года назад
Awesome work brother .
@uvaismohammad4216
@uvaismohammad4216 2 года назад
Very Useful ❤❤❤.... Waiting for more from you❤❤❤
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
More to come!
@yashagarwal4681
@yashagarwal4681 2 года назад
I'm getting a rethrow error while running this in bloc.dart
@jrblues
@jrblues 2 года назад
Awesome, I subscribed! I have been using Cubit instead of BLoC for my API requests, do you think its a better practice to use BLoC or no much difference at all?, I care about making my code as clean as possible.
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
Typically I only use blocs because they are the most flexible but also require the most boilerplate... But I don't really mind that to be honest
@EditorConlee
@EditorConlee 2 года назад
Nice video, thank you very much. Can I ask, would it be possible to simply provide the onConnectivityChanged stream directly, instead of piping it into another stream? Just trying to get my head around best practices, etc.
@tarikulislamtuhin5544
@tarikulislamtuhin5544 2 года назад
Could you please tell me how can we use streambuilder in this code ?
@akmalahmed4660
@akmalahmed4660 2 года назад
Awesome tutorial, thank you very much ❤
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
You're welcome 😊
@antonguinto7013
@antonguinto7013 2 года назад
Thank you kind person
@programmingnight
@programmingnight 2 года назад
Great tutorial. Thanks. Can you make another flutter bloc app with testing? app like e-commerce app.
@jewelrana6546
@jewelrana6546 2 года назад
If i close the then the internet connection check not working.
@jeanfrancaise
@jeanfrancaise 2 года назад
Nice Teaching! Subscribed!
@bhardwaj_abhi3421
@bhardwaj_abhi3421 Год назад
very useful video for me
@AlexJohnSuarez
@AlexJohnSuarez 2 года назад
You have to calm down a little bit, your tutorial is on "fast mode" 2x,3x. but all in all content is awesome.
@flutterfromscratch9913
@flutterfromscratch9913 Год назад
Ah thanks. I think I'm just excited for Flutter haha. Are there any parts in particular that I should detail more?
@timatikgz5310
@timatikgz5310 2 года назад
Bro hello) I have question. how you dispose connectivity stream or it's okay leave that ?
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
You should definitely dispose it. You set up a reference to it and then call dispose in the bloc. I'll show how to manage it another video 😊
@iwannabewithyou2168
@iwannabewithyou2168 2 года назад
I am getting data from an api and when its loaded i want to go to another screen. How could I do that?
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
I can make a video about that? Seems like a topic I could cover
@LeoTechy
@LeoTechy 2 года назад
You are a God Bro👌👌
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
No no, just a humble software developer 🙂. Glad the video helped.
@LeoTechy
@LeoTechy 2 года назад
@@flutterfromscratch9913 keep it up bro.. You earned a subscriber and i have shared your video with my colleagues
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
Thanks leo. I've also added a link to Buy Me A Coffee in the video description incase you wanted to kick in some funds. Making videos takes a lot of time and the more donations I get means I make more videos on Flutter and bloc. No pressure though!
@NoBodyknow172
@NoBodyknow172 2 года назад
Thanks for your lovely video
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
Glad you liked it ☺️
@NoBodyknow172
@NoBodyknow172 2 года назад
I wait long for this tutorial in newer version but old had issues of null safe problem and articles related to was not updated to newer library .
@hussainkkt934
@hussainkkt934 2 года назад
Great video 👍
@lorenzosala3527
@lorenzosala3527 2 года назад
Thank you so much! Excellent teacher
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
Glad you liked it!
@lorenzosala3527
@lorenzosala3527 2 года назад
I’m doing my thesis this year, and we’re definitely using Flutter for our project. Do you recommend using bloc?
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
@@lorenzosala3527 Your thesis is really important, so, I'd feel bad if I recommended something definitively with that at stake. However, I've been using the BLOC pattern for years now and I think it strikes the right balance between ease of use and configurability. Plus, the Discord channel is amazing and the guy who made flutter_bloc hangs out there and helps internet strangers with their development problems. Ultimately it's up to you, but if it were up to me, I'd choose flutter_bloc. If something bad happens and you tank your thesis because of flutter_bloc I accept no responsibility however. I hope it goes well though!
@lorenzosala3527
@lorenzosala3527 2 года назад
@@flutterfromscratch9913 Thank you. I’ll definitely dig more into bloc. I was used to GetX but it’s not good for big projects.
@hackhunter854
@hackhunter854 2 года назад
Explicas muy bien
@user-ks5rv8wz4w
@user-ks5rv8wz4w 2 года назад
thank you are this working with stream real-time ?
@mohammadalqaisi238
@mohammadalqaisi238 2 года назад
ty man
@tremaynemushayahama1658
@tremaynemushayahama1658 2 года назад
Hard to see, like a blurred text, but a promising good tutorial.
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
Thanks, still sorting out my recording setup, so the next tutorial will be a lot clearer.
2 года назад
been trying for a couple hours to get that "create bloc class" button. how the hell do you get that?
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
Sorry for the late reply - it's part of the bloc package for Android Studio. Did you install that?
2 года назад
@@flutterfromscratch9913 ​ ups. no. how do do that? I only added the dependency
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
plugins.jetbrains.com/plugin/12129-bloc 🎉🎉🎉
@hemanthkotagiri8865
@hemanthkotagiri8865 2 года назад
Suggestion: increase font size. Wherever applicable.
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
I'm going to work on visibility for my next article 🙂
@faizulla5838
@faizulla5838 2 года назад
Ты Красавчик!!! Спасибо из Казахстана )). Broo Thanks a million!!!
@MuhammadSadiq-bw6nv
@MuhammadSadiq-bw6nv Год назад
super
@dipak1
@dipak1 2 года назад
Thanks.. I subscribed :)
@NoBodyknow172
@NoBodyknow172 2 года назад
CAN we fetch the multiple api inside your code.
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
It's certainly possible. What API are you trying to use?
@freakygamers7425
@freakygamers7425 2 года назад
where can i get the Api?
@pashayasinskiy6133
@pashayasinskiy6133 Год назад
why is model inside service file?
@carlosreyesg.6275
@carlosreyesg.6275 2 года назад
hey great video, what's the difference between create a package and folder?
@flutterfromscratch9913
@flutterfromscratch9913 2 года назад
Nothing actually. Android studio calls them packages because of Android development
Далее
101 Weird But Useful Minecraft Hacks
48:36
Просмотров 4,2 млн
НАША НАСЫЩЕННАЯ ПОЕЗДКА В КИТАЙ
1:32:55
Flutter Important Basics - Lists, Maps and Sets
9:03
Просмотров 3,7 тыс.
Flutter State Management - The Grand Tour
14:07
Просмотров 240 тыс.
BLoC Pattern with Flutter || State Management
22:50
Просмотров 95 тыс.
How to Do 90% of What Plugins Do (With Just Vim)
1:14:03
Просмотров 887 тыс.
НАША НАСЫЩЕННАЯ ПОЕЗДКА В КИТАЙ
1:32:55