Flutter Bloc Tutorial For Beginners - Package
Vložit
- čas přidán 27. 07. 2024
- This is the Flutter Bloc state management package explained for beginners and noobs. It is the easiest way to learn how to use the package Bloc with flutter and dart. This is one of the most complex state management available with flutter and it can be confusing to learn how to actually use it. In this video I will show you how to use flutter bloc package state management with flutter but the explanation will be super simple and straight to the point. For more information you can check the official bloc document of the package which I will link in the description. In this example we will use the blocBuilder which is probably the most simple way to use the bloc state management. This Flutter bloc tutorial for beginners as been created by Flutter Mapp. For more tutorial about flutter you can join us on youtube. This is by far the simplest bloc tutorial with flutter available. If you are a beginner and you want to learn how to use bloc with flutter, watch this tutorial. Bloc is a great state management with flutter and I hope this beginner tutorial about bloc will help you to learn how to use flutter bloc package.
LINKS
Max on Flutter's channel: @MaxonFlutter
Max on Flutter's Bloc complete explanation: • Master Flutter and the...
Bloc Package: pub.dev/packages/flutter_bloc
Flutter's official website: flutter.dev/
Flutter Mapp's official website: fluttermapp.com/
CODE:
You need the code of this Bloc example? ** Not available anymore. Sorry **
COURSES
Flutter courses: fluttermapp.com/
The Complete Advanced Flutter Course:
1. Clean Architecture
2. Flutter Testing
3. Flutter Performances
4. Widget Lifecycle
The Complete Beginner Flutter Course:
1. Setup Flutter
2. Learn the basics
3. How to solve bugs
4. Flutter Advance Widgets
5. Packages (Camera, Open Website, etc)
6. State Management (Provider)
7. Local Storage
8. Firebase (Storage, Authentication, Database)
9. HTTP Request
10. Publish
OVERVIEW
0:00 Flutter Bloc State Management Package
0:10 Pubspec Flutter_Bloc and Equatable Package
0:30 Models
1:20 Bloc Extension
1:45 Visual Explanation
2:12 Bloc States
2:42 Bloc Events
3:25 Bloc State Management
5:28 Become an Advanced Flutter Dev
5:42 MultiBlocProvider
6:15 BlocBuilder
7:23 Add Bloc Event
8:00 BlocBuilder Explained
MISSION
Our mission at Flutter Mapp (Flutter Mobile App) is to help purpose driven Flutter developers go full-time doing what they love and making an impact through coding. We achieve this with useful Flutter tips and straight to the point Flutter videos.
RECOMMENDED
Top 30 Flutter tips and tricks: • Top 30 Flutter Tips an...
Flutter of the day Playlist: • Flutter of the day
DISCORD
Invite: / discord
SOCIAL MEDIA:
Instagram : fluttermapp
Twitter : FlutterMapp
Website: www.fluttermapp.com
CONTACT
For business inquiries email me here: info@fluttermapp.com
Website: fluttermapp.com
#FlutterMapp
#Bloc
#Flutter
Awesome video!!! I was needing
Pleasure! I hope this will help you 👏🔥
@@FlutterMapp Thank you very much! this goes!!
Awesome! this video is simple, direct and useful, thank you for your explanation
Please continue with this videos! It's awesome.
Thank you a lot Dias 🙏👋
Finally! This makes sense, thank you !!
Pleasure, thanks for the comment Var 👏🔥
After seeing this bloc state management !!, now i have to learn stress management welll!!!!!
State management is great 👏🔥🔥
Thank you for this!
Isn't BloC the best state management approach for Flutter? Thanks for sharing Pizza & BloC @Flutter Mapp 💪
there's nothing best.. some people prefer Getx, some provider some bloc
Thanks for the help Massimo! I do really appreciate it. Mac on Flutter is going to the mooooon 🚀
not the best. but the most frequently requested in the list of skills required in job vacancies.
@@masmmaw it is the best
Best is Riverpod! over all
Thanks a lot ❤️
Great Video 🚀❤️
I GOT IT HAHA SAVING THIS TO MY PLAYLIST 😍👍
Letsgoooo, it was the most simple way to explain it I think 😂👏👏🔥
I'm interested in you pro course, but it would be useful on your website if you would. indicate what version of Flutter / Dart it covers. Many changes in last months. thanks.
So useful thank you :)
Pleasure Erdem, thanks a lot! 🔥
The best part of video is about Einstein )
Good video!
The King IS back✊✊✊🌟🌟❤️❤️
loool! Thank you very much Abdoul 👏👏
You are the king man ⚡️🔥
Thanks ❤️💯
Return back and you still stunning with these videos
🤣🤣🤣 Its been a while! What is new in your life Hisham? 🙏🙏 and thank you very much! 🚀
@@FlutterMapp thanks louis
It's tough but we can still fight
Hope you are well
Nice tutorial
fire Mapp!
Thanks Mohamed 🙌🚀
@@FlutterMapp looking for a cubit video😍
Hi, this is a great and simple explanation. I have a question, let say that i already increment the pizzas to 2, how can i access the pizzas data in other page? It seems like it always start with initialState
Nice!
Thank you Wykeless! 🔥
Thanks for the great video!
Not sure if you agree, but Bloc has so much code redundancy (still great and everything), I suggest to give GetX's state management solution a shot! I'm sure that you'll like it :)
Thanks for the suggestion, I will have to make a video about GetX for sure! 👏
Is there a video for the getx state management yet?
@@FlutterMapp any videos on that yet?
lol this didn't age well
yeah right! XD@@apexashwin
Thanks for your great video! I have a question about the zero to hero course: Is it updated? Because there were so many changes as I saw from 2.0 to 2.4
The Zero to Hero course will always be updated for major changes like the nullsafety. The course is 100% with null safety as for now 2.0+. I dont remember the exact version tho. But if you have problems, you just have to say it in the private discord and I will make a new video about the lecture if its deprecated 🎉
@@FlutterMapp is it upgraded to flutter 3.0?
Oooh nice👍👍👍
Thanks for the comment Denis! 👏
Thanks for an awesome flutter video.
May I ask you at 7:09 of this video and at line 81, what is the random value?
when you add pizza it will position the pizza in random places in the screen
Since Provider released, I don't think I will use Bloc anymore. But you should try Cubit, bloc with more simpler implementation
Thanks a lot for the tip Rian! and yeah provider is pretty cool! Riverpod is the new provider if you want to take a look 🙏 Its the same thing but better and you don't need the context anymore 🔥
@@FlutterMapp based on my usage, i find GetX more smoother to use. Riverpod tends to be laggy on bigger applications in my experience using it. Like using hookwidget - it tends to rebuild the whole widget instead of just the specific subwidgets. When using consumer widget approach on riverpod, GetX still is much simpler to implement.
Great tutorial! I heard next one is riverpod 🤔🙏
This will come eventually 🎉 Thank you very mch!
Thanks great course
P.S: What's the name of the font you use in Vscode?
I use the original font but with the dark mode 🙏 Thank you very much! 🔥🚀
consolas
Thanks.. though i imported import 'dart:math'; .. still random keyword gives an error? .. Do I need to initialize Random random = Random() if yes then where?
tanx for video
Is it pageview is the best widget to achieve tab and fragment like in native android ? I found that it seems heavy and lagging sometimez
There is a widget called TabBar by memory 🧐🧐
Hello guys. I just wanted to ask the scope of flutter in 2022 and onwards. What do you guys think about flutter in comparison with other platforms?
Well the answer might by bias here to be honest 😂 I dont really use any other platform, but as for now I think the community on Flutter is muchhhhh bigger and stronger than other platform, this is really cool for learning 🎉
Confusing @4:28 where did you get the state in the if(state is PizzLoaded) statement???
😂 if you like teaching style 😂 so funny bro❤️ round to 1M and more!
😂😂 Thank you very much Ali👏👏
For fresh demo of pagination api for infinite scrolling:
look for few point:
1.How to refresh/reinitialize infinite pagination list like pull to refresh kind of this?
2.How to handle this StateStatus { initial, success, failure, error, noInternet } like failure means list loaded for first time then fetch for other time we encounter error Api is not responding or any other error (How to restart Api from that state like error occur on page no 3 and show footer container "something when wrong" and retry button to recall api cal for page no. 3 but not from beginning like page no. 0 or 1).
duplicate*
OMG The first time I see we can use for loop in widget tree 😮😮😮
Yeah its pretty cool 😂
Incredible quality video, funniest are Einstein and Elon, bravo!
Thank you very much Kamil! I appreciate it a lot 👏👏
Thanks so much for the intro to bloc. Now I know that I'll stick with Provider. This is so much boilerplate, ughhh...
loool, true! its more for big projects 🔥
what kind of plugin need to use to appear the yellow line under class
I really don't get why people like BloC so much, useless boilerplate that just adds up with time and creates technical dept. MVVM with stacked is so much better and easier to implement clean architecture then this.
Hahaha.... Einstein said one day... Please like but don't subscribe.! You earned a subscriber today! 😂 😁
🤣🤣🤣 thanks tho. glad you liked the joke 🤣🔥
thks sir
Pleasure Fuho! I appreciate it!
Can I do this, instead of creating pizza variable in each event, I can create pizza variable in abstract event class, and the following events inherit abstract class call super constructor, this helps inherited event classes its parent class doesn't have to create pizza variable anymore
What if I have created a Error state which return the error and i want to show that error as snacbar? please help.
Registered to the mailing list for Bloc example code. but still, no email came from site?.. pl. help me to get code.. I am facing some issue
thanks for this beautiful video, and please i followed along withe the video but when i started the app it stucks in the circularprogressIndicator, how do i fix it ?
This mean your flutter app is not running on any state created. Verify that in the multi provider you trigger the even and that the event emit the PizzaState 🔥👏 Thanks for the comment Pepega
@@FlutterMapp thank you so much i cheked that and still, igeuss its in the initial state because i printed on the blocBuilder in the case if (state is PizzaInitial) and it is shown on the consol, my event LoadPizzaCounter is doing nothing i geuss but idk how to fix it its my first time using bloc XD
@@pepegatrynda2479 you can get the full code in the description in the worst case 🍕🍕
@@FlutterMapp thanks for that also i tried it but i received another code i dont know of what, thanks so much for the help ✌️👍
same here too
GetX Please!!!
Eventually 🔥
It would be better if u also add images to show the link between different dart bloc files
I think you are right 💪🎉 Thank you for the recommendation 💪
So much complexity! I don’t understand why people like bloc. Seems way overkill for most apps!
Yeah its pretty overkill, this is to be use for big projects usually 🎉
please make video with post method with bloc pls
Thank for the comment idea Zokir!
Most of the time you just straightly mentioned the line/block of code without clear explanation on the logic behind Bloc concept. So this doesn't seems targeted for beginners and noobs. The only explanation that I think is better than others is the `props` part. But anyway, still appreciate your effort on making this video.
Yeah I do think you are right to be honest, this video was rushed to be honest, I appreciate your feedback and will make sure to provide good explanation next time 👏
Why did you use MultiBlocProvider when you only had a single provider?
I always use the MultiBlocProvider because eventually I will add other bloc provider and it's super simple to add more bloc provider like this. You don't need to do it like this. I just think it's easy to understand for people that want to have multiple bloc provider eventually 🔥👏
@@FlutterMapp Isn't though "heavy" for the app to have all the blocs initialized so early if not needed ?
What is your approach if you have many (small) cubits/blocs , one for each feature ?
❤️❤️
Thanks Mohamed! 🔥
which state managment package are you prefering?😊
Well I mistakenly subscribed and broke Einstein's rule.
Nooooooo 😂😂😂😂 For real, thank you very much Naimur, I do really appreciate it and welcome to flutter mapp 🔥👏
Ah I see the ctrl + z move :D
exact! 👏😂
I don’t get what’s special about Bloc. So much boilerplate compared to Riverpod.
There must be something, I need to know 😅.
Furthermore, This particular scenario where async value is served, Riverpod uses union as state that can either have data,loading or error. I believe a union could be used in this code example instead of relying on class extension to distinguish current state.
If you have used Redux in React and liked it, you will like bloc. Otherwise not so much.
😂😂
Did the Mutant Ninja Turtles start filming educational content for CZcams? :)
I actually lol ed
fast video useful for know new idea not for learning, i can't finish this video
Damn.. Will try again next time 👏
thanks for the video
why some companies ask for bloC its such a shitty state management ,
easyyyyyyyyyy , did someone was chasing you ?!
Its always a chase in every video 😂😂😂😂
R I V E R P O D
loool, will eventually come 🔥
3:22 Einstein said what?😂
this is absolutely like usa bringing democracy to the smurfs
😂 Sorry I dont get the reference about the smurfs
Pizja❤️
Theres so much debate about getx, i want to know about your opinion
My opinion: I have never try getX in my life... 🤣🤣 So I can't really say anything to be honest 🤣
It's simplicity will over complicate your project in the future it's really not flexible if you want something easy and less complicated than Bloc then I recommend Riverpod
So much code for a little feature 🙂
true loolll 😂😂😂
If bloc makes a lot of boiler plate code why is it so popular?
I dont get why use bloc instead of any simple class, sorry for asking might be dumb but Im missing smthg I guess
There is no stupid question. Ok so if you use a class, you will have to use setState after to refresh the screen right? But when you use a state management like bloc by example, you don't have to use setState to refresh the screen. The state management will handle for you when the things on the screen need to be updated. ALSO, let's say you want to use the information in an other page, with a simple class you will have to pass the data through the widget tree, but with state management, you can access the data with the context.read. I hope this make any sense. 👏
@@FlutterMapp Nice
need that book for free
now I feel like eating a pizza 🤣
PLease add how to use BlocObserver when click favorite it will update without buildind the child of bloc builder
Bloc observer is use to see more information about the bloc behaviors. I didnt add it in this video since it was already 8 minutes 🤣 You can check the code available in the description and you will find that it's coded with the bloc observer if you need it 🙏🙏
@@FlutterMappthanks. What you will advise to me as a beginner if i want to use bloc in scenario like toggling isFavorite? Example i havr a listview where the children are list of productModel then i click the heart button it will change the color. Or do ineed to build the whole listview?
Insanely verbose...Bloc is absolutely verbose... Even thought many people criticize GetX arguing it is not being used for "big players", basically the reason for it is only for one -> The Framework(GetX) maintenance! Currently, there is no a big player behind the 'GetX maintenance', only the community, because GetX is open-source. The community is not a guarantee of the "continuity of GetX's updating's" in the future...This is a reason that makes think about 'not use GetX anymore'; But, regardless that, GetX is a wonderful option for state management as well (actually, no only that, but also route management, dependency management) totally focused in productivity, meaning.. less code...more projects done... Thinking.. Is it the reason for use a framework?? Less code... More projects... The developer creates the logic... the framework create the code...
Will do a video about GetX eventually 👏🎉 Thanks for sharing!
I used to use BLoC, but I found myself spending waaay too much time writing boiler plate code, so I switched to GetX
Nice video but you didn't explain the 'what' and 'why' but only the 'how. I have no idea what a bloc is, let alone why I would even use this. For example, what are the pros and what and what are the cons? It would have been nice if you (shortly) mentioned this :)
Damn! That is true! Ok sooooo, the goal of using bloc is to get rid of the setState in the first place. Bloc will handle the data change and update the screen without setstate. Second, it's pretty cool since you can change the state of the app (You can visualize a state like a page of the app.) So let say you have an home page and a button that trigger an error in the app (the red screen). With bloc, you could say, if there is an error in the app, the display this error message, in this way, you don't have any red screen anymore. I hope this help in some way Jip 🔥
@@FlutterMapp Thanks!
great video... but is not pepperoni pizza 😅
My head right now:
Remove pizza, add pizza, pizza, pizza....
🤣🤣🤣 I should have find some synonyms for the pizza word. 🤣🍕🍕🍕
hhahah
How many times you said "Pizza"?
😂😂😂Wayyyyy to many times 🍕🍕🍕🍕🍕🍕🍕🍕
Dude! My ear hurts ... PIZZA PIZZA PIZZA
"... What the alphabet is?..." 😆
This isn't for beginners, it's rushed, it's for people who already have some basic knowledge of bloc, didn't even explain anything, just a talk through code section
It`s a bad using pattern bloc very much code for simple things.
Yeah bloc is more for big projects I think 😂
greate !,
but to be honest i still did not understand a word about bloc
my god, Google really needs to create proper languages, instead of saying "developers would not understand"
- Include tagged unions.
- Include nice case statement (not the switch atrocity Dart has; it's not familiar, it's awful, everyone who has experienced better hates it.)
... This is painful ...
Go is the same. They just cripple the languages to make them "simple" and "familiar" creating such barely usable mess, that one never feels safe in! Did I forgot a branch? You will never know. Should have been type checked, but what ... maybe some external tool can analyze the code? How trustworthy is it? ..... and using if-else for everything is so verbose and _not_ expressing the intent, of "taking a different branch for each option". If-else is for logic stuff... look at 7:13 ... "it will be caught in testing" - "oh wow, how maintainable!"
The tutorial is great, and fun ... but seeing how it's forced to use completely _wrong_ constructs to use the pattern... it makes my skin crawl, and my brain depressed... :(
- Sorry I'm writing this under this video. Also, I'm sorry to myself, because it's pointless... doesn't matter where I wrote it, it would be pointless... :(
where code?
Not explained property for beginners
It was to complex? or not enough image example, I would like to have your opinion so the next video can be better (please write a new comment so I can see it 🎉) Thanks Vella
@@FlutterMapp yes it is too complex for beginner-- feeling like now i have learning stress management
I don't understand why people still prefer bloc
neither 😂
pizza
Course is expensive
100% Quality 👏 If the course is cheap, there will be too many people to answer questions. Expensive course = less people = better service 👏🔥🔥 (I hope this make sence)
All of this just seems so unnecessary and overengineered. What's the point of this pattern?
i think you put to much for beginers
I learned nothing from this, sadly
😅 too fast?
@@FlutterMapp no, lack of depth. Your style of teaching is very "declarative", you showed what we should do, to get something working, but not how it actually works and why. Probably good for people, who already familiar with the concept and want to only learn implementation.
Don't think this was a good tutorial... Too fast, weird use case, to many steps without explanation
terrible explanation. it's not a teaching
Flutter_hooks
🧐🧐🧐
For fresh demo of pagination api for infinite scrolling:
look for few point:
1.How to refresh/reinitialize infinite pagination list like pull to refresh kind of this?
2.How to handle this StateStatus { initial, success, failure, error, noInternet } like failure means list loaded for first time then fetch for other time we encounter error Api is not responding or any other error (How to restart Api from that state like error occur on page no 3 and show footer container "something when wrong" and retry button to recall api cal for page no. 3 but not from beginning like page no. 0 or 1).
🔥🔥🔥🔥not sure to understand everything tho...