Flutter BLoC Pattern Tutorial From Scratch

แชร์
ฝัง
  • เผยแพร่เมื่อ 28 ธ.ค. 2024

ความคิดเห็น • 265

  • @ResoCoder
    @ResoCoder  4 ปีที่แล้ว +15

    🚨 New Bloc & Cubit LIBRARY tutorial 👇
    th-cam.com/video/y564ETOCog8/w-d-xo.html

    • @ryanb55
      @ryanb55 4 ปีที่แล้ว +2

      Should the new video be watched in place of learning the flutter_bloc or watch this first, then go on to the Bloc & Cubit?

    • @xpwahab1
      @xpwahab1 3 ปีที่แล้ว

      @@ryanb55 same question here, What do you suggest?

    • @ryanb55
      @ryanb55 3 ปีที่แล้ว

      @@xpwahab1 Skip this video.

    • @xpwahab1
      @xpwahab1 3 ปีที่แล้ว +1

      @@ryanb55 oh right, it's actually 7 videos IIRC vs 1 video of 47 minutes containing 2 topics (bloc and cubit) so i thought i should see this. But thanks for clearing my doubt.

  • @jimmyryan5880
    @jimmyryan5880 2 ปีที่แล้ว +5

    The pacing and lenght of the video is perfect. No long life story, not over rushed. I have a chance to look at the code but not bored. Nice work.

  • @gmc254quads6
    @gmc254quads6 6 ปีที่แล้ว +52

    As a beginner learning dart and flutter, this is the only video that helped me tie up the concepts of BloC. Thanks man.

    • @nitroexpress4956
      @nitroexpress4956 3 ปีที่แล้ว

      +++++++

    • @stressless6467
      @stressless6467 2 ปีที่แล้ว

      same brother

    • @IELTSwithJamoliddin
      @IELTSwithJamoliddin 4 หลายเดือนก่อน

      Flutterly has nice series on Bloc,he explained it very well

    • @IELTSwithJamoliddin
      @IELTSwithJamoliddin 4 หลายเดือนก่อน

      Oh it's been 5 years,you have probably already learned and used Bloc many times,are you still doing flutter development?

  • @sipatha
    @sipatha 5 ปีที่แล้ว +26

    This has to be the best BLoC pattern explanation i have ever seen for Flutter, many thanks for the help.

  • @danieltemiagin3635
    @danieltemiagin3635 2 ปีที่แล้ว

    The only videos that explain bloc. The rest just fly through it, and the all say the same things. Thanks man

  • @codinginflow
    @codinginflow 6 ปีที่แล้ว +139

    The first program that used the BloC architecture was Tetris, amirite?

    • @ResoCoder
      @ResoCoder  6 ปีที่แล้ว +12

      😉👌

    • @tbdkll4218
      @tbdkll4218 5 ปีที่แล้ว

      Can't wait to see your Flutter tutorials. Absolutely loved the Android ones and looking forward to Flutter as well. If you do, hope you cover some more advanced topics

    • @ThinkDigitalRepair
      @ThinkDigitalRepair 5 ปีที่แล้ว +1

      HAHAHA! Nice

  • @bzevendetta5233
    @bzevendetta5233 5 ปีที่แล้ว +9

    I'm new to fluter and I appreciate you taking your time to explain this , I manage to partially grasp the content however I'll go over the video a couple more times to fully grasp it's content and continue following your post. Thanks !

  • @Altroo
    @Altroo 2 ปีที่แล้ว

    I only wish youtube has a favorite channels list, you'll be the only one there lol.
    Keep up the good work bro, all the best.

  • @carswithmula
    @carswithmula 2 ปีที่แล้ว

    Finally someone who made me see bloc simpler than i ever thought it was.

  • @our.creepy.world.
    @our.creepy.world. 3 ปีที่แล้ว +1

    Hello man ! I'm french and just thanks for your videos. You speak very well and it's very easy to understand you !

  • @bjorn6017
    @bjorn6017 6 ปีที่แล้ว +11

    Finally got my head around bloc pattern! Thank you!

  • @santiagoapesteguia1712
    @santiagoapesteguia1712 4 ปีที่แล้ว

    great explanation! I'm a beginner flutter developer from argentina and i really enjoyed but also understood everything. Thanks a lot.

  • @edbienes
    @edbienes 6 ปีที่แล้ว +8

    Your pacing is easy and simple to follow. You explain well. Great content 👍🏻 keep it up!

    • @ResoCoder
      @ResoCoder  6 ปีที่แล้ว +1

      I'm happy to help!

  • @sodiqeniola474
    @sodiqeniola474 2 ปีที่แล้ว

    Simply great. Thanks for this, Afzal.

  • @sinahamidian3082
    @sinahamidian3082 ปีที่แล้ว

    This helped me a lot to understanding the bloc pattern. Thanks man.

  • @k.l7111
    @k.l7111 4 ปีที่แล้ว +1

    A very clear tutorial! I like the way that you explain bloc pattern, and also the shortcut/snippet details you included are very considerate. Good job! Thank you.

  • @sadabwasim9850
    @sadabwasim9850 6 ปีที่แล้ว +6

    Woah I finally understand bloc pattern, thanks for this tutorial, keep it up.

  • @RH-nj4mm
    @RH-nj4mm 6 ปีที่แล้ว +2

    Amazing. The cleanest explanation for the BLoC pattern i saw. Thanks very much

  • @bassandre27
    @bassandre27 4 ปีที่แล้ว

    You saved my life bro. Your explanation is very kind!

  • @stijnmathysen7453
    @stijnmathysen7453 6 ปีที่แล้ว +6

    Great stuff and thanks for showing some really useful shortcuts for VS Code!

  • @brianmartindunn
    @brianmartindunn 5 ปีที่แล้ว +2

    Fantastic explanation. In addition to your clear presentation style, I like how you explain the keyboard commands you use (like Ctrl+.), as I'm a newbie at Flutter. Please continue to make more videos!

    • @FikriRazzaq
      @FikriRazzaq 5 ปีที่แล้ว +1

      donovanbrown.com/post/visual-studio-code-keyboard-shortcut-cheat-sheet

  • @havinhtuyen2631
    @havinhtuyen2631 4 ปีที่แล้ว

    it is the best example for me in the bloc design pattern. Thanks a lot.

  • @BotanAbdullah
    @BotanAbdullah 6 ปีที่แล้ว

    Now I understood Bloc clearly. Thanks a lot for your efforts.

  • @CodeXdev
    @CodeXdev 4 ปีที่แล้ว

    MVC and MVVM equivalent from Google --> BLoC. Well explained.

  • @ayushpratap4726
    @ayushpratap4726 5 ปีที่แล้ว

    You have nicely! explained the whole concept in the simplest way possible.
    Please keep posting great stuff like this

  • @JoseAlvaradoo
    @JoseAlvaradoo 5 ปีที่แล้ว +1

    Awesome!! Thank u so much, it's the better video about BLoC pattern that I've seen 😁👌

  • @vicyoslinuxofficial2607
    @vicyoslinuxofficial2607 4 ปีที่แล้ว +1

    2:58 Wooow, that was nice!!!

  • @deep7680
    @deep7680 4 ปีที่แล้ว +1

    we can combine it with sum_types to make sure that we mapped every event to a corresponding state in bloc

  • @RagaGaming
    @RagaGaming 6 ปีที่แล้ว +12

    Thanks a lot, it really help, i've built 2 apps and still confused with BLoC

    • @nextbars
      @nextbars 5 ปีที่แล้ว +1

      me too!

    • @ShivamJha00
      @ShivamJha00 4 ปีที่แล้ว

      Just use Provider or get_it

  • @randomusername982374
    @randomusername982374 5 ปีที่แล้ว +1

    You explained it so well. TY!

  • @collinsattafuah2947
    @collinsattafuah2947 2 ปีที่แล้ว

    You are simply the best 👏🥇

  • @nicolaszein
    @nicolaszein 5 ปีที่แล้ว

    Thank you, finally an example simple enough we could understand. Thanks again.

  • @viveksehrawat36
    @viveksehrawat36 4 ปีที่แล้ว

    You are the God of flutter

  • @thibautkouame1721
    @thibautkouame1721 หลายเดือนก่อน

    Please which extension allowed you to wrap Floating action button whith row ?

  • @bertlashes
    @bertlashes 4 ปีที่แล้ว

    @16:25 what plugin do i need to download to import necessary packages using ctrl + . key binding?

  • @rodinsuniga5549
    @rodinsuniga5549 4 ปีที่แล้ว

    thanks! Really nice and comprehensive video. New Subscriber here... 😁

  • @iced87
    @iced87 4 ปีที่แล้ว

    Wonderful and straightforward explanation. Thank you very much!

  • @Cadenzacovers
    @Cadenzacovers 4 ปีที่แล้ว +1

    Hey, thanks for the tutorial! May I know what extension do you use to be able to highlight + right click floatingactionbutton and get a list of suggestions? thanks!

  • @emresolak4794
    @emresolak4794 3 ปีที่แล้ว

    Thanks for the video but i have seen on some tutorials CounterState file also. Why do we need that or why did not you use it ?

  • @Yami1337Gaming
    @Yami1337Gaming 6 ปีที่แล้ว +1

    I came, I saw, I liked! Great video!

    • @ResoCoder
      @ResoCoder  6 ปีที่แล้ว +1

      Thank you!

  • @chanvathanaten3486
    @chanvathanaten3486 4 ปีที่แล้ว +3

    What different between StreamSink and Sink ?

    • @AbhiLM
      @AbhiLM 4 ปีที่แล้ว

      i also want to know...

  • @M.BilalAhmad
    @M.BilalAhmad 4 ปีที่แล้ว

    Hit like if you like the sound when he says "Hello! Welcome to Reso Coder"

  • @arnaudroncari2468
    @arnaudroncari2468 3 ปีที่แล้ว

    Nice explanation, thanks !

  • @samikaraeen1315
    @samikaraeen1315 4 ปีที่แล้ว

    Great and simplify the BLoc , thanks a lot

  • @AmeiranYT
    @AmeiranYT 4 ปีที่แล้ว +8

    Me: *comes here in desperation because my app is a giant mess*
    Reso: "you are going to end up with a huge mess"
    -.-
    thanks for rubbing it in xD

  • @green4ao
    @green4ao 6 ปีที่แล้ว +1

    Thank you very much Matej, excellent explanation of BLoC pattern!

  • @bhargavpurohit4577
    @bhargavpurohit4577 4 ปีที่แล้ว +1

    Flutter vs react native which one is best??

  • @maniamadrid
    @maniamadrid 4 ปีที่แล้ว

    Simple and easy to understand. thank you

  • @yaserbinabdullah3900
    @yaserbinabdullah3900 4 ปีที่แล้ว +1

    Thank you so much

  • @sahilverma4077
    @sahilverma4077 3 ปีที่แล้ว

    can you please tell me what theme and icon pack you are using for your visual studio code

  • @AntonyKJose
    @AntonyKJose 4 ปีที่แล้ว

    this is awesome and academically valued

  • @thatsenam9183
    @thatsenam9183 4 ปีที่แล้ว

    Great Explanation. Great Work.

  • @AllenWillian
    @AllenWillian 5 ปีที่แล้ว +3

    I love the video VERY helpful thank you so much. One question, is there any different between the types Sink and StreamSink?

  • @leorochacom
    @leorochacom 5 ปีที่แล้ว

    Excellent video! Very easy to understand. Tks!

  • @jiwachhetri4165
    @jiwachhetri4165 4 ปีที่แล้ว

    Which vs code extension did you use to get the yellowish / colored line between your brackets.

  • @hammadpervez4568
    @hammadpervez4568 4 ปีที่แล้ว

    thank you so much for this video

  • @skipydie
    @skipydie 3 ปีที่แล้ว

    Hi, excelent tutorial! Could you please tell me why did you use a StreamSink in the State's sink and a Sink in the Event one?

  • @jewwantcady
    @jewwantcady 5 ปีที่แล้ว

    Excellent Explanation! I'll borrow some of your content to write something on how to use BLoCs - I hope you don't mind

  • @QuinnFavo
    @QuinnFavo 4 ปีที่แล้ว

    Thank you, very helpful!

  • @omgpuppet
    @omgpuppet 5 ปีที่แล้ว

    You're amazing. Honestly.

  • @michaeltolsma7717
    @michaeltolsma7717 4 ปีที่แล้ว +1

    You lost me at 12:47. I have no clue what's happening with that code or its use.

  • @dogukanbozkurt2235
    @dogukanbozkurt2235 5 ปีที่แล้ว

    wow, many thanks for this video matej

  • @santoshnaagula5224
    @santoshnaagula5224 4 ปีที่แล้ว

    Hi which extensions are you used ?

  • @FelipeVercingetorix
    @FelipeVercingetorix 5 ปีที่แล้ว +8

    Matej Resetár: "CTRL + F5 just to be safe"
    Me: "CTRL + F5" on browser

  • @shreyagupta4482
    @shreyagupta4482 6 ปีที่แล้ว +3

    Thanks for the great tutorial!
    Can you please tell me the theme name you are using for Vs Code?

    • @ResoCoder
      @ResoCoder  6 ปีที่แล้ว +2

      I'm using the Material Theme, specifically Material Darker.

  • @hassanhammad2040
    @hassanhammad2040 4 ปีที่แล้ว +1

    Great tutorial, first time i actually understood what BloC pattern is.
    But I am confused: Which one is better, BloC or Provider?
    Bcz both are essentially the same, one uses Consumer widget, other uses Streambuilder. API calls can be separated in both cases.
    Seems to me that the only difference is BloC is difficult/tedious to implement while Provider pattern is simpler. Then why is BloC pattern considered as the better approach?
    I would love to hear your thoughts on this, bcz I intend to use the best possible practices to build my apps, and right now I am confused between both.

    • @jackesdavid
      @jackesdavid 2 ปีที่แล้ว

      exactly what Îm thinking here.. Provider is doing the same in a more simple way... The engineering inside me is screaming : Why 4 methods is more performant than just one ?!

  • @WikkiOnIlluminati
    @WikkiOnIlluminati 5 ปีที่แล้ว

    Awesome tutorial.
    Thank you

  • @jeugenejohn4636
    @jeugenejohn4636 2 ปีที่แล้ว

    Really informative.

  • @ngodingitumudah1810
    @ngodingitumudah1810 4 ปีที่แล้ว

    What's different between StreamSink you used in _inCounter & Sink in counterEventSink ??

  • @nwxxzchen3105
    @nwxxzchen3105 4 ปีที่แล้ว

    Does it still need to be a stateful widget for display the counter, when you no need setState anymore?

  • @olivierlevasseur8229
    @olivierlevasseur8229 5 ปีที่แล้ว

    Amazing video !

  • @armandiskandarsyah5414
    @armandiskandarsyah5414 5 ปีที่แล้ว

    Can it be used to trigger event that coming from outside device?
    for example receive chat, receive notification, etc

  • @changkim8883
    @changkim8883 5 ปีที่แล้ว +2

    Great explanation! thanks! I have one question.. What's the difference in StreamSink vs Sink (16:07) ?

    • @MarciMatuz
      @MarciMatuz 5 ปีที่แล้ว +2

      EventSink is specialized type of Sink. (Sink => EventSink => StreamSink so you could basicly write EventSink/Sink too)
      Anyway StreamController also implements StreamSink so you could write this too: Stream get counter = _counterStateController;

  • @samatzhussipov1139
    @samatzhussipov1139 3 ปีที่แล้ว

    main.dart was stateless stateful ?

  • @amimulihsan5354
    @amimulihsan5354 3 ปีที่แล้ว

    Is bloc an architectural pattern like MVVM?

  • @AshwinkumarS-rd6zu
    @AshwinkumarS-rd6zu 3 ปีที่แล้ว

    awesome tutorial

  • @santoshneupane1234
    @santoshneupane1234 5 ปีที่แล้ว

    StreamSink and Sink are same ???

  • @nicolaszein
    @nicolaszein 5 ปีที่แล้ว

    to me though i don't understand the point of initialvalue in the builder. That should be the value set in the class, or we call a event to set it when it loads but i don't like this idea of setting it in the app, not in the class, can someone explain?

  • @testosistetest435
    @testosistetest435 5 ปีที่แล้ว

    Good. Thank Reso Coder

  • @easazade
    @easazade 5 ปีที่แล้ว

    i was a big fan of developing android with its native platform using java and kotlin. but this year i read more about flutter than last year and i immediately started to learn it. how do you think about flutter

  • @farazkhan4871
    @farazkhan4871 3 ปีที่แล้ว

    Bro which theme are you using?

  • @AmirKhan-fb3gw
    @AmirKhan-fb3gw 6 ปีที่แล้ว +1

    Hi, thanks for the video. Can you tell me how to call the dispose method in a stateless widget? Most of the examples are Statless Widgets for the bloc architecture. Am I wrong?

    • @ResoCoder
      @ResoCoder  6 ปีที่แล้ว +1

      You can't. Just use a stateful widget.

  • @aldyrambe2944
    @aldyrambe2944 5 ปีที่แล้ว

    Hi, what is better, BLoC or provider? i'm confused what should i learn

  • @wycliffeo4656
    @wycliffeo4656 5 ปีที่แล้ว

    so we are no longer calling set state with trhe implimentation of the block?

  • @moazelsawaf2000
    @moazelsawaf2000 2 ปีที่แล้ว

    Thanks a lot ❤❤

  • @panchcw
    @panchcw 5 ปีที่แล้ว

    nicely explain .hope to see more videos

  • @souzaramon1348
    @souzaramon1348 6 ปีที่แล้ว +2

    finally i understannnnnd

  • @geraldcampana9296
    @geraldcampana9296 5 ปีที่แล้ว

    What plugins are you using?

  • @ElliotCoil
    @ElliotCoil 4 ปีที่แล้ว

    what theme do you use?

  • @CoffeePrinceGaming
    @CoffeePrinceGaming 5 ปีที่แล้ว

    what plugin did u use to auto-write the ending tag of widget? //Text //Row //Column for example

    • @ResoCoder
      @ResoCoder  5 ปีที่แล้ว

      When you install the Flutter plugin, ending tags will be added for you.

    • @CoffeePrinceGaming
      @CoffeePrinceGaming 5 ปีที่แล้ว

      @@ResoCoder Hmm, is there any plugin out there available for React Native?

    • @ResoCoder
      @ResoCoder  5 ปีที่แล้ว

      I'm not sure.

  • @johncerpa3782
    @johncerpa3782 4 ปีที่แล้ว

    Great video

  • @s34n2
    @s34n2 5 ปีที่แล้ว

    Whats the difference between StreamSink and Sink? (13:30)

    • @MarciMatuz
      @MarciMatuz 5 ปีที่แล้ว +1

      EventSink is specialized type of Sink. (Sink => EventSink => StreamSink so you could basicly write EventSink/Sink too)
      Anyway StreamController also implements StreamSink so you could write this too: Stream get counter = _counterStateController;

    • @s34n2
      @s34n2 5 ปีที่แล้ว

      @@MarciMatuz thanks for the clarification.

  • @em3888
    @em3888 5 ปีที่แล้ว

    Great material, I use bloc delegate for the Log, it sort of know what state I am in and what state is next
    I am kind of wonder , what does kiwi and flutter bloc combine looks like, can you please do a demo

  • @DiazGunturFebrian
    @DiazGunturFebrian 5 ปีที่แล้ว

    thank you, loud and clear

  • @arunbhati101
    @arunbhati101 6 ปีที่แล้ว

    Nice explanation, great work. When is next video (manage state with BloC library) coming?

    • @ResoCoder
      @ResoCoder  6 ปีที่แล้ว

      The last date is next Saturday.

  • @alexanderkarg5226
    @alexanderkarg5226 5 ปีที่แล้ว

    Isnt this BloC Pattern like Getter and Setter Methods in a new Class in Java?

  • @wahyualfandi611
    @wahyualfandi611 3 ปีที่แล้ว

    i'm still struggling to understand this BLoC pattern. i really appreciate yout videos man.. i will repeat this vid until i grasp the concept

  • @abraiyan7984
    @abraiyan7984 4 ปีที่แล้ว

    Can we use enums for the events?

  • @aytunch
    @aytunch 6 ปีที่แล้ว

    Very clean tutorial. at 16:30 you talked about passing BLOC down the widget tree using inheritedwidgets. I am very interested in this implementation and I guess any app which is targeted for market should have that architecture. So can you please cover that in the future?

    • @ResoCoder
      @ResoCoder  6 ปีที่แล้ว +1

      I will make a tutorial about the BLoC library soon. It has a BlocProvider which is basically an inherited widget for BLoCs.

    • @aytunch
      @aytunch 6 ปีที่แล้ว

      @@ResoCoder Perfect can't wait:) notification is turned on;)

  • @rezaasgary1442
    @rezaasgary1442 5 ปีที่แล้ว

    What is the diffrent between bloc an mvp ?