#10 - Bloc State Not Updating - Comparing 2 objects in Dart, Equatable Package, How to Fix Issue

Hi there!
Here's the github repository where you can clone all the source code:
github.com/The...
In this tutorial I will explain to you why it's important to understand how Dart compares 2 objects in different scenarios. Understanding this will eventually help you fix a well-known issue some of the new bloc users encounter while working on their projects - the problem in which the state of a bloc/cubit won't update anymore. We'll take a look over the most frequent mistakes users make regarding this topic. As a bonus, I'll introduce you to Equatable package! Enjoy!
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

[@bayanhoms8532]

till 2024, there is no best tutorial elaborates bloc concepts clearly as this tutorial. Keep up going!

[@muhammadshahzadakram7742]

WCKD is a lifesaver 😍. I was so frustrated with the State Not Updating thing and Now I know the correct way to do it. I am glad I had notifications turned on 🙌.

[@Flutterly]

Haha, thanks! 🌟 Glad I could help you understand more!

[@Tokieejke]

you content so underrated. so i decide to write comment with nice length to support you. keep going u do a great work for all flutter community!

[@Flutterly]

Thank you so much 😀

[@williammutua]

These are by far the most informative Flutter state management tutorials, looking forward to more content from you.

[@Flutterly]

Thank you so much, man! Really appreciate it!

[@opressedrage]

This video is a lifesaver i was mutating the state the whole time and asking my self why the UI not working Thanks man for saving me you desurve my like and subscribe ❤

[@iNFiNiTY-yf3rk]

Duddeeeeeeeee 🔥🔥🔥🔥🔥🔥🔥 I am so much grateful to you. ❤️ Much much love from India. You are a life saver.

[@Flutterly]

Thank you so much, mate, really appreciated!

[@MikeKeiler]

By far one of the most useful tutorial series I've every watched for flutter! 💙 Please keep up this great work at this excellent quality. I've "binge watching" this tonight, could not stop at all 😉 Personally I'm using BLoC now for more or less one year, also productive, but still, there are so many helpful informations in your tutorials. Some interesting topics for me (and I can imagine also for other people) would be: * Explain why the class in a bloc state is "abstract" and whats the difference between abstract and non abstract? * Is it okay to use context.watch() really often in one page? like 20 - 30 times? Or does this impact the performance of an app? * Should I now generally prefer using context.watch over a BlocBuilder? I can't wait to get to the next tutorial, and maybe soon to the Bloc tutorials with Event Streams. Thanks a lot for sharing your knowledge!

[@Flutterly]

Wow, such an amazing feedback! Thank you so much, mate! I really appreciate it! I can quickly answer to some of your questions, since they don't really need an entire video. So, let me begin, haha. 1. Abstract class is, like is name is implying, something abstract. It's not really "detailed", it's something blurry. It's like a global type of class, from which other small classes derive. In your case, you saw in this tutorial that when we have only one Settings State there's no need to create an abstract class, but when we'll have multiple possible states, it's a good practice to create a WeatherBloc with an abstract WeatherState just so the multitude of states will be "small part" of the global WeatherState. You can find more information about this by searching Google for Dart abstract classes.

[@Flutterly]

2 and 3 - Context.watch() is just an addition to BlocBuilder. I'm not a big fan of these new methods, I'd still use Bloc Builder everywhere. In a big application I don't think you would have to use Bloc Builder more than let's say 5-10 times inside a page. If that number exceedes, you should think about partitioning the page into multiple small pieces, since having a ton of code inside a single page will drastically decrease your efficiency.

[@MikeKeiler]

@@Flutterly Thank you sir 🤗

[@askarmus]

Thank you for these great tutorials. I spent so much time to understand and deal with unexpected output/errors, finally, thises video cleared ally my misconception of the flutter_blok package. keep it up.

[@abhishekreddy8953]

Thanks a lot sir, for educating us with your valuable content, even now {after 3 years}, It was a treasure for us

[@batuhankrbb]

You are the besttttt. I wish I could give you Giulia Quadrifoglio :D

[@Flutterly]

Haha, thank you so much! ✨

[@TalksFromCar]

Your content is too good man!! Thank you so much!! You are life saver!!

[@aurelagbodoyetin3321]

Wckd is back 💥🔥🔥

[@Flutterly]

Hell yeah! 🔥

[@aurelagbodoyetin3321]

Thanks for your explanation quality 👌

[@j3ns]

Thanks for this awesome video! I am looking forward to the next ones 😀

[@Flutterly]

Thank you so much! ✨

[@abdullahalamodi5455]

excellent work man, keep going

[@Flutterly]

Haha, haven't even posted this yet, glad you could find it hidden in the Playlist. Will post it tomorrow and thanks! I will

[@abdullahalamodi5455]

@@Flutterly Could you make full example about what you explained not just a tips of code I mean example that contains crud operations dealing with server It's not an example It's a small project 😅

