#11 - Maintaining Flutter Application State with Hydrated Bloc

Hi there!
Here's the github repository where you can clone all the source code:
github.com/The...
In this tutorial I will introduce you to one of the most important pillars of app development in Flutter - managing app state! Today you'll learn WHERE and HOW Hydrated Bloc stores app data. Hydrated Bloc is another amazing dart library which works amazing in conjunction with the already well-known Bloc Library.
All animations were done in VideoScribe, you can try it by clicking my affiliate link --- www.awin1.com/...
You can contact me directly here:
Join my Discord Server --- / discord
Twitter --- / letsgetwckd
Instagram --- / letsgetwckd
Also, if you want to support me furthermore you can become an KZbin Member, donate or buy my courses on Udemy, using the following links:
Become an Official KZbin Member! ---- / flutterly
Buy my Udemy Courses! ---- www.udemy.com/...
Support me on Revolut! ---- revolut.me/let...
Buy me a Ko-fi! --- ko-fi.com/wckdyt
Donate me on Paypal! --- www.paypal.me/...
Support me on Patreon! --- / wckdyt

[@Flutterly]

Hello, everyone! The entire course is now live on Udemy too, get it while it's hot --> www.udemy.com/course/bloc-from-zero-to-hero/?referralCode=E689592633984B34DBEF Also I have just managed to finally finish the entire BLoC - From Zero to Hero Complete Course, based on this tutorial series. You can check it out here -> kzbin.info/www/bejne/inmmnJ6HYrtkY5o

[@hidayatnoradzmanhisham9726]

For the past 2 days, listening and applying for a free course with your videos are very worthy than the paid course that I had entered. This is a 1000IQ explaination and very priceless information. Keep going Mr. WCKD! If you have any paid courses on any platform like Udemy, I'm willing to pay for more advanced tutorials.

[@Flutterly]

Haha, thank you so much! ✨ Nope, I'm not a fan of platforms like udemy, my tutorials will be always free 👍 free doesn't mean low quality either way, I'll try my best to tell you what I know

[@VictorKun]

I could've never imagined of getting an explanation so clear of BLoC and practicing BLoC with bloc pattern so efficiently... Thank you so much for such clear explanations :)

[@imankamali5799]

As always amazing 😍😍😍 But I'm still waiting for a project-based tutorial on how to use them 😇😅😁

[@ersanyamarya]

I have been trying to develop a personnel app with flutter. Tried a lot of videos from the famous flutter youtube. But, I must stay, You are the best. If someday I host a youtube channel, I'll try to teach as you do.

[@Flutterly]

Thank you so much, man! I really appreciate your feedback!

[@ersanyamarya]

Can you make some tutorial using getit dependency injection and also firebase.

[@navarasan8264]

You are absolutely rocking with the new videos of bloc.. surely this is one of the best series I've ever watched 👍

[@Flutterly]

Thank you so much! ✨

[@abdullahalamodi5455]

welcome back 😍 , we are waiting your real project 😊

[@Flutterly]

Thanks! 🌟

[@aurelagbodoyetin3321]

You make it simple to understand 💥 Thanks Wckd Merry Christmas 🎄

[@Flutterly]

You're welcome, man, merry Christmas!

[@puspharajselvaraj8852]

Nice, another one which I was expecting.

[@raul286162]

I'd love to see a video explaining how to mock an HydratedBloc in unit test

[@abdurahmon2827]

Thanks for best tutorial to understend flutter bloc

[@Shakl-e]

wow, you've handled almost all my question since #1

[@Flutterly]

I'm glad, brother!

[@Shakl-e]

@@Flutterly One more question: when I use bloc, the library docs tell me to use such structure: UI - Bloc - Repo - ApiClient, so the methods are in the repository. When using cubit, there are functions inside which can handle most of the logic. So should I have repository when working with cubit and what methods then should be there and which in the cubit itself?

[@Flutterly]

The repository should be the one doing the major work, all you need to do inside the cubits is to retrieve the work that's been already calculated by the repository.

[@pedrodelacruz2369]

Thanks WCKDI!!!! That's a powerfull package. I will implement on my proyects

[@Flutterly]

You're welcome, man, glad I could help!

[@cveklica]

you make it look so simple 🤩 thank you 😊

[@seanonuoha4303]

Wickd for president!🔥

[@bhuvanesharasu]

Thank you for this awesome tutorial :)

[@Flutterly]

Thank you for the amazing feedback! ✨

[@syaefulamri411]

i tihink you should add tutorial about 'how flutter_bloc can fetch data from internet' amazing works btw thanks

[@Flutterly]

New series will come soon! Thanks! 🌟

[@behradx]

Dude, you are a godsend!

[@suhaglal6526]

That is well-explained thanks a lot

