Easiest way to understand BLOC Pattern in Flutter

Sdílet
Vložit
  • čas přidán 27. 07. 2024
  • Important Note : I have unintentionally switched the stream and sink.
    Correct is : Sink is from where we add data to the stream, while source is from where we consume data!
    In this video, I have the given fundamental concepts of BLOC pattern (Business Logic Component), furthermore, I have implemented Bloc Pattern in a simple counter application using flutter_bloc and bloc packages.
    github.com/themaaz32/bloc_imp...
  • Věda a technologie

Komentáře • 235

  • @zlash7
    @zlash7 Před 4 lety +48

    14:27 decreasing by one lol but still very good explanation. Thank you for your time in sharing your knowledge.

    • @coffeebytez
      @coffeebytez Před 4 lety +7

      He just forgot to change it to minus 1 in CounterBloc. It happens. I do it in my videos sometimes. Then I rewatch and edit in a fix lol.

    • @EasyApproach
      @EasyApproach  Před 4 lety +5

      Hahah! Yeah sorry I forgot! Thank you for understanding!

    • @EasyApproach
      @EasyApproach  Před 4 lety +2

      Thank you Chris!

    • @qaiserhussain1861
      @qaiserhussain1861 Před 3 lety +1

      hahaha that was funny part!

    • @darshakmehta
      @darshakmehta Před 2 lety +2

      @@EasyApproach That is totally negligible.... when focused on knowledge, such things don't even matter....

  • @michaeltolsma7717
    @michaeltolsma7717 Před 4 lety +10

    9:45 Thanks for that difference between yield and return. Put very simply.

    • @EasyApproach
      @EasyApproach  Před 4 lety

      In streams, for putting the value into stream we use yield ;) . Please subscribe the channel.

  • @nickbrodd7159
    @nickbrodd7159 Před 4 lety +2

    Excellent explanation of the fundamentals of the BLoC concept and a great example of how to implement the code! Thank you!!

  • @agoodmansaid
    @agoodmansaid Před 3 lety +3

    All the other "Easy" tutorials assume some intermediate level of understanding. this truly is the "EASIEST" bloc tutorial on the internet. thank you so much!

  • @ESLwithAlexey
    @ESLwithAlexey Před 2 lety +1

    Great video with fantastic way to explain complex things! Thanks for sharing your practical knowledge in this bloc tutorial.

  • @gameofcodes9832
    @gameofcodes9832 Před 3 lety +4

    You helped me to learn both Provider and BLOC.
    I really appreciate your work.
    A lot of thanks to you :)

  • @ronnykevin9076
    @ronnykevin9076 Před 3 lety +1

    Easy approach really has easy approaches

  • @ideepdave
    @ideepdave Před 3 lety

    Thank you, gentleman. It Helped.
    Relief of working with flutter from one and a half years and finally understanding how bloc works.

  • @mazenalsakkaf
    @mazenalsakkaf Před 4 lety +1

    Great! thank you for simplifying Block...much appreciated

  • @winstent966
    @winstent966 Před 4 lety +5

    Thanks Bro! I just got "aha!!" on BLoC after watching this video. Keep up the great work!

    • @EasyApproach
      @EasyApproach  Před 4 lety +1

      Please subscribe the channel if you like the video

    • @urmilshroff
      @urmilshroff Před 4 lety

      Same, I FINALLY got the "aha" moment with BLoC!

  • @FelipeSantiago007
    @FelipeSantiago007 Před 4 lety +1

    awesome! simple way of implementing! thank you

  • @midclock
    @midclock Před 3 lety +1

    Thanks for your explanation!
    Just one thing, I read the documentation before, I think that importing flutter_bloc is enough, it will import bloc by itself, no need to re-import in the project!

  • @muneeraadil1214
    @muneeraadil1214 Před 3 lety +2

    Great stuff.. Thank You for explaining it very well :)

  • @urmilshroff
    @urmilshroff Před 4 lety +9

    Woah, I finally understood BLoC after nearly giving up on it! Thank you so much for this. It all makes sense now!🎉

    • @EasyApproach
      @EasyApproach  Před 4 lety +1

      Glad it helped!

    • @urmilshroff
      @urmilshroff Před 4 lety +1

      @@EasyApproach I have a question though - you are using enums while the official docs suggest making classes for every event and also using the equitable package. That's where it gets annoying for me with the excessive boilerplate, so which is the appropriate way to do it?

    • @EasyApproach
      @EasyApproach  Před 4 lety +1

      This is just thee basics. Wait let me share the proper video.

    • @EasyApproach
      @EasyApproach  Před 4 lety

      czcams.com/video/yfn1w2Z-Ooo/video.html watch this video. This is second part of Bloc

  • @elioalvarado8894
    @elioalvarado8894 Před 4 lety +1

    Muchas gracias mi hermano, buenísima explicación. Thanks for keep it so simple and understandable

  • @Brendan2Alexander
    @Brendan2Alexander Před 4 lety +1

    Very concise and helpful! thank you

  • @poonamkalra6306
    @poonamkalra6306 Před 3 lety +1

    Really thanks to you for great explanation of bloc

  • @krishnakumarramachandran5888

    Thanks for this Awesome Video brother. Now i understand bloc clearly.

  • @doriangarcia73
    @doriangarcia73 Před 4 lety +1

    Very clear and concise. Keep it up!

    • @EasyApproach
      @EasyApproach  Před 4 lety +1

      Please subcribe the channel if you like

    • @doriangarcia73
      @doriangarcia73 Před 4 lety

      @@EasyApproach Just did ;) Thanks! Take care out there.

  • @steven_mkn
    @steven_mkn Před 4 lety +20

    19, 20, 21... "as you can see, it is decrementing by 1"

    • @EasyApproach
      @EasyApproach  Před 4 lety +2

      pardon me :'( :'( ... :D

    • @steven_mkn
      @steven_mkn Před 4 lety +1

      @@EasyApproach It's cool bro, I understood. Thanks for the vid

    • @EasyApproach
      @EasyApproach  Před 4 lety

      I appreciate man. Please subscribe the channel for more videos

    • @matrosovdeveloper
      @matrosovdeveloper Před 3 lety +2

      Looks like decrementing feature of this BLOC is the most popular in the comments))) I don’t mind as it’s great video explanation

  • @tareqislam8644
    @tareqislam8644 Před 4 lety +1

    This is a very good explanation. I would like to hear some differences with the Provider package and other Simple alternatives as well. Like BlocProvider is the alternative of Provider, BlocProvider.of(context) is an alternative of Provider.of(context) and BlocBuilder is alternative of StreamBuilder, etc. But very good video man really forced me to subscribe as well.

  • @msayeed78
    @msayeed78 Před 4 lety +1

    Excellent thanks brother . Keep it up.

  • @vgeniirshf8913
    @vgeniirshf8913 Před 4 lety +1

    Nice explanation, thanks !

  • @Andrew-ht7rf
    @Andrew-ht7rf Před 3 lety +1

    this is excellent, cheers mate from australia

  • @koustav2008
    @koustav2008 Před 4 lety +2

    EXCELLENT TUTORIAL !!!

  • @ITMANZ
    @ITMANZ Před 4 lety +1

    Well done, Mazz :)

  • @shopno9096
    @shopno9096 Před 4 lety +2

    Thank you. Its really helped.

  • @jiren8991
    @jiren8991 Před 4 lety +3

    After watching this, I wished that I could subscribe you n number of times. Great work

  • @salahdinemohamedahide2119

    thanks helps a lot keep doing this you are a very good teacher

    • @EasyApproach
      @EasyApproach  Před 4 lety

      Thank you so much please subscribe the channel

  • @trainofthought5733
    @trainofthought5733 Před 2 lety

    actually a good explanation

  • @rishidiwute3604
    @rishidiwute3604 Před 10 měsíci

    Saved me. and my day ! thank you man.

  • @solovigil7470
    @solovigil7470 Před 4 lety +1

    Just change in counter_bloc -> yield state-1 (when event is decrement) and u are good to go
    Nice video

    • @EasyApproach
      @EasyApproach  Před 4 lety

      Haha yeah I did silly mistake. Please subscribe the channel.

  • @sithumdilanga650
    @sithumdilanga650 Před 4 lety +1

    Thanks man. Nice explanation

  • @manasasompalli
    @manasasompalli Před 3 lety +1

    Best explanation..Thank you so much

  • @htcnew5247
    @htcnew5247 Před 3 lety +1

    Great job! Thanks.

  • @AshiqurRahman
    @AshiqurRahman Před 3 lety +6

    This is the easiest video...Thank you

    • @EasyApproach
      @EasyApproach  Před 3 lety

      Glad it helped! Please subscribe the channel.

    • @aresbowen135
      @aresbowen135 Před 2 lety

      i know Im asking randomly but does someone know a tool to log back into an instagram account??
      I was dumb lost my account password. I would love any help you can give me!

    • @timothyira5270
      @timothyira5270 Před 2 lety

      @Ares Bowen instablaster ;)

    • @aresbowen135
      @aresbowen135 Před 2 lety

      @Timothy Ira Thanks so much for your reply. I found the site thru google and im waiting for the hacking stuff now.
      I see it takes a while so I will reply here later when my account password hopefully is recovered.

    • @aresbowen135
      @aresbowen135 Před 2 lety

      @Timothy Ira it worked and I actually got access to my account again. I'm so happy!
      Thank you so much, you really help me out :D

  • @ssumeet2
    @ssumeet2 Před 3 lety +1

    bro good work!!!

  • @BeforeLeavingLife
    @BeforeLeavingLife Před 3 lety +1

    Good Job. Thank you bro !

  • @ijazfx
    @ijazfx Před 4 lety +2

    Very good! A tip for you for future videos:
    1. Always prepare a script of your screencast.
    2. Record full video without speaking, just focus on your coding.
    3. Voice-over and annotate your video

  • @johnmichaelhilario5880
    @johnmichaelhilario5880 Před 4 lety +2

    bro, you thank you so much!

    • @EasyApproach
      @EasyApproach  Před 4 lety

      Welcome bro. Please subscribe the channel

  • @bennguyen1313
    @bennguyen1313 Před 4 lety +1

    I like how the inc/dec events are just enums, not another class!
    In CounterBloc you initialize a "initialState" variable to 0, but in the inc/dec event you update a "state" variable. Should these names have been the same?
    Is the counterScreen UI widget a child of counterBloc?
    In the CounterBloc's mapEventToState, would it have worked if you would have used "return" instead of "yield"? Or, in general must 'async' and 'yield' always go together?

    • @EasyApproach
      @EasyApproach  Před 4 lety

      State returns the current value of state of CounteState, so as we are using int as counter state type so you can get the current value of counter by by using state.

  • @miltonvincenttis6680
    @miltonvincenttis6680 Před 3 lety +1

    Your accent I think is an effort to me well understood. Good English.
    In the switch there's an typo. In option to decrement you are adding (+) instead of (-).

  • @danielxavdeoliveira8578
    @danielxavdeoliveira8578 Před 4 lety +1

    Very nicely explained. I was confused AF until now

  • @balaganesh3440
    @balaganesh3440 Před 3 lety +1

    good stuff..

  • @Fnyvids
    @Fnyvids Před 3 lety

    great job. Thanks for your efforts. subscribed. Accent u know :)

  • @SuvamPrasad
    @SuvamPrasad Před 3 lety +2

    Too many advertisements, However, you explained very well.

  • @ZeeshanAli-ju2nc
    @ZeeshanAli-ju2nc Před 4 lety +1

    can you describe yield state + 1;
    how can judge state variable as you are using butt not declare any where in file.

    • @EasyApproach
      @EasyApproach  Před 4 lety

      this state variable is from Bloc class to access the current state, you don't have to define it.

  • @loncatsanasini6159
    @loncatsanasini6159 Před 4 lety +1

    very good and simple explanation. thanks sir

  • @kotlin_man
    @kotlin_man Před 4 lety +1

    Nice Video For Beginner Tanx

  • @gokulprasanth3991
    @gokulprasanth3991 Před 3 lety

    kindly please update the bloc tutorial video ,I'm getting errors like this below
    "BlocProvider.of() called with a context that doesn't contain a cubit of type CounterBloc"

  • @062ravi
    @062ravi Před 4 lety +1

    Amazing! You are awsm!

  • @CubeEdgeRecap
    @CubeEdgeRecap Před 4 lety +1

    Subscribed.

  • @uzairleo2910
    @uzairleo2910 Před 4 lety +2

    also why we used patterns anyone like provider or bloc etc etc what the actually need of this paradigm in development

  • @milanpoudel3737
    @milanpoudel3737 Před 4 lety +2

    Sorry to ask but how did you understand BLOC pattern when you were a beginner? Any resources, books that you recommend.Your video has helped a lot but still I want to go deep and learn more

  • @theethicalh3707
    @theethicalh3707 Před 4 lety +1

    thank you very much

  • @tareqislam8644
    @tareqislam8644 Před 4 lety

    Bro, how should we handle dispose in flutter_bloc ?

  • @husnulaqib5303
    @husnulaqib5303 Před 4 lety

    Thanks for sharing

  • @deepakchauhan8884
    @deepakchauhan8884 Před 10 měsíci

    Please give example where I can use multiple bloc

  • @ricard458
    @ricard458 Před 4 lety +3

    At this time (May 2020) the BlocPrivider doesn't have the build: ... Instead, it has create:

    • @EasyApproach
      @EasyApproach  Před 4 lety +1

      Yeah! However, the concept is still same ;)

  • @utpalgaurav14
    @utpalgaurav14 Před 2 lety

    Whats the difference between BLOC and MVC ? Looks same to me.

  • @i_lovedeepika
    @i_lovedeepika Před 3 lety +2

    Was it really decrementing though?

  • @marcoseduardodasilvabergam545

    Ok so, I tried here and it works, but now, flutter_bloc is 2.1.1, and Android studio is telling me that: 'builder' is deprecated and shouldn't be used. Still working, but is telling me this...

    • @promaen
      @promaen Před 4 lety +2

      if you havent figured it out already, use create: instead of build:
      see pub.dev/packages/flutter_bloc for additional resources

  • @metaspook
    @metaspook Před rokem

    You've missed the Repository layer which supposed to be in between Data and Bloc layer

  • @hananasyrawi9297
    @hananasyrawi9297 Před 4 lety +1

    how about with counsume with A Api

  • @WorstDeveloper
    @WorstDeveloper Před 4 lety +1

    What if you had 100 different states to keep track of globally?

    • @EasyApproach
      @EasyApproach  Před 4 lety +1

      We make different Blocs for different screen!

  • @nirbhaysrivastava928
    @nirbhaysrivastava928 Před 3 lety

    What is the benefits of adding this??

  • @m.arslankhan7449
    @m.arslankhan7449 Před 4 lety +1

    github link is not working

  • @Mr_Zeesshhh
    @Mr_Zeesshhh Před 3 lety

    On clicking decrement it is showing incremented value , I think you by mistakenly given yield state + 1 in decrement case instead of yield state - 1 . Am i right sir ?

  • @muhammadkashif7209
    @muhammadkashif7209 Před 4 lety +1

    you explained very nicely but i am facing a little confusion why we need to used bloc pattern instead of simple variable logic

  • @uzairleo2910
    @uzairleo2910 Před 4 lety +1

    why we need bloc pattern sir if we can do the same work easily

    • @EasyApproach
      @EasyApproach  Před 4 lety +2

      to have more control on state management!
      Provider and Inherited widget are not completely state management, they are more state sharing mechanism but using bloc you would more control and organised code!

    • @uzairleo2910
      @uzairleo2910 Před 4 lety

      @@EasyApproach Thanks

  • @DexterTalha
    @DexterTalha Před 4 lety +1

    Nice an explained tutorial,,, thank you...
    But it's not decrementing the value...

  • @kartzhai
    @kartzhai Před 4 lety +1

    can i request video Flutter_bloc with Listview Builder that receive data from API?
    Thank you

    • @EasyApproach
      @EasyApproach  Před 4 lety

      Are you a magician :o
      That's exactly my next topic!
      Will upload the video tomorrow or on Sunday.
      Thanks

    • @EasyApproach
      @EasyApproach  Před 4 lety

      Thanks

    • @kartzhai
      @kartzhai Před 4 lety

      @@EasyApproach WOAHH GREAT!! sure will watch your video asap. when will you upload it btw?

    • @EasyApproach
      @EasyApproach  Před 4 lety

      @@kartzhai saturday afternoon or sunday morning!

    • @EasyApproach
      @EasyApproach  Před 4 lety

      ​@@kartzhai you better press the bell icon you will get the notification.

  • @MrSaadmahmud
    @MrSaadmahmud Před 4 lety +4

    Very good video.
    just one thought as viewer, your english is very fluent, just sometimes it tough to get when you speed it up, hope you make it more sound natural.

    • @EasyApproach
      @EasyApproach  Před 4 lety +1

      In latest videos this is improved. Thanks for feedback

  • @KoradiyaAbhay
    @KoradiyaAbhay Před 4 lety

    Which is best, Bloc pattern or Provider ?

    • @EasyApproach
      @EasyApproach  Před 4 lety

      Bloc for big projects as it gives more maintainability and power, however provider is good enough for decent projects!

    • @KoradiyaAbhay
      @KoradiyaAbhay Před 4 lety

      @@EasyApproach ok thanks

    • @KoradiyaAbhay
      @KoradiyaAbhay Před 4 lety

      @@EasyApproach Can I use some common state as AppState?

    • @EasyApproach
      @EasyApproach  Před 4 lety

      @@KoradiyaAbhay yeah you can if needed!

  • @llama7206
    @llama7206 Před 3 lety +1

    you didnt show data being passed from the data provider to the bloc............

    • @EasyApproach
      @EasyApproach  Před 3 lety

      czcams.com/video/yfn1w2Z-Ooo/video.html try this

  • @fluttterdev1k
    @fluttterdev1k Před rokem

    thanks bro ,but for this update you should use
    class CounterBloc extends Bloc {
    CounterBloc(int initialState) : super(initialState) {
    on((event, emit) {
    switch (event) {
    case counterEvent.increment:
    emit(state + 1);
    break;
    case counterEvent.decrement:
    emit(state - 1);
    break;
    }
    });
    }
    }
    instead of
    class CounterBloc extends Bloc {
    CounterBloc(int initialState) : super(initialState);
    Stream mapEventToState(counterEvent event) async* {
    switch (event) {
    case counterEvent.increment:
    yield state + 1;
    break;
    case counterEvent.decrement:
    yield state - 1;
    break;
    }
    }
    }

  • @siddharthmehra5796
    @siddharthmehra5796 Před 2 lety

    It's hilarious that you didn't even notice that decrementing is not working as it should. Great explanation though!

  • @__renesan
    @__renesan Před 4 lety +1

    Gracias

  • @barry.anderberg
    @barry.anderberg Před 2 lety

    Async does not create another thread. Dart is a single thread language.

  • @coderspathway
    @coderspathway Před 4 lety +3

    I have no problem with your accent. I don't why some people has.

  • @4khdfreestockfootagenocopy135

    Wrong: Stream is to send data out for consumption and Sink is the point where data is added by the bloc so that it can be directed to stream.

  • @galaxian_hitchhiker
    @galaxian_hitchhiker Před 2 lety

    Very cumbersome pattern for simple apps, a lot of work for basic things. But should see in really big apps. Not sure about the performance however.

  • @niteshrathore4341
    @niteshrathore4341 Před 4 lety +1

    Hey please make a full video on login and signup using the http get and post request.

    • @EasyApproach
      @EasyApproach  Před 4 lety +1

      Sure

    • @niteshrathore4341
      @niteshrathore4341 Před 4 lety +1

      @@EasyApproach i really need to do login and signup using the http get and post. Because i want to create a project so it would be help to me. Your videos are amazing. I will share your videos to frnds.

    • @EasyApproach
      @EasyApproach  Před 4 lety

      Thank you. Please subscribe the channel.

  • @unioltered7499
    @unioltered7499 Před 3 lety

    I think you are not right telling that async runs in a different thread because all Dart async programming is still synchronous and goes on the same thread. To use different thread you need to create new isolate using features of dart or use compute function which does everything for you. Read some articles about event loop and microTask loop.

  • @sangamshrestha143
    @sangamshrestha143 Před 3 lety

    I determined to not watch after repeatedly hearing bloc pattren instead of bloc pattern.

  • @afifnadaf9321
    @afifnadaf9321 Před 4 lety +1

    Nice video.. He made typo on 10:04.. Rest is very informative.

  • @AneesHameed
    @AneesHameed Před 4 lety +1

    I think this is the easiest bloc video that I have ever seen...

  • @anpvikas
    @anpvikas Před 4 lety +1

    Reso coder?

  • @aynoofficial448
    @aynoofficial448 Před 2 lety

    not working

  • @Vellutia
    @Vellutia Před 4 lety +3

    both event yield + 1 as the int state XD

    • @EasyApproach
      @EasyApproach  Před 4 lety +1

      XD you got the bloc right?

    • @Vellutia
      @Vellutia Před 4 lety

      @@EasyApproach Yea you explained it pretty well. I used to implement provider package for my state management but now I want to learn using flutter_bloc

    • @EasyApproach
      @EasyApproach  Před 4 lety

      @@Vellutia love you bro :*

  • @zubu14
    @zubu14 Před 4 lety +1

    I think you got the wrong understanding of decreasing the counter :P. BTW great work.

    • @EasyApproach
      @EasyApproach  Před 4 lety

      Ahahha pardon meeeeee

    • @zubu14
      @zubu14 Před 4 lety

      @@EasyApproach I have very hard time in understanding the Dependency Injection, have you made any video ? BLOC + Dependency Injection would be nice

  • @ashiqurrahmanashiq262
    @ashiqurrahmanashiq262 Před 3 lety +2

    CounterBloc.dart
    //int get initialState =>0
    CounterBloc() : super(0)
    main.dart
    body:BlocProvider(
    //builder:.........
    create :...........
    )

  • @ChandanSomani
    @ChandanSomani Před 3 lety

    if this is easy approach than what is complex.........
    your initial explanation was is good making things simple but
    creating ur porper base is necessary... i think more accurate approach in initial explanation was necessary , every aspects needs to tracked

  • @skipydie
    @skipydie Před 3 lety +1

    So.. this seems like a presenter pattern to me...

  • @LE8271
    @LE8271 Před 4 lety +1

    "State is the data you application is currently showing". Nope. It is ALL the parameters that defines what it should show. It is NOT the data. Data is the last in the queue.

  • @apnatuition55
    @apnatuition55 Před 3 lety +1

    ads bhot h

  • @amangautam273
    @amangautam273 Před 4 lety +32

    Good job bro. Just a kind request, please leave your fake accent. Be real!

  • @yassinelutumba6907
    @yassinelutumba6907 Před 2 lety

    bloc pattren

  • @designpoint_india
    @designpoint_india Před 4 lety +1

    You make your video very nice but your talking speed is very high so keep your speed little bit slow.. thank you

  • @arbazadam3407
    @arbazadam3407 Před 3 lety +1

    This dude creates good content but trust me his fake accent kills...

    • @EasyApproach
      @EasyApproach  Před 3 lety +1

      Thank you. Please subscribe the channel.

    • @arbazadam3407
      @arbazadam3407 Před 3 lety

      Ofcourse i did subscribe. Good content is always appreciated ! Could you please create something for CI/CD with codemagic or just paste the link here if you have already done it?

    • @EasyApproach
      @EasyApproach  Před 3 lety

      No i didn't will make. Thanks for suggestion :)