[@ddbonpc]

Thanks a lot ! this is really a great way of explaining how things work !

[@Flutterly]

Thank you! 🌟

[@dutnorshi]

Thanks for this great tutorial! BTW, what extensions do you use in the vscode for equality and copyWith generation?

[@Flutterly]

It's called Dart Data Class Genetator (Beta), thanks, I'll pin this comment so that everyone will know.

[@joshuanwokoye]

Meen, this video releaved me of several hours of trouble

[@jjsportify77]

Hey thanks for your wonderful tutorial, but I have got a question. Should we use equatable along with copyWith function for comparing our states? I am not sure why Equatable is neccessary here if Dart compares the instance by object instead of values by default. Whenver we create a new state instance by copyWith function, wouldn't Dart be able to compare already? It seems like it works as charm even if you didn't extend equatable from the tutorials above. Thank you

[@Flutterly]

Man, as I stated inside the tutorial, copyWith and Equatable are 2 completely different things. If you want to compare two instances by value, you should extend Equatable or override the equal operator (==) as you wish. The copyWith method has nothing to do with comparing stuff. It is mainly used for creating a new instance from an already existing one, by mentioning the parameters that are changed in the new one compared to the old one (see the code in the tutorial).

[@rohitprajapati5606]

This was really amazing. Thank you so much flutterly.

[@Flutterly]

You're welcome! Thank you!

[@cveklica]

So much easier to understand when there are pictures 😁 Really enjoyed it! Just one question => Must we use both copyWith and Equatable props together, or is only Equatable enough?

[@cveklica]

or just copyWith without Equatable because it works?

[@Flutterly]

Thanks. It's either one or another, never both. Basically, Equatable is a simple version of copyWith() and hash() all together. I suggest that you only use Equatable. Thanks!

[@yanischetouani7392]

@@Flutterly why never both ? in some Felix Angelov projects he used Equatable and copywith at the same time ! take a look here : github.com/felangel/bloc/blob/master/examples/flutter_firebase_login/lib/login/cubit/login_state.dart

[@Flutterly]

Sorry, I meant saying that you should use either Equatable or the override of the equality operator, never both (which makes sense) . My mistake, I'm sorry. I must've been tired when I replied. Sorry again. And yes, you can use copyWith with Equatable as they have nothing in common. They both have different purposes.

[@MrAidooyaw]

thank you very much, u have really made me understand equatable

[@Flutterly]

I am so glad I did, you're welcome, mate! 🌟

[@dgodiegomartins]

Excellent, thanks!!

[@Flutterly]

You're welcome, mate! 🌟

[@mallikarjunreddy5229]

Hi Flutterly, Am facing issue with state update using bloc pattern. I have followed all the possibilities as you mentioned in the video like extending equatable and declaring all the properties in the state. but still am facing the same issue. Could you please help me out on this some how if possible.

[@yanischetouani7392]

keeeeeep posting pleasseee !!!! OMG you're a lifesaver ! and also if you can start building an e-commerce app from scratch ,it would be very useful . thanks man !

[@Flutterly]

Thank you so much! I will!

[@mgkaungenglish453]

Thanks for this great tutorial.

[@Flutterly]

You're welcome! Thanks! 🌟

[@islomkhujaakhrorov6668]

Awesome Video )

[@jontysingh4334]

Great tutorial, I understood all of your videos, I have one doubt Didn't we were sending same state in previous counter examples then how we were getting new state we didn't use copywith method in counterState, how it was working fine?

[@MuhammadRizki-cl3ru]

hey thank you for make this videos but i have question i have case that i need change frequently list in my app but when i emitting the state of my list i need to move the value to the new list because list is mutable i try to not put my list inside props but like in your video i need to put all my field inside list porps is there a way that i can still emitting my list without move to new list but still extends equatable ?

[@rickycoates3003]

I don't get it why this one has only 500 like xD, in mycase if I didn't watch this video, I swear I was 100% going to modify the state directly coming from js background

[@mcop1]

I am extending Equatable in my state class AND emitting a NEW state but still nothing happens, what is the issue in this case?

[@adnanalshami3751]

Amazing as always. BTW, what programs/tools do you use to edit these videos?

[@Flutterly]

I use multiple products like Videoscribe and Premiere Pro

[@farseenabdulsalam6246]

Concise and clear 💙 Could you make a video on InheritedWidgets? Or how does Provider.of() cause a widget deep down the tree to be rebuilt while keeping its parents intact?

[@navarasan8264]

I have a doubt.. all these states have only one or two variables and passed inside constructor from cubit. Consider if a state contains 10 variable and those 10 are not updated and used at same time. At each scenario a single state variable is updated. How can we do that?

[@Flutterly]

With the copyWith method, you didn't pay enough attention to what I mentioned in the tutorial man.

[@Flutterly]