[@Flutterly]

You're welcome! Thanks! 🌟

[@حسينش-ك7ج]

i'm happy

[@martinpellicer8489]

I have more than 6 hours trying to implement HydredBloc, the documentation of the package is extremly poor. Your video is amazing, understood how it works, but I still can´t get it working after trying all. I put a breakpoint in the fromJson @Override method, the method is called fine, but the toJson method is never called, so the data is never persisted. When is suppoused that HydredBloc call the toJson? I thought that was in emit function but is not working, maybe becasue I am using copywith in emit?

[@ottenhaus]

I have the same problem... did you fixed it?

[@MohamedAbdallah-oh4ux]

Great video Keep it up 💪

[@Flutterly]

Thank you, man!

[@islomkhujaakhrorov6668]

Respect ) Rahmat brat)

[@ahmedadnan5875]

thanks it was a good explanation

[@Flutterly]

You're welcome, man, thanks! 🌟

[@thomasmabika7291]

great video. Could also have covered how to reset/clear the state from storage.

[@Flutterly]

What do you mean by resetting the state from storage? There will always be a state present there, depending on which one is lastly emitted by the bloc/cubit. So it would already override the previous one. To reset the entire app data you can go into android settings and clear the data of the app there.

[@thomasmabika7291]

@@Flutterly in the video you saved the counter value to disk right? meaning, if we kill the app, we'll always get the last counter value. While this is great, what if we want to start with the initial value of zero? what if we want to save the counter value temporarily maybe while the app is in the background but want to reset it..start from zero when the app is closed? is there no way at all of clearing the state and start from the real initial value?

[@Flutterly]

I think what you have in mind is a personalized way of the Hydrated Bloc, so you can store/access data depending on whether the app is running, is in background or is killed. For that, you may want to take a look at creating a custom storage for the Hydrated_Bloc. It's the last paragraph from the plug-ins page here pub.dev/packages/hydrated_bloc

[@gedeonyala6836]

thanks so much for this video

[@saliouseck4263]

Thank's for the video very interesting

[@stefandewit2966]

Good job! :)

[@Flutterly]

Thank you so much! ✨

[@tomekczajka5165]

Very nice

[@ashrafabdo5461]

excellent

[@himanshugupta3897]

Thanks man.. As seen from other comments too.. I am eagerly waiting for the full app tutorial. As for this one.. I have a question.. Since I am on the beta channel, along with the app i am usually working on the website part as well to be run on browser. How will this hydrated bloc work with browsers? Will it cache somewhere on my hard disk or something?

[@iDataLabFr]

Thx for these tutorials. How to use Bloc with list of items from Firestone?

[@Add0w]

Thanks bro, I understand more but I would like real example of this hydrated like storing token and retrieving it or over riding . thanks again.

[@Flutterly]

What do you mean by storing a token? You could just put a token field inside a state of a bloc/cubit and whenever that state is pushed on the stream of states, it will be saved to the storage via Hydrated Bloc.

[@Add0w]

@@Flutterly yes that is what I understand thanks but what I am asking is removing when the user is logged out for example.

[@Abhishek-ko2wr]

Yet again a great video and explanation (as ALWAYS!). I just had one question, please help me with it-> What is a factory method? In CounterState class, why the toMap() and toJson() function doesn't need a "factory" prefix whereas the fromMap() and fromJson() does? What does putting "factory" do? Can you please help me with that. Thanking you already!

[@Flutterly]

It's like a static method, you can call the function without an existing instance. Just like we did CountryState.fromMap(). If it wouldn't be factory, we had to firstly create a countryState instance, then call countryStare.fromMap() on that instance.

[@Abhishek-ko2wr]

@@Flutterly It all makes so much sense now! Thank you soooooooooo much!!!

[@hirakhax]

Factory returns new instance of that class everytime...

[@kasimsalmani7354]

Hey! Mr. WCKD you are an amazing. Can you please suggest Flutter Learning Path and Backend Problems also there are many ways to do in Flutter but as you suggest that bloc is better than provider. So Please guide us something on Backend Options in Flutter. Which is better Option like Firebase, Moor, SQLite Etc. It will also help to the peoples as you already doing. Thank You!

[@Flutterly]

I'll cover then in future series, man!

[@AyushSingh-ux5oi]

What are the tradeoffs, does this library ( since using storage) makes our app larger in size?

[@Flutterly]

Absolutely no, it is just an alternative to a local fast database.

[@itsLarryAlright]

Hi WCKD, Nice tutorials really been helpful in understanding bloc library. However I m having a bit of an issue with bloc library; when i try to combine authentication and generated routes. would you mind doing a video on user authentication and authorization using bloc, bottombarnavigation and generated routes

[@Flutterly]

