Flutter BlocBuilder vs BlocListener vs BlocConsumer

hello everyone assalamualaikum so here we'll  take a look at difference between block Builder   block listener and block consumer now here is my  basic app and take a look at this app so over here   I'm going to minimize it this screen and now we  are going to relaunch our app and I want you to   observe two things so over here inside this  block listener I have a print message which   is this I'm listening one and inside block  Builder I have another print message where   it says that I'm listening to so first we'll  take a look if we restart our app what happens   and we only see that this message where I'm  listening to is being called which also means   that this block Builder over here getting cold  actually nothing is being listened over here   and of course because we are listening to the  state changes we are observing the state changes   so we fall to these categories okay but then what  happens when we first put up our app now this app   is more interactive and I want to see what happens  now over here we'll click on this and it'll pop   up a new page and we see there's no changes  yet and over here I'm going to submit a form   and I'll call it uh in the form field I'll say  skirts and price at 30. and over here we do see   that no printing messages now as soon as I click  on this we'll have some changes so as you see we   clicked on this over here now we do see that  over here I'm listening one which is over here   this is getting cold but of course at the same  time this is getting cold now what is happening   over here of course if we see the log message we  see that printing two this is getting cold first   and then we see that I'm listening one which  is over here this one being called so these   are the way it's happening this is the sequence  so what happens over here if I click on a button if I submit a form so if you check carefully so  here pops up a message over here pop-up message   now this is where block listener shines I mean  block listener is useful because I want to show   something so it's more like navigating to a  new route or if you want to show a snack bar   in that case you need to wrap your app scaffold  or inside scaffold you can use a block listener   and inside the block listener you can use  block Builder but actually so what is the   take away from this the idea is  if you want to listen to changes   and navigate to new routes then you can use  block listener and inside block listener as   a child you can use block Builder but of course  you can also use a Black Block Builder on its own   without block listener but block Builder could be  inside block listener and from block listener we   also listen to state so this is a state over here  we listen to it and we triggered a new snack bar   or even you can navigate to a new route but on the  other hand over here instead this block Builder   actually we are returning as you see widgets so  this is another major difference inside block   Builder you can't return actually a route you  have to return a widget but if you want to return   a route or a snack bar you should go ahead with  block listener so this is the basic difference and   there is the other one actually which is called  block consumer now actually a block consumer is   a combination of block listener and block Builder  actually and nothing else changes and then nothing   else changes so over here instead of block  listener we can just change it to block consumer okay and over here for Block consumer itself  we don't need any block Builder it just takes   it properly which is called Builder so  we can comment out this one over here   and we'll see that it still works okay  so inside block consumer you can still   use pretty much the same over here would  be listening navigating showing sniper   and instead block Builder you'd be just  listening to the states and based on that   you would show new widgets okay so let's  go ahead and restart our app and we'll see   nothing changes in terms of behavior so we are  still listening to the states over here and then we'll do new hat and we'll see how it goes so  look at the messages over here let's submit the   form so we see that it popped up and it popped  up as well over here and we see that first it   listened for any state changes inside this Builder  over here and then it started to listen for State   changes inside this consumer inside this listener  okay so this is the basic difference once again   to summarize block Builder you'd be using just to  listen to changes of the state and a return widget   and if you don't want to return widget something  else then you should do it inside this block   listener now block listener also has  block Builder inside okay and block   consumer combines the solicitor  and Builder together thank you

Channel: dbestech

Views: 8,787

Keywords: Flutter BlocBuilder vs BlocListener vs BlocConsumer, flutter, flutter tutorial, bloc

Id: 6PgYhvnCN58

Length: 5min 45sec (345 seconds)

Published: Thu Sep 22 2022