Flutter Bloc Tutorial For Beginners | BLoC Architecture/Pattern & State Management Explained

Поділитися
Вставка
  • Опубліковано 30 січ 2025

КОМЕНТАРІ • 241

  • @GameSteals
    @GameSteals 8 місяців тому +37

    At 1:04:56, no offense, but the explanation seemed a bit flaky. Here are my 2 cents on why the state is not changing even after adding a new to-do object in the 'state' list.
    When we first initiate the state with an empty list [], this list has an address in memory (say A1), similar to how a house has an address.
    Continuing with this analogy, like how if more people start residing in the house, the address of the house does not change, similarly if we add more elements in the list, the address of the list will also not change.
    The emit() function likely compares two states based on the r-value (which is address in the case of Lists, Maps, and objects, and the actual value in the case of primitives like int, float, double, etc).
    Here emit() concludes that the state has not changed, since the address of the list has not changed, therefore it stops any further processing.
    Therefore, to actually change the address of the list,
    1. We have to create a copy of the list (This creates a new list with a new address (say A2))
    2. Add the items in this new list
    3. Pass this new list to emit()
    Now when emit() compares the two lists, it finds that the address is different, and it updates the state. Hope this helped someone.

    • @RivaanRanawat
      @RivaanRanawat  8 місяців тому +14

      Good explanation, thanks for taking the time to write & help others!

    • @sagarshah5341
      @sagarshah5341 8 місяців тому +3

      Man you are good at DSA!

    • @jatindersinghaujla
      @jatindersinghaujla 7 місяців тому +1

      ​@@sagarshah5341 it's general programming concepts not dsa. It works based on the address of list, map etc. To understand this in details need to know how equals and hashcode works

    • @sagarshah5341
      @sagarshah5341 7 місяців тому

      @@jatindersinghaujla The guy understood what I was implying.

    • @andrewspourgeon
      @andrewspourgeon 6 місяців тому

      Damn Good explanation Bro , But I didn't understood one thing , as per u r explanation
      - When we first initiate the state with an empty list [], this list has an address in memory (say A1) which does not contain any value.
      - Then if we add a value to that list the address of the list will still be the same
      - According to this analogy , why the first element that is being added is getting shown ?
      - If u observe clearly at 1:02:55 the first value is shown , its stopped showing only from 2nd value

  • @MrxAmjad
    @MrxAmjad Рік тому +81

    As of now, This man is God Gift for flutter developer, His insane contribution for Flutter Developers always be memorable in flutter history, this much quality content absolutely for free is ❤❤❤❤❤.

  • @kevinvishal9071
    @kevinvishal9071 10 місяців тому +2

    This tutorial is a gem for Flutter developers. The explanations provided are incredibly detailed, making a complex pattern appear straightforward. I'm grateful for the thorough guidance provided by the instructor. Thank you, Master.❤

  • @hashir2749
    @hashir2749 10 місяців тому +5

    Seen a lot of state management tutorials but this one is on Top.

  • @samuelvmoura
    @samuelvmoura 10 місяців тому +3

    Wow, I've been after some good, well explained bloc tutorials for a while and yours got literally all my questions answered. thank you so much!

  • @synnotus
    @synnotus Рік тому +7

    You are the best thing ever happened to flutter. Your explanations are beginner friendly. Thanks

  • @Vikram_Naik
    @Vikram_Naik 6 місяців тому +1

    Manhhhh! This is the best tutorial out in UA-cam for bloc state management
    You are amazing

  • @LinuxUser_
    @LinuxUser_ Рік тому +5

    As my 7th-semester exams are concluding next week in pursuit of a CS degree, I'm eager to delve into Flutter projects.
    I already have a grasp of Flutter and Dart basics. However, time is limited, and with companies beginning recruitment, I'm feeling the pressure due to the absence of projects.
    I would greatly appreciate your guidance, Rivaan, including video recommendations to kickstart my Flutter journey, project ideas, and tips for both project development and placement preparation.
    Your assistance means a lot 🙏🏻

  • @AkshayGupta-qb1yn
    @AkshayGupta-qb1yn 5 місяців тому +1

    You're a genius! Unlike other UA-camrs who explain everything at the beginning, you saved the block definition explanation for the end of the video. I really appreciate your content, and thanks to your 2-hour 30-minute tutorial, I successfully cracked the interview. Thank you!

    • @RivaanRanawat
      @RivaanRanawat  Місяць тому

      That's great news, congratulations Akshay 🥳

  • @chocomist_7
    @chocomist_7 2 місяці тому

    I have spent over 10 hours learning Bloc and this 2.5 hour have been the most valuable in my journey thank you for such a good explanation though I was unable to learned the weather app completely but I am hoping to cover it up soon by rewatching it.

  • @numan947
    @numan947 10 місяців тому

    Hey! Just wanted to say thanks! I was on the fence about whether to invest about 3 hours of my time in it, but I am glad I did. Your shown examples along with the explanations helped clear out a lot of the confusions and questions I had.

  • @Sampelmind81
    @Sampelmind81 Місяць тому

    Thank you so much for your time you put in your video content to share your knowledge with us for free. I also watched your tutorial typeracer to learn nodejs and mondodb, but was strugged understanding clean code with bloc. After watching your 2:30 hour video, i understand bloc much better an i will use small projects to get use to it. Wish you a happy new year!!!

  • @brmIamin
    @brmIamin 25 днів тому +1

    really the best video explaining Flutter BLoC i came across.
    i wish the best to you brother.

  • @rolesquare3624
    @rolesquare3624 Рік тому +2

    I was wondering when Rivaan will move to bloc and here it is. Thank you for showing me a lot in flutter.

  • @Mitsue51
    @Mitsue51 10 місяців тому +1

    Thanks, it's really helpful because following the login tutorial from the bloc documentation wasn't enough for a beginner like me. You explain really well, thanks for your time

  • @richardwindley7355
    @richardwindley7355 Рік тому +1

    When I started watching, I thought "I won't sit here for 2.5 hours..." but I did. This is a great video which explains the subject matter very clearly with good examples.

  • @pratyushvaibhav
    @pratyushvaibhav Рік тому +9

    Hats off
    A big round of applause ✋
    A big thanks for this 🙏

  • @JariyahMindset
    @JariyahMindset 6 місяців тому

    Thanks so much. This course was a long overdue for me but I finally got it done. I feel way more confident about Bloc and Cubit now.

  • @rakshithadilshan9888
    @rakshithadilshan9888 Рік тому +4

    Very valuable content. No one has taught like this❤

  • @anurudhsingh3397
    @anurudhsingh3397 Рік тому +1

    I have no words!! Fluent like air!!!! Thanks !!!!

  • @SohaibSanaa
    @SohaibSanaa 11 місяців тому

    I came to learn Bloc State Management and ended up as his fan. I love the way how he Explain and teach. If this course was on Udemy, he must hai Millions of Students by now. (An this course should be on Platforms like Udemy) 💯❣💫

  • @Safi_ul_lathif
    @Safi_ul_lathif 12 годин тому

    who the hell you are bro !!!! you are rocking !!!!!

  • @KhawarShahzad-lj9gh
    @KhawarShahzad-lj9gh 6 місяців тому

    For first time I saw a tutorial completely. 🙂

  • @jatindersinghaujla
    @jatindersinghaujla 7 місяців тому

    This video is worth watching. You cleared so many doubts.

  • @hussainrizvi5423
    @hussainrizvi5423 Рік тому

    OH MY GOD!!! THANK YOU SO MUCH SIR... this is by far the best video for bloc tutorial.

  • @arminyazdian6598
    @arminyazdian6598 10 місяців тому

    Thank you so much for putting huge amount of time and effort!

  • @malukishtiaq
    @malukishtiaq 10 місяців тому

    You are just awesome my friend. I watch your videos on priority. It helps me stay polished.

  • @jayisampelliwar5065
    @jayisampelliwar5065 Рік тому

    finally, the Most awaited video ✅ best flutter channel exists on YT

  • @avazbeknadyrbek790
    @avazbeknadyrbek790 Місяць тому

    Thanks! I just finished and finally understand!

  • @aizen_3438
    @aizen_3438 Рік тому +2

    Hats off waiting for this 🔥

  • @arnaudroncari2468
    @arnaudroncari2468 Рік тому +1

    Such a great teacher !

  • @copaceticobserver
    @copaceticobserver 7 днів тому

    You helped me immensely brother

  • @sabinpoudel6969
    @sabinpoudel6969 Рік тому +1

    Rivaan you are gem for a flutter community.
    Thanks for clearing my doubts.!!!

  • @faridahmadov5991
    @faridahmadov5991 Рік тому

    You are the best tutor ever!

  • @justetk
    @justetk 8 місяців тому +1

    Nice Video! Thanks from Azerbaijan!

  • @its_suresh_v
    @its_suresh_v Рік тому

    Riwan love you man the way you explained bloc outstanding brother, Crystal-clear explanation superb 👏

  • @Badshah1614
    @Badshah1614 Рік тому

    Thank you so much sir for uploading a new flutter video again . How long have we been waiting for your next Flutter video?

  • @alanta335
    @alanta335 9 місяців тому

    best tutorial i heard in a long time🤩

  • @hurbangash1302
    @hurbangash1302 9 місяців тому

    i did not know bloc was so easy .thank you so much rivan bhai

  • @andrewspourgeon
    @andrewspourgeon 6 місяців тому

    Dear Rivaan , U have an excellent explanation skills bro ❤‍🔥 , This one is a gem 😍

  • @hokitamo
    @hokitamo 5 місяців тому

    best teacher ever!

  • @VaibhavC-co1bi
    @VaibhavC-co1bi Рік тому +1

    this is so awesome bloc tutorial and very clear so that developers like me can understand. Can you make a video about the features first appraoch or some project based on bloc

    • @RivaanRanawat
      @RivaanRanawat  11 місяців тому

      Will be coming soon, hopefully March!

  • @DataSet
    @DataSet Рік тому +24

    For those who don't know, Rivaan is only 17

    • @c00per_
      @c00per_ 9 місяців тому +1

      Ikrrrr💀🗿💥

  • @maulahaz
    @maulahaz Рік тому

    MashaAllah.. very good explanation. Deep like diving in the ocean. Recommended to watch.

  • @aouadicharaf1038
    @aouadicharaf1038 9 місяців тому

    finished!! Amazing content ❤❤❤

  • @muhammadbilal-sd9kf
    @muhammadbilal-sd9kf 10 місяців тому

    Your way of explaining bloc pattern is amazing.
    Please make a video of about MVVM architecture using provide.
    thanks

  • @spark-games-uk
    @spark-games-uk 11 місяців тому

    Man you rock! Thanks a lot for sharing your expertise ❤

  • @chitko1706
    @chitko1706 Рік тому

    awesome sir. you are the mentor who i was looking for🎉.please,upload more.

  • @roninspect4357
    @roninspect4357 Рік тому +5

    a big project with bloc and supabase would be very awesome & unique.

  • @spark-games-uk
    @spark-games-uk 11 місяців тому

    Thanks!

  • @sujalutekar9417
    @sujalutekar9417 Рік тому

    I was waiting for this only 🔥🔥

  • @realcontentfun
    @realcontentfun 4 місяці тому

    Best Video of bloc no doubt just one thing could you explain more about equatable using bloc and why we do it and what error we can face if we dont if you cannot make a video just reply with some answer because i have noticed sometimes we do the same emit twice bloc listener get called once so will equatable do some logic

  • @nisafv.a8710
    @nisafv.a8710 Рік тому +1

    Thankyou so much maaan . Really helpful ❤ . God bless

  • @Csroot667
    @Csroot667 4 місяці тому

    At 1:47:38, to avoid the little error glitch is it a good idea to add a check if state is AuthInitial in the BlocBuilder part of the BlocConsumer and return an empty widget like Center? Ex: if (state is AuthLoading) {
    return const Center(
    child: CircularProgressIndicator(),
    );
    }
    if (state is AuthInitial) {
    return const Center();
    }
    //AuthSuccess Part

  • @RishabhTiwari-v3l
    @RishabhTiwari-v3l 6 місяців тому

    A Very Big Thanks to You Sir ❤❤

  • @scorpionadvertising8808
    @scorpionadvertising8808 7 місяців тому +1

    He is a better teacher than a coder😂

  • @manohar.acharya
    @manohar.acharya Рік тому +2

    was despereatly waiting for bloc wanna see fullstack project on bloc & cubit

  • @RameshA-r2u
    @RameshA-r2u Рік тому

    Outstanding Explanation.....

  • @abidhasansnigdho
    @abidhasansnigdho Рік тому

    You are awesome at making complex things easy ❤

  • @sagarshah5341
    @sagarshah5341 8 місяців тому

    On 25:09 would it be a better idea to create a global object for the class CounterCubit?
    That way we only have to deal with the global instance of the state!
    What do you think?
    class CounterCubit extends Cubit {
    // int counter = 0;
    CounterCubit() : super(0);
    void incr() {
    emit(state + 1);
    }
    void decr() {
    if (state == 0) {
    return;
    }
    emit(state - 1);
    }
    }
    // after creating this object in the same file, no NEED for an extra PROVIDER at all
    final gCounterCubitObj = CounterCubit();

  • @amityadav85
    @amityadav85 Рік тому

    brilliant! thank you kind sir! very nice method of teaching!

  • @sikandershah5356
    @sikandershah5356 9 місяців тому +1

    Error Solution at 1:47:07
    Type of Error Exception has occurred.
    _TypeError (type 'AuthInitial' is not a subtype of type 'AuthSucess' in type cast)
    Solution
    To fix this issue, you should handle each state appropriately in both the listener and the builder. Here's how you can modify your code to handle the AuthInitial state in both places
    Code
    class HomeScreen extends StatelessWidget {
    const HomeScreen({super.key});
    @override
    Widget build(BuildContext context) {
    return BlocConsumer(
    listener: (context, state) {
    if (state is AuthInitial) {
    // Navigate to the login screen if authentication process is not started
    Navigator.of(context).pushAndRemoveUntil(
    MaterialPageRoute(builder: (context) => LoginScreen()),
    (route) => false);
    }
    },
    builder: (context, state) {
    if (state is AuthLoading) {
    return const CircularProgressIndicator.adaptive();
    } else if (state is AuthSuccess) {
    return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
    Center(
    child: Text(state.name),
    ),
    GradientButton(onPressed: () {
    context.read().add(AuthLogOut());
    }),
    ],
    );
    } else {
    // Handle other states here (e.g., AuthFailure)
    return Container(); // Placeholder for now
    }
    },
    );
    }
    }
    Thank you

  • @tube-rp1nb
    @tube-rp1nb 3 місяці тому

    Nicely done.

  • @livingfreeely
    @livingfreeely 10 місяців тому

    thanks a lot Rivaan

  • @KaranMehta-y3e
    @KaranMehta-y3e 8 місяців тому

    An Advantageous tutorial.👋

  • @muhammadjavedrafique4592
    @muhammadjavedrafique4592 Рік тому

    oh yrr Rivan i dont know who told you what we need on which time 🤣🤣.... tnku Gem

  • @LelloApp
    @LelloApp 8 місяців тому

    it was fantastic!!! thanks

  • @arthonuy7211
    @arthonuy7211 Рік тому +1

    Hey Rivaan I have a doubt in Todo app , when we first update the empty list by state.add() then emit(state) then why emit is notifying the listeners about the change? I mean todo list page should not show anything right?

  • @giovannygarciaholguin-g7w
    @giovannygarciaholguin-g7w 11 місяців тому

    this is pure gold

  • @pravinprince3221
    @pravinprince3221 Рік тому

    Thank you for the wonderful tutorial bro, it is very helpful for me and my team thanks again

  • @yoskokleng3658
    @yoskokleng3658 5 місяців тому

    bloc VS riverpod, which one better for large scale application? please tell me and why?. thank you

  • @azamovdev
    @azamovdev Рік тому

    Good Bro I wish luck your works

  • @SangGuChoi
    @SangGuChoi 11 місяців тому

    your video is very useful!
    So, i have one Question, Is there any no need domain layer that use in clean architecture?

  • @shhhhh.
    @shhhhh. 10 місяців тому

    Great video 👌👌👌

  • @footballace8371
    @footballace8371 6 місяців тому

    Please do a video on Stacked MVVM Architecture

  • @HarshAgrawal-u2o
    @HarshAgrawal-u2o 6 місяців тому

    I am getting an error at 12:00 when we add incrememt method to the onpressed button and the error says
    Error: The method 'increment' isn't defined for the class 'int'.
    Try correcting the name to the name of an existing method, or defining a method named 'increment'.
    onPressed:() => counterCubit.increment(),

    • @RivaanRanawat
      @RivaanRanawat  6 місяців тому

      Can you share how you created the variable counterCubit?

  • @HenryCavill-x1s
    @HenryCavill-x1s Рік тому

    Amazing video, that's very good

  • @Eunsmoqj
    @Eunsmoqj 10 місяців тому

    You are insane. Thx for everything. Im learning from u a lot.

  • @szyszak9424
    @szyszak9424 Рік тому +1

    1:37:17 when after circular loading indicator ends it shows previous screen for a bit and then goes to next one, is it a glitch or what?

    • @viniciusVS8v
      @viniciusVS8v 4 місяці тому

      Is not a glich, the state changes really fast and create that effect, add this code below the CircularProgressImdicator if:
      If(state is AuthSuccess){
      return const SizedBox();
      }
      Problem solved

  • @HGHG-yn4uo
    @HGHG-yn4uo 11 місяців тому

    You are the best 😘😘

  • @jainambarbhaya1736
    @jainambarbhaya1736 Рік тому +1

    so which is more recommended Bloc or Riverpod ?

  • @MohammedSalmanP
    @MohammedSalmanP 11 місяців тому

    Such a great Tutorial.

  • @techwithotabek
    @techwithotabek Рік тому

    Hey Rivaan, great tutorials brother. Can you also make a tutorial for Provider like you did for Bloc?

    • @RashidKhan-kd9xl
      @RashidKhan-kd9xl 10 місяців тому +1

      He had it.. you can see it ( in his 3rd app in 20h course of flutter for beginners) but there nothing much in providers ❤

  • @rahulvarmarudraraju3012
    @rahulvarmarudraraju3012 День тому

    What is the vs code theme that you are using?

  • @pallabroy8800
    @pallabroy8800 Рік тому

    Pls make a dedicated course on fl_charts and also make a video on how to use fl_charts with api to use real time data for the graphs

  • @pravinprince3221
    @pravinprince3221 10 місяців тому

    Good morning bro one more request bro can you please do detailed videos on bloc_concurrency and transformer like this one please

  • @alexandreforget7866
    @alexandreforget7866 Рік тому

    Am I the only one with an error when a try to logout after the modification at 1:47:20
    A receive type AuthInitial is not a subtype of type Authsuccess in type cast.
    I tought maybe I made a mistake and run the end project from Rivaan github and have the exact same error

    • @alexandreforget7866
      @alexandreforget7866 Рік тому

      Just saw that he have the same mistake in a frame of the video...

    • @hvstech9018
      @hvstech9018 Рік тому

      @@alexandreforget7866 Did you fix it??

  • @PaoloTshiyole
    @PaoloTshiyole Рік тому

    That's amazing, good video
    May you do a video with flutter and gemini pro api please

  • @zaitoontech
    @zaitoontech 10 місяців тому

    Awesome thanks bro

  • @ndonnayacynth1991
    @ndonnayacynth1991 9 місяців тому

    Thank you so much

  • @joelmathew3253
    @joelmathew3253 Рік тому

    Great one

  • @hiteshnath7729
    @hiteshnath7729 10 місяців тому

    Bro can you send your vscode settings json, I loved your theme ❤

  • @aash1r869
    @aash1r869 Рік тому

    Hey Rivaan, Kindly make a video on Flutter using Stacked state management, tutorials on stacked are almost impossible to find, would be of great helpp!

  • @codewithsadid
    @codewithsadid Рік тому

    great boss...................

  • @skullerhood
    @skullerhood 4 місяці тому

    You are hero

  • @Revanth233
    @Revanth233 Рік тому

    Tqsm bro for making videos most beautiful 😍

  • @jayisampelliwar5246
    @jayisampelliwar5246 Рік тому +1

    Which theme are you using? Could you please tell me the name ???

    • @mohamed1khaled2
      @mohamed1khaled2 Рік тому

      .

    • @mohamed1khaled2
      @mohamed1khaled2 Рік тому

      write this in search and we found the theme 'eserozvataf.one-dark-pro-monokai-darker' the name is One Dark Pro Monokai Darker theme

  • @pradeepg4498
    @pradeepg4498 Рік тому +1

    How to handle stream and bloc state value in another bloc

  • @NischalDahal-w9j
    @NischalDahal-w9j 10 місяців тому

    can you create the video like how can we dependency inject, using the annotation, and using of json serizable and more

  • @madmilitiangaming5694
    @madmilitiangaming5694 Рік тому

    amazing content