Will do in the future series, thanks!

[@aminelahrim8142]

I have a question that I didn't found it on any website is to create a bloc and have lot of arguments that use Rxdart Subjectbehavior and want to listen for change in UI for specific attribute with context. Watch and context. Read not 1/wrap all the arguments inside a state class that means any attribute change will affect the listener for other attributes like listen for list of users if change will affect change for list of supervisorUsers for example or 2/sperate each attribute with state class that make boiler code and please could you make a tuto for rxdart with new bloc version no one in the internet do it and is so familiar with devevloper that coming from web and ReactiveX programming wish you best luck ❤️❤️❤️🙏

[@notfound521]

Is the min 3:35 bridge the real live Bristol Bridge? 😁😁

[@Flutterly]

Yep, it seems like that's it haha 😂

[@notfound521]

@@Flutterly Another high quality content video; keep it going man!! You're killing it!

[@nazar949]

thanks

[@StefanoV827]

Really amazing! 😍 One question about it: what if i want to check (only in one cubit), if i have something changed in the repository? Example: i have the LoginBloc for the authentication, then i will store the LoginState with Hydrated, so the user can be automatically logged in opening the app. But what if, using the website backend or another smartphone, he changed the password or the email or any other field of the login? I have to check if the login is still valid (for example checking if i have a new token for that user) before restoring the preview state. How can i achieve this? Can you make a video about this if it's to long to explain here? Thank you so much! :)

[@Flutterly]

You can check it into the fromJson() overridden method, inside the bloc/cubit, man. For example, only return the stored value if the token of the user hasn't changed. You could make a method called verifyToken() in which you're verifying the integrity of the user, and then, inside the fromJson() method all you have to do is write an if statement, if(verifyToken() == true) then return BlocState.fromJson() (restore stored data), otherwise, log out user and make him log in again.

[@StefanoV827]

@@Flutterly oh thank you. That's amazing to know. 😊😊

[@batuhankrbb]

Hello, thanks for this great tutorial! I have a question. For example, I have a bloc that has 3 states (Loading, Error, Loaded(data)) and I only want to save and get loaded state. If the app closed during reject or loading state, I don't want to store it. And also when the app opened, I only want to get Loaded state if there is. How can I do it? I've been thinking about 15 minutes but I couldn't find any solutions without writing empty toMap and fromMap methods to all states of the bloc since.

[@batuhankrbb]

Actually, I found a solution which is controlling the type of the state as we do in mapEventToState method and if it is a Loaded state, we cast it as LoadedState so that we can access fromMap and toMap method of it and we don't need to add these methods to the abstract state class and we don't need to override empty methods in all states. But I'm not sure whether it's the best solution. Please let me know what you think. Thanks!

[@singgihputrapratama]

I have a problem with bloc. How do I use the "like" logic between pages without global bloc? Suppose a user likes a post on page A. Then they go to page B and will see the post has been liked. However, the posting results between pages A and B are sometimes different.

[@Flutterly]

They can't be different, you're doing something wrong when providing it to the next page. Anyways, I recommend you to provide them globally, it's much safer and easier to understand.

[@TheMyshreyash]

Thanks for this content great video,was waiting for this one. I have a doubt which is I am calling a function in the cubit constructor to fetch the api as soon as the cubit is initiated but that function is called even after the hydrated bloc stores my value in the database. Is there any workaround where I can check if the hydrated bloc has stored my state then I won't call the function. Thanks for the video once again

[@Flutterly]

I don't quite understand. So, you must have a state like DataLoaded with the fetched data from the app, state which will be emitted from the cubit right after the cubit is created with the constructed. So everytime you open up the app, the cubit will automatically fetch, emit a new loaded state therefore rewriting the existing data with Hydrated Bloc. If I didn't understand correctly, please let me know, or give me the part of your code you're having an issue with. Thanks!

[@TheMyshreyash]

@@Flutterly Yaa sure y not where can i show u the code so you can get my scenario

[@Flutterly]

I think I got your idea, you may want a custom Hydrated_Bloc, check out the last paragraph on the official page here pub.dev/packages/hydrated_bloc

[@TheMyshreyash]

@@Flutterly Yaa sure will check. Thanks . Can u clear my one doubt which is i want to fetch data from an api so i call that function inside the cubit constructor. Is that the right way or is there any better way bcoz I dnt want to call that function instead I want my hydrated bloc storage data to be displayed if it's present or vice versa

[@Flutterly]

It's ok to fetch them into the constructor. What you can do inside the cubit's fromJson() method is to write an if statement like if(json!=null) then restore the already existing data. Json is not null is equal to asking if there is any data stored, then restore that data. But if there isn't, I guess you could call the fetch() function inside there, in the fromJson() method.

[@davidlewis195]