If you'd have a class A with var a, b, c, d, e, f initilaised in the constructor, then you would have a copyWith method as I did in this tutorial from where you can class classObject.copyWit(only mention the parameters you want to update here)

[@quicksketch1617]

Thank you. I saw some examples using equatable but no one explained. I don't understand why use : super. I read something about initialize constructor, if compare with typescript or python or java this kind of constructor exist or it's just dart?

[@adarshagnihotri5047]

Thanks. Do you have any real project example as I am not able to perform bloc on real project.

[@Flutterly]

I will start a new tutorial series regarding real world examples and apps with bloc

[@Flutterly]

Equatable is comparing by value, instead of comparing by reference

i do want to emit 2 states tho example. i delete with 1 button 2 objects, for each deleted object i want to show a bottom sheet for the user to review the object, so i emit 2 objects so 2 bottom sheets show up. unfortunately the second emition closes the first bottom sheet.

[@MrEricv75]

Nice videos, what did you use for making it please ?

[@fredikruger5690]

Yes its great : What do you use @Flutterly please ?

[@Flutterly]

I use a combination between Videoscribe and Premiere Pro. 👍

[@r4f43ll]

hey, @Flutterly is there anything wrong with changing appNotification/emailNotification bool variables with code like: emit(state.copyWith(emailNotification: !state.emailNotification)); discarding newValue altogether and making toggleNotification methods parameterless?

[@manthankhandale23]

Thank you so much I was stuck for hours trying and later realized that my props was empty 😭

[@pedrodelacruz2369]

What extensions do you use for the folder theme?

[@Flutterly]

The last tutorial of this series will be about everything I use, I can't really remember which icon pack it is, but I'll let you know then.

[@pedrodelacruz2369]

@@Flutterly Thank you mate!!

[@pedrodelacruz2369]

Some interesting topic for me : - Bloc Observer - Bloc Testing - Injectible - The initial Flow of an app, using bloc to Navigate between Onboarding, Login, Home

[@Flutterly]

Mate, everything you mentioned is already covered in my tutorial series.

[@aakashr79]

Perfect. And here I was thinking I'm the crazy one in my team to think mutating an object isn't the way to modify the sate. I do have a question though. If you have a list of objects that could be re arranged and you want the state of all the objects and its values maintained throughout the app, what would be the correct way of doing so? I use GetX and I'm trying to incorporate good architecture with it. I used stream subscriptions in the sub controllers(blocs) to update when the values in the parent bloc changes. Problem is, that if the list is re ordered, the listener of that list is updated, but the listeners of the individual objects are not triggered since they are entirely new instances which were never subscribed to. What would be the correct way to approach this?

[@Add0w]

perfect , thanks bro.

[@Flutterly]

You're welcome, bro

[@pedrodelacruz2369]

Thank You!!!! Really usefull

[@Flutterly]

You're welcome!

[@abrorbobomurodov2361]

thank you bro,

[@Flutterly]

You're welcome!

[@makisetakashi]

How to open pop up generator like that on vscode macos?

[@keithbacalso9433]

How you get those Generate generate things? when you press command + . because I cant get those Generate things.. all I get is Wrap wih BlocBuilder, BlocSelector etc.. etc... no wrap with.... :(

[@r4f43ll]

Data Class Generator extension

[@정지헌-b9u]

Great vid WCKD, your lessons are always great. I have a question for you. I did some experiments with the Equatable package, listing the props with the this.* form. The app seemed to work fine although I'm not sure quite why. I am guessing that since Equatable is used to compare Objects, then parameters contained in the instance works the same. I dunno for sure though... Do you have some clues?

[@Flutterly]

"this.variable" is referring to the specific variable used inside the class. If it works fine for you, then it's ok!

[@fredikruger5690]

What tool do you use for your video / drawing plz ?

[@fredikruger5690]

VideoScribe ?

[@Flutterly]

Yes

[@ramkishoreprajapati1325]

It's valuable content.

[@krichenekhaireddine4193]

hello i think putting const when declaring the instance solve the problem instead of using the equitable package

[@hc-ec6bm]

I love your contents but I have watched this video 2 times, but still didn't understand what Equatable stands for. How can I use in real lif scenario?

[@keithbacalso9433]

Also you said "Copy the content from the previous one to the new state" so you mean if the "previous state is ONE"..... then.... "copy that prevoius state ONE to the new state" so now "the new state is ONE" ? I dont get it .. I would appreciate and understand if you give example of prev state and the new state :)

[@9997eman]

One thing he didnt fully explain is why A cannot be equal to B. Even if they are both instances of myclass. The reason is they are not the SAME instance. If class is a blueprint then A and B were created with the same blueprint but they are not the same instance.

[@ghaithchamieh7087]

I would say this is literally from 0 to hero BLoc tutorial.

[@Flutterly]

Thank you! 🌟

[@temofey7707]

if you have a list as class field and emit not update a state - you must put FIELDNAME.hashcode in state props. i fix this bug over 3 hours