Would you use this in place of or along with Shared Preferences (for boolean values like firstTimeLaunch or darkMode)?

[@melomanzer5508]

Hi. Nice video. Is it possible to use this library on offline mode ? I mean when we have no internet can we use this library to retrieve stored Data? I'm actually using hive to do it. Thanks

[@Flutterly]

Of course you can, it can only read/write the local app storage, so it won't have anything to do with the internet connection.

[@Bathusaix]

How many videos will this series contain?

[@Bathusaix]

great series the best I've seen

[@Flutterly]

Thank you so much, man! It will contain 1 more and then it will be done.

[@Bathusaix]

@@Flutterly I've spent a lot of time trying to understand the block, especially the part of google maps and other things related to chat .... I haven't seen the complete series yet but it looks promising I need to define my status management ... I use mobx and block but i don't want to use both

[@Bathusaix]

@@Flutterly what theme does vscode use?

[@reshnuchandran6698]

in Bloc Hydrated Bloc or Shared preference which one is best ?

[@Flutterly]

Definitely Hydrated Bloc!

[@GabrielCosta-xr5vr]

Great video as always! Thanks for uploading! I have two doubts about hydrated bloc : 1) I used to store the user's Config using local storage and then getting the data when the app starts. So with hydrated bloc I don't need this logic anymore, right? 2) My app uses a local database (moor), now every time the user open the app I get from the database the data for the screens. With hydrated bloc I don't need to do this getting in the app start, I would only need to get the data from the db when new entries was inserted/updated on or for some blocs that I don't want to store. Is this right? If so, is there any performance issues with doing that? (I think that getting a json is faster than consulting the db, but I don't know if there are any hidden issues)

[@Flutterly]

1. That's correct! 2. Yep, that is correct. There won't be any performance issues, you would get the last know data of the app right with hydrated bloc and if you need to update it with info from the database, you may add a pull down to refresh feature. The thing is that hydrated bloc is made to maintain THE STATE of multiple blocs/cubits, that's what you need to have in mind. So all you can save is the state which, of course, may contain most of the app data you're retrieving from the db.

[@GabrielCosta-xr5vr]

@@Flutterly thanks for answering! Wow, so hydrated bloc will help a lot! Thanks for explaining it!

[@drdrunkenzteine]

I try to persist a list, it got stored but it is not being initialized during startup. How can i display the list during startup and set it as the initial value of the list?

[@drdrunkenzteine]

I already solved it. Thank you.

[@notfound521]

Is it possible to use hydrated bloc to store any kind of data? Or just states?

[@Flutterly]

It was specially designed for storing states, since all the data used by a bloc-driven application is stored inside states.

[@notfound521]

@@Flutterly Yes but if I just want to save a particular record propery (for example the number of my records, like you'd do in web app's local storage) can I do it with hydrated bloc? It would just be ok by using Hive?

[@amansingh.h716]

hi what can be usecases for hydrated bloc

[@yanischetouani7392]

hello , we can store only a json format ? what about pictures and videos ?

[@Flutterly]

Pictures and videos needs to be stored on the storage of the device rather than inside the apps own internal storage. It can't be done with Hydrated Bloc since all Hydrated_Bloc does is store states in the form of a json.

[@yanischetouani7392]

@@Flutterly but how facebook for exemple store data (videos ,pics ) in the app storage .. is there any packages that i can use to store pictures in app storage and use them when going offline for exemple ?

[@Flutterly]

Image picker package from pub.dev

[@NurulIslam-dw8yp]

Isn't it bad to store data in storage in each event rather than only when app is killed

[@keithbacalso9433]

I cannot get the ctrl + . of Dart data calss generator.... all I get is Bloc Provider all blocsss. I am using MAC

[@Flutterly]

You should install the Dart data class generator extension in vscode

[@keithbacalso9433]

@@Flutterly I already did.. it wont appear, I also have Bloc extension downloaded and only the Bloc's appeared

[@Flutterly]

Then I don't know, I'm using windows so unfortunately I can't help you much more, maybe you should try alt +., or command +., I really don't know.

[@AFTstorm]

this doesnt make sense. How do i know what the state is if i can have multiple types of states with different variables in them

[@marufhassan634]

So basically Hydrated Bloc is kind of a SharedPrefernce

[@Flutterly]

Kind of a more advanced and faster one, but yes, in big words, yes. I even use it as a local database for my non-sensitive data to be honest.

[@marufhassan634]

@@Flutterly Can you elaborate on what kind of data you store? I was thinking of keeping the dark mode theme and some settings like languages. Can I store something else?

[@Flutterly]

Every kind of data like for example if you're requesting some data from an api like countries, stats etc, I usually save them with Hydrated Bloc to the storage

[@ashmaei]

Thanks