Flutter Bloc Project! | One video and you are master of Flutter Bloc

mm-hmm hi guys okay the voice is good so let me just mute on my other device hi let's get started in some time so okay we are having five people hi everyone I hope you are doing good I hope you are enjoying the weekend so uh what are we going to do in this live session first of all so we are I already published one video regarding flutter block that covered theoretical part so if you have not watched that part that video it's totally fine because I'm going to cover that theory also in this video and we are going to make one simple project and if you have made this project then I guarantee that you can make any kind of application whether you are making it for internship or for a job or for your college project you can easily make it for your project right uh so why do we learn flutter block can somebody answer in the chat box or I'll answer like why do you want to study flutter block what is the purpose of learning the State Management tool why do you want to learn it so let's see if someone answers till then I'll check if everything is working fine foreign so I can see one answer by shamshu that clean architecture so something like are you uh saying that we want that you want to learn shutter block to apply clean architecture or you want to also learn clean architecture foreign so let's get started and what are we going to first of all build in this project so I hope that you can see a simple UI right so uh as you know that uh in e-commerce applications or in any kind of application where you have to select select products or like products then you must be seeing this kind of UI it's a very very basic UI it's just a simple UI so where I'll be having one app bar where there is a like button there is a card button then a lot of products will be listed in the list right using a list View and I just want to hit the like button so my product should be added in the wish list if I click on this card button it should be added in the card section so it looks very very easy like you can build this application in like 20 minutes 25 minutes but but the target over here is to make it using flutter block State Management right so why do we learn State Management or first let's see the is given block gives State Management as well as architecture not sure yeah you are absolutely right blog gives State Management block is a state management Library what are the other State Management libraries provider is there get X is there riverpod is there but most of the companies uh are using flutter block because it is easy to understand and it clearly uh separates the business logic from the UI from the network logic right so now I have mentioned three words business logic UI and my network logic right so let's first try to understand this so uh when I talk about UI it's clearly simple that uh it's clearly simple that uh UI will be just my columns rows widgets screens Pages uh when designer gives you the figma design you just need to code that UI so that is my code that is my UI part right now there is some Network logic in my network logic my API calls are there my database connections are there or everything that is happening on the back end my network logic will handle now in between them we have business logic which is going to get a connection between my UI and my network logic right so business layer that is block right it is going to act as a layer between my UI and my network logic so that I can keep it clean and that happens in the clean architecture that my UI is not getting mixed with my API calls my UI is totally separate from The Logical section of my application right so business logic is the layer that we are going to study today so as I just told that now there is a question a flutter with node.js spring boot which should I prefer I'll prefer that if you are beginner then go with node.js Express just because it will be easier for you to get internships right because most of the startups most of the companies are currently using node.js Express just for the back end then if we'll make some projects in node with flutter it will be very good for your resume springboot obviously it's an advanced backend framework that you can learn after learning or after making some Pro projects in flutter with node this will be suggestion right so this is a simple UI that you can actually build in 20 25 minutes but what we want to do is we want to make it using block now if you have watched my flutter Block video right in that I I told you that uh in Block we have events and we have States now I will not go deeper into the theoretical part I'll just code it because this complete video is based on coding so let's get started first of all uh I I want to get data so in this video I'm not going to teach you Firebase or mongodb that obviously you already know how to uh how to do crud operations on mongodb or on Firebase right so I'll just take a simple Dart file in that for Dart file only I'm going to store my data my main focus on this video will be to show you how to actually build your UI how to actually code an application using block right so let's get started so to build my uh sample data set or sample database I'm just going to use chat GPT so let's get started I'll I'll say chat GPT that please generate a dart file where some products are listed grocery products right so uh hey can you give me a dart list of maps where sample grocery products are there so it's not bad that I am using chat gbt it's totally fine you just need to fasten up your work so that it's totally fine that you can use chatgpt so it is giving me some Walmart Trader so I think it did not understand so let me show you what I got previously yes so let me just make it full screen yeah so that's why I was expecting in this live session but as you know that things don't go well in life so I was already ready with this list so which RGB you only generated so let me just copy it and you can see that it's just a list of maps my products are there right and some for every product I'm having one ID I'm having one name description price and the image URL right so this is my simple flutter application I have not done anything over here so uh let's first of all build one features folder in which my three features will be there one will be my home page second will be my card third will be my wish list all right and I'm going to create one data folder and let's make a grocery data dot dot Phi and I'm going to save class grocery data and I will paste my list over here and as you know that I want to access this list so I have to make it static simple op concept right I'll just make it small and over here I can see that ID is their name is their description price and image here so imagery is not the correct image URL so I'll just uh go on the internet and I'll search for banana fruit to get one image just paste it over here I'll search for grapes I'll paste it okay this is okay I'll make it grips this is good then I'll search for bread copy image address I'll make it bread so basically you don't need to do this if you are actually working with Firebase or with mongodb you can actually uh like do some credit operations so this is not a valid URL I'll search for x Let's uh put it till here only let's not waste time in finding the URLs and let me just delete these two products let's start with four products right so this is my basically a list of maps which you can actually get from your database uh using a just a simple retrieve call right so now uh in my features folder let me make three folders first will be my home folder second will be my wishlist folder and third folder will be my card folder right so basically these are my features right I want to build in this complete pro project I want to build three screens or three features my home feature my card feature and my wish list okay so let's get started with the main dot dot I'll just delete everything let's do it from scratch hi Samuel how are you I hope that you are doing great so let's create a void main function and guys if you have any doubts regarding flutter or how to get an internship you can ask on the chat I'm I'm actually seeing the chat right now so you can ask anything on the chat run app new my app let's create a stateless widget my app and you can see this blue dots a blue line right so many people ask me that why are we seeing blue lines so actually they're lens that means they are actually guiding you that this is not the correct way of writing your syntax right so uh you can actually go in analysis options.ml and you can control a and comment it out if you just don't want to focus on lens so in my this video also I'll just not focus on lens because they are actually going to consume some time but it's not a good practice if you are making the code if you're writing the code for company do uh like uh apply the lints and it will guide you that this is not the correct way of writing flutter code right so in this return I'm going to return a material app and over here I'm going to Define my home and write my home so for this home I'm just going to go in my home folder create my home dot Dart file basically if we just want to make it standard so let's create a UI folder in home and in this UI folder I'm going to put my home. because in this home I I also want to have my blog folder so it will keep it very clear clear right so in this home.dot I'm just going to create a stateful widget let's call it home and in the main dot dot I'm going to call my home so let's see some doubts uh how to get internship in flutter development so I uh there is one simple trick or tip or Mantra that you can use and you can get internship in it any Tech stack not just flutter make projects and put your portfolio like publicly right whatever you are doing in your college whatever you're doing in tech industry put it on LinkedIn put it on Twitter or any other platform as I did in my second year I started this YouTube channel and I was just publishing my projects using which I got my internship so this is a simple trick that I tell everyone uh I shifted from flutter to Native Android development is it fine yes it is totally fine uh I will suggest you that don't get shifted to Android completely have a Hands-On on flutter also it's good that you're learning native because it is going to get your Concepts very very clear so uh practice flutter and Native both right so I'm ready with my home.dot and let's go in home and let's make it scaffold so that I don't see the black screen that I'm seeing right now perfect my scaffold is ready in this scaffold I'm going to have an app bar perfect let's give a title akshit's grocery okay now let me remove this debug Banner also I just don't like it okay now it's time that we start with block right in my cart also I'm going to have a UI folder in my wishlist also I'm going to have a UI folder and now in my home uh it's it's necessary that you have a block plugin block extension of vs code uh installed otherwise you won't get an option that I'm going to show you right now so in the home folder I'm clicking uh I'm right clicking on the home folder and you can see block new block right so I'm just going to click on it so it is asking me what that what is the name of the block that you want to make I will say home block so enter so now you can see that in my home I'm having a block folder right same thing I'll do for cart block card block so for every feature we have to make a separate block logic right because every feature will have a separate logic so what is block block is just block business logic right so for every feature we need to have a block folder and in that folder we are going to write logic right so cart is having its block folder now wishlist will also have perfect now if you have watched my uh flutter block Theory uh video then you know that for Block what we have whenever we want to do anything anything on the UI right anything you want to do we pass an event right we pass an event to the block to the block and block takes that event do some logic uses its brain and pass one state and this state is going to update my user interface my UI that's it same thing we are going to do right now right so what what are the probable uh so let me just close this this is not looking good I just searched it to get the data for my grocery items if you don't know if you just joined the chat uh live right now so uh what this is the thing that you're building right now so what do you think what are the probable uh events that can take place on this screen can someone write or I'll tell you till then I'll just see the doubts that your guys are asking what is the best job between a data scientist or data architect so I'll say that first of all you should get some internships in a data science field or data analytics field then later on you can switch to data architect data architect is basically the person who deals with data on day-to-day basis so first of all you should actually do some internships in data analysis field the actual uh internship where you are going to deal with data right how to get internship do you working now so uh recently I was working as a flutter developer intern in ticker tip which is by zerotha a small case sorry and uh currently I'm working on my own startup so this was a question correct so pratik is absolutely right that all these buttons that he can see on the screen are going to route a different page and those page pages are going to have their own logic right as we show showed as I just showed you right now my wish list is going to have its own logic my card screen is going to have its own logic I can like a product I can add this product to a card these are the simple events right now when I'm going to click on this hard button then an event is taking place now when I'm adding an event I am expecting that some State should be emitted right this is a simple Logic for this card also as I'm clicking I'm adding an event my block will do some calculations that hey this person is adding this product to the card I need to add it it will do at the back end and it is going to return me a state that hey the product is added to the card go and update the UI this will be the street simple right let's do it so in my blog let me just clear this this is my block file right let me just make it small so what is it saying let me just clear it um this is new let me just delete this block folder for now I think this is a plug-in issue that I'm seeing right now okay got it not a plug-in issue I am just I just did not add the plugins over here so when you are working with block you have to add a dependency so add block and add flutter block let me just save it it will be clear right now yes you can see all the errors are gone so I just forgot to add the dependency in my post track dot email so here are the silly errors that we coders make and we spoil our life so that is fine hi jakairo I hope you are doing good nice Name by the way so let's get started so first of all whenever you are writing a blog or business logic you have to think of the events right so in my home block what are the events that can take place so class I can say that my product so my product is in home home file so home product fish list button clicked event this is the event so this is a class name it is going to extend my home event right so this simple inheritance okay this is my first event let's copy it product card button clicked event right this is my second event third event is that I want to go to a certain page so it will be home wish list button navigate clicked event or navigate event and my fourth event will be home cart button navigate event perfect so these are the four events that can take place currently in my application I am building a simple app right perfect thanks Aman I know that this was a much needed session so I hope that you will learn a lot from the session so these are the four events right now let's think about the states what states can be emitted from the block so class first of all uh we need to make one more abstract state right so one state can be that is going to build my UI right whenever I will be going inside the app my UI should be built right so this is going to be handled using home state but some are the states which will be actionable States right the states if I get those state in my UI I want to take some action right so those will be actionable States so some are build States and some are action States so in event we add only one type of event that it's a simple event I'm just passing some data it's a simple event but states are of two types simple states that are going to build my UI and uh some are actionable states right so I'm going to make one abstract class home action state it is going to actually extend my home state right now think about all the states and you have to now decide whether this state is a home state or it is a home action State whether the state is going to take some action or it is going to build my UI right so my class home loaded action state oh sorry not action state it will be loaded success date now what is this state now when I'm opening the app my API call will be made to the server that hey I want to fetch the products currently we are not having any server but in actual case it will be happening like this right my server is going to return me the data so it is going to take some time right so between that time I want to show that loading Circle Avatar or not Avatar the loading bar right so it will be class home loading state and as it's a UI building so it will be home state perfect now my data is loaded I have received my data my app has received the data so loading is done it is a success date right so again it will be a rebuilding of the UI now my circle bar should be removed and my actual products list should be visible so again it's a home state not an action State now if some error has occurred so my home error state will be emitted so I want to show some error widget so it will be home state not a home action State now what are the probable action states that can take place in my app for this home page not for card not for wishlist so one action State can be home navigate to wish list page so when I'm clicking on this button I want to navigate to a wishlist page so this is an action statement some action needs to be taken right so wish list page wishlist page action state and it is going to extend to home action State not home state one simple thing again navigate to cart page perfect so these are the two action States Let's uh make it till now till here and let's see uh what other action States can be required in the future right so now let's go to my uh UI and now my UI should be listening to the states that my block is emitting and it should also accept the events that the user is passing simple logic right so this is not going to work simple scaffold with appar is not at all going to work right so I need to wrap this with a block consumer right so what does a block consumer do it is going to listen to the events also it is also going to listen to the states that are being emitted also so let's press enter and my block consumer is going to wrap my scaffold right so let's import flutter block and this is going to be my home block state will be home state home state and I need to pass the block so we haven't yet created the block yet so I'll say final home block home block is equal to home block so I'm not using dependency injection because that will be out of the scope for this video so I'm just creating an instance of a class home block right perfect so let's write Block it's a parameter and it is going to take my home block so let's format it sorry not like this perfect now I'm having listener I'm having Builder and I'm having listen when and I'm going to have a build one perfect so these are the parameters that we are going to populate right now right let's see so let's see the doubts if there are how to manage time in internship or for self-study so I started my YouTube channel I was doing two internships when I was in college so it's it's totally dependent on how you are managing your time and that is your question so you need to plan out your next one month so what I do is whenever I have to whenever uh I'm doing so many tasks at the same time of the day I actually manage or actually plan my next one month so what are what are all the things that I need to manage in my next one month right and according to them I plan my day so it's all dependent on a time management or the timetable I don't wake up at 4 20 am or 5 am as some of the Instagram reels say that wake up at 5 am or 6 AM it is going to totally change your time I wake up at 9am sometimes at 10 am and it also and it is totally fine I just manage my day and all my uh like day tasks are getting handled so I hope this is helpful so let's focus on the thing let's make two buttons over here one is my heart button and one is my card button so app bar I'm going to have actions icon button favorite border uh let's go on favorite and I'm going to have one more icon button cart uh basket is there can someone write in the chat what is the icon name for a card is it shopping cart yes shopping bag will also do fine flutter is irrelevant or future relevant absolutely it is relevant in 2020 only it crossed uh react so if you will go on Google Trends and search for two keywords react and flutter you will see that in 2020 flutter already crossed react right so it is obviously the best framework I would say currently in the market for building softwares apps web apps games also you can build so obviously it is future element so we have two buttons let me just save the file there is one error yeah so over here I'm just going to make it null I can say for now so what is it saying yeah so for now let me just comment this lesson one and build one yeah I can see my two icons so let's make this favorite also as border so that they both look same correct and as we are having a grocery app so I think it's good that we have I guess team data uh let's keep it white theme only what does it take it takes theme data primary color let's keep it colors dot deal Let me refresh okay uh it's not yet updated we'll see the error what is the error so now when I'm pressing on this icon button I want to add an event to my blog that I want to navigate correct so I can say that in this icon button that my home block dot add my home navigate to wishlist page uh it's not a state sorry it will be a event so have I built that event card but okay so it was not navigate event it is wishlist button clicked event so I'll just say like this I'll format it I hope that you can see let me make it small yeah so I'll have the same thing for the next page sorry the next icon cart button clicked product yes so let me format it save it correct now if I go on my event and I've built events or I have added events from the UI for these two buttons uh not these two buttons these two buttons right now to handle these two events in my blog so I'll just copy this and I'll just remove like this and I'll say on so my block is going to say that on this event pass this date on this event pass this date so on this event run a function which is going to be called this right and I'm going to create a function for this click on this bulb create a method so my a function is made let me make it small you can see a function is made right now I'll do it do the same thing for my this event let's make a method perfect so these are the two events that I have created now for for now let me just click on let me just say print wish list clicked and for this event let me just say print uh card clicked right let me just save it and now let's just see the debug console if I click on this nothing is happening so let's refresh where can I make the best animations for my splash screen so one is Lottie Lottie animation l-o-t-t-i-e and one is rye animation r-i-v-e there you can make 3D and 2D animations so let me click on this okay some error is there let's just solve it stator was wrong while handling a gesture home button event was called without register event handler make sure to restore your Handler via home wish list button navigate event okay I think some issue is there in the naming let me just see [Music] so we have card button click event we have wishlist button click the event okay over here I am calling a home wishlist button okay this is the issue I'm calling a navigate event this is not the right thing home wish list okay okay got it so these two navigate events were for these two right okay got it got it got it so this will be card button navigate card button navigate will go over here and my wishlist button navigate will go over here right and for this events I also need to manage these two events so let's make uh event handlers for these two so on this I want to run this function so let's make it like this create a method and my next event was card button navigate event let's handle this so this is how I handle methods in my block file perfect let's make a method for this perfect so now I'm having handlers for everyone so it is wish list product uh clicked or cart product click so this will be two events which will be called when I am clicking on wishlist and card from my product type not from the apple and these two are the ones which are going to get called when I click them through my app so let's just print and it will be card navigate clicked uh it is wishlist navigate clicked sorry and this is my card navigate clicked so let's just save it now let me just refresh yes so wishlist navigate click that means my block is listening to my event and cart navigate click perfect perfect it is totally fine right over here so if you have any guys you can if you guys have any doubt you can ask on the live chat I'm taking a pause of one minute right so that it doesn't get too much for a moment so I guess there is no doubt Block versus flutter block no there is no actual difference they both are the same but you need to add both the plugins in your dependency because some uh packages are handled or some classes are handled in block and some classes are handled in flutter block so that's why you need to add both the plugins in your in your dependencies is getex State Management good for flutter yes it is also good it is very simple uh before flutter block if you have uh worked with getex it it actually is very good because it is easy to learn but companies are not using get X they are using block so that's why block is actually preferred in uh flutter industry that's why so you are following clean architecture right some ACT till some extent I am following clean architecture that means I created a features folder and I I uh so basically if we had to follow the clean architecture to the top level then I actually have a must have in my home folder I must have a data folder my domain folder then my UI folder I am having a UI folder but I'm not having data and domain so basically you need domain folder to register your repositories so you need repositories when you have a database or your servers and your UI your flutter flutter app should be communicating with that servers but here we are just having a local database that's why I have not coding that because it will actually divert the uh you know uh the focus from block to clean architecture so that's why I'm just making it making it simple so let's uh Now work on Navigator navigation part so I need to emit some states so let me just make it small provider you can say that uh so let me give you a simple analogy so first at first position it is block second position it is get X or not get X provider third position it is riverpod and fourth position it is get X right so wishlist navigation uh clicked I'll emit a state home product navigate to wish list action state right and over here I'll emit a state that will be home navigate to cart page action state perfect now these two are the action state that means when I am going to get these states I want to take some action right so I need to listen to these states and then perform some action right so I'll go in my UI home dot dot and in my listener in my listen when also I'll say that I only want to listen when I get an action State and I only want to build when I don't get an action state right so here I will say my current and my current is not an home action state if it is not an home action state but it is it is definitely a home state so I want to build my UI when I get a home state but I want to take some action when my state is action state right home action State sorry yeah so I hope these two are clear now now let's uh listen to my States so I will say if my state is home uh navigate to cart action State then I want to navigate Navigator dot push navigator.push and my route will be material page route Builder will be context and it is going to reach to my uh cart page so it will be cart I think we haven't made the cart page so let's make the card page so I'll say cart dot dot stateful widget card and this will be scaffold right let's import material.dart and similarly I'm going to have a wishlist page fish list dot dot and it will be a stateful wish list this will be scaffold now I can navigate to these two pages so it will reach to my cart page and I will say else if my state is home navigate to wishlist action State then I want to navigate to wishlist page so let me just format I hope that these two are also clear not a rocket science I'm just getting my state and taking some action getting my state taking some action simple right now let's see if we just get navigated to these two pages so let me just refresh the other one so which architecture you prefer personally for big projects definitely clean architecture I have worked with clean architecture currently I am whatever project I built for my personal use or for some startups I use screen architecture right because if you are not using clean architecture and it will go in some internships then it may create some problem right so use clean architecture learn it once it is super easy will you upload this video after streaming yes definitely this video will be live and it will be always there on my YouTube channel so now if I click on this wish list you can see I'm getting navigated let me go back if I click on you can see wishlist navigation clicked if I click on cart you can see cart navigation clicked so I'm getting navigated also right now it's time that we start building the products UI right so why was my app bar let's give some background color app colors sorry not app colors colors Dot teal perfect it looks like a grocery app now why not using Android studio uh so I have been working with uh visual studio for more than three years now so actually I using visual studio you can actually change the theme so you can see that my vs code theme is currently GitHub theme and you can get a lot of hundreds and thousands of themes over here it's easier to manage the extensions you can download a lot of extensions it is easier to push your code to GitHub so I am just addicted to the VR store UI that's why I use vs code not Android Studio so now in my so yes now let's talk about the product building right so for my product building it's definitely obvious that I will need some data models so now data models is also part of lean architecture so in this video if you don't know about data models you're going to learn that also so this is cool right so what I'll do is I'm in my home folder only I'm going to create a models folder and I'm going to say my home product data model dot dot so this model is going to actually represent a product the grocery product right so I'll save class home or it's not home is also not necessary because product model will be similar for cart and wishlist so product data model and it is every product you assume that this class is a product and for every product I am going to have an ID so final string ID I'm going to have the product name so name I'm going to have the product description description I'm going to have double price so this is noticeable double price and I'm going to have the image so final string image URL so these this act this class actually represents a grocery product right so let me make a Constructor generate a Constructor and this is fine right so this is my product now when I'm going to load my home page I I want to get list of grocery products right so I can say that in my blog in my state when my loaded success rate is emitted I want to get list of products so this class should actually have final list of products data model product data model right and this will be called products and I'll create a Constructor right because success state that means my page is loaded so I want to have my products list so I am passing that products list now in my blog in my uh initial okay this is good now as soon as my app is opening as soon as my app will open I want to pass a initial state or initial event not State initial event now that initial event is going to emit my success rate load is Success state or it can emit a loading state or it can emit a error state right so I'll say that class home initial fetch event or initial event right and it is going to extend my home event right let's format it perfect it looks good now now initial event will be handled so let's copy it in my block first event should be my initial event let's create a method for it and let's create a method for it and it should not be at the last it should be at the top because this will be my first method that will be called when my app will open right so let me make it small now when my initial event is added to the block I want to emit some states but think logically first state will be a loading state right so I want to whatever is the case I want to emit a loading state so home loading state now as we are not having mongodb or Firebase currently we are dealing with local database so it is not going to take some data take some time to fetch the data so I'll purposefully add a weight so await means a sync a weight future dot delete duration uh seconds let's say three seconds so after these three seconds I want to emit my home loaded success date and it is going to take some products now from where will I get these products right so in my uh if you are watching this stream from the starting I add I had this data folder in my data folder I'm having this static list of maps you can see list of maps I'm having right now this products list should be my list of those Maps but they should be mapped to my product data model so how can we do this can someone answer let's see till then I'll uh see the questions how many languages you know so I know Dart python typescript so these are the main languages that I work with in my daily life and I'm currently planning to learn go so that I can make go servers but currently I know Dart Python and typescript uh thanks harshit I that means a lot I'll be keep uploading such videos and they will be added to that playlist so uh someone is asking that are there any offline classes in India which teach letter so I don't have any information or maybe if I have information I'll be having so that information about my own City so I live in Pune so I actually never tried to search it but yeah you can directly search on the internet about flutter classes offline classes in your city I am not pretty sure that there will be some in India but I think that to solve your problem you can actually get a one-on-one session with someone uh the person who will have a meet with you or Zoom meet with you or Google meet with you uh and he can teach you personally so I guess that will be really helpful love from Nepal yes that's great love from India too so now let's think so I'm having this uh grocery data so let's copy this class and let's say grocery data dot grocery products which is my list now for every list item every list element I want to map it so dot map this is a function which is written in list class of dot so enter it now this is my every element now this element is actually representing one map right so let's go over here for every map for every element I want to map it to product data model so product data model let me format it perfect for every product data model I am having one ID right so ID I can say that e at ID is just a map as I just told that e is just a map so e is this ID right so e at ID then it will be e at name then it will be e at description then it will be e at price and it will be e at image URL now there is some big error so that we can solve it by making it a list so dot to list perfect I hope that this is clear what I did was I just took this list of maps and for every map I converted it into a product data model so that I get product data model right so my this state will be emitted now first of all to emit the state to get this state in my UI I need to add this initial event right otherwise I won't get it so go over here go in my UI file in the class I'm going to have a init state now in this unit State why initiate because as soon as my app opens I want to uh add the initial event so in this in its state I want to say my home block dot add and it will be home initial event save it so I will I'm passing this event in my United State and I'm going to get my init My Success date right so over here in my Builder I want to have my scaffold this is good and let's let's remove this scaffold for now uh let's remove this return also I'll show you what I'm doing this is my Builder this is my UI Builder right so over here I want to I can have multiple States I can have a loading State I can have error State and I can have success date I cannot have any other navigation accent rate because in my build when I just set that my state should not be an action State and if that state is not an action State then only I will get that state in my Builder right so I can pass a switch state so switch statement state DOT runtime type and over here I can get three build States three states right first one can be home loading State home loading state second will be a home loading a loaded success state right and it will have a break statement then third case can be a error state so home error state right and I'll have some statement over here so these are the three states that need to be handled in my Builder so in my loading State I am just going to say so let me just paste that scaffold so that I don't miss it I want to return a scaffold with body uh why it is not having body this is weird let's write scaffold again body okay it's not yeah it was there this is really not good let me write it like this scaffold body what is happening maybe because of the error that we have over here framework container let's remove it yes yes perfect so in my body I just want to have Center and in my Center I just want to have a child so circular progress indicator perfect and if my loaded success stay there then I want to return this part so I'll just return this if my success date is there right I'll just format it if my error state is there then I'll say return a scaffold with body Center child text error perfect now let's see what we get and default is not handled so in my default I'll just say return a size box because this is not going to this is we are not going to receive it so now I can actually click on refresh you can see one two three okay it's not passed what is happening this is not good we are having something okay type int is not a subtype of string okay let's see uh problem is over here some part is int okay okay my ID is actually an integer and let me make it string one then let's two and let's three then let's four now one more thing we learned from this that I can see my circular progress indicator because my block as soon as it received the initial event it emitted this loading State this loading state was received by my home.dart and it showed this progress indicator but I've never got my loaded success rate why because the error came in this part in this part that's why my My Success state was never received right so actually I should have used try catch and if I get some error in catch then I should emit an error state but let's leave it for now and uh now let's refresh and let's see that after three seconds do we get the success rate let's see let's refresh yeah so after 30 second I got my uh success date so yeah for one-on-one session you can actually mail me and there we can talk for sure right so you can see that let me show you again what is happening first of all my loading state is emitted then uh future.delet that means I gave a delay of three seconds you can see my loading state is emitted some delay of three seconds so for three seconds my loading state will be there and after that My Success date is there same way in my UI file first I in the k switch case I'm going to get a loading state so my progress indicator then after three seconds I'm going to get my success state so this is built Let me refresh and let's see one two three I got that perfect so now what I want to do I want to show my products right let's do it so for that I'm going to get in my features home UI then I am going to build one file called Product tile widget dot dot let's create a state uh less widget right and every product will get a product data model so product data model product data model create a Constructor perfect and in my home uh after my app bar in my body I am going to pass a list View dot Builder context let me just make it small so that you can see the code context comma index and for every item every list item will return a product tile widget and for every product data model I want to so now you know that this is my loaded success date and this date is actually holding my products list you can see products list is there so I can say that this is a success state so I can say that final success state is equal to my state which I'm getting as my home loaded success state perfect and now I can access the variables that are there in this loaded success state so product data model will be My Success state at index at uh sorry success state DOT products at index products at index perfect perfect perfect you can see in my body I'm having a list.builder I'm having a product a tile widget and every product I'll widget was asking for a product data model and that product data model I am getting from My Success State because the success day takes products and this product is nothing but a list of product data model right so every product tile widget is going to get its own product data model so let's go in 100 Dot and let's define the item number so it will be number of items that are there in this list so item count it will be success state DOT products.length simple so how many products I'm getting from my blog I should only render those many widgets those many product tiles right so let's see so I'm not going to get anything because my product tile widget is container so let's make it a container with some margin let's say foreign and let's add some padding Edge in sets dot all pen let's see then I'm going to have a child I'm going to have a column I'm going to have children in my children I'm going to have guys if you have any doubts please keep on asking in the chat box I'm exactly in front of the chat box so you can keep asking so children it will be first of all in my product tile I want to have an image then title description price right so let's do it so in my children I'll have a container uh height of let's say 200 and width of let's say width of let's say double dot Max finite and I'm going to have I'm going to have something over here but let's first of all build text it will be a product data model that I'm receiving from in this file Dot name and then I'm going to have a description let's save it and let's save the home dot dot or let's just refresh not found.html okay so in my product data I just don't want this yeah you can see I can see my product ties let's make them beautiful right so first of all I'll have a decoration box decoration image decoration image in my decoration image oh yeah definitely I'll be sharing the source code of this complete project no worries Network image then it will be product data model dot image URL let's save it beautiful I'm seeing the product images why this image was not loaded I'll have a different image but this image doesn't look good so what I'll do is I'll have fit box fit dot cover okay why this image is not loaded let's bring one image of bread image copy image address let's update our data Network image example.com milk okay okay see an example okay I was changing the description that's a very very silly mistake I should make it this my description will be let's say Brown brown bread tasty so now I can see all my images right let's format it perfect now let's give it some border or some color so actually we feel good on working on this project otherwise so uh let's give some color to the box or let's give it a decoration so decoration box decoration let's give it a border border dot all color let's say colors Dot black and we will give it some powder radius okay let's give it some constant sized box height 20 and let's make the column as cross access alignment dot start and my name will be Style text Style font size will be 18 font weight will be found with DOT volt I'm not explaining the UI part much because you guys are already Experts of UI and this is good this looks good actually let's not waste time in the UI part because we have a lot to cover right now so what I'll do is after this text I'll have price um perfect price dot to string because price was double perfect perfect so let's put a dollar Mark right now a dollar why is this Dollar in okay let's put it RS let's not waste time over here okay perfect right now this text will actually be a row so that I can have heart icon and my card icon right so in this children I want to have another row which will have one icon button let's make let's call icon buttons from my home.dart and my where are my yeah over here icon buttons let's copy them and let's paste them over here let's make it let's comment uh on press part okay and now in this row I'm going to have main access alignment as main access alignment dot space between perfect perfect perfect yes I got it nice it's last two years dollar perfect uh Rahul so let me make it slash dollar some error is still there so s if you can research more and get me with the good answer then I'll definitely do it good you guys are also watching it use okay backslashing backslash sorry let's see perfect that's a wonderful answer perfect thanks I do not know about this okay then uh now it's time that we work with more events that when I'm going to click on this heart icon my product should be added in the wishlist list when I click on this a cart icon or this bag my product should be added in the bag list right so now you know that I need to manage or I need to have two more lists right so in my data I will have one more file I'll call it uh card items basically it's not the real case basically you will have a separate collection in your Firebase or in your mongodb to store these items because in let's say Amazon so when you click on hard icon of Amazon product then it is actually it actually goes to the database and actually adds your product that you have wishlisted on the database right but currently we don't want to waste time in database setup so I'm just maintaining these two files card items dot dot and wishlist items dot dot so my Gmail ID is there in my Channel about so you can email me there wishlist items dot dot perfect so I'll have list of product data model product data model let's create a class card items it will be a static list uh I should also be able to change the data so let me make it a simple list for now let's not go in deeper parts list it will be product data model product data model and it will be cart items empty for now perfect and second list will be my wishlist items wish list items so now when I'm going to click on this heart it should go and append this wish list when I click on this card sorry when I click on this wish list it should add my product to my wishlist items if I click on cart it should add my product to my card list I think I messed up the sentence but I hope you got it so let's do it using block so first of all uh I need the block on this time page right actually you should use click listeners but let's not go in that part and let's call my blog so I want my home block over here so home block home block let's import the home block let's add it in the Constructor right now when my favorite icon is collect I want to say homeblock dot add an event and what should be that event home wish list button product wishlist button clicked event that's it and same thing when I click on cart my product uh cart button clicked event perfect so these are the two events that are added now let me see what I uh okay home. will pass the home block to my product I'll widget that's it handled right in my home block yes so now when I'll click on this this message will be printed when I click on this card icon card product clicked uh will be uh printed let's refresh let's see if it happens thumbs up to this video if it does not happen uh it's your choice what do you want to do so let's see it's happening so this video deserves a like now right so we are wish listing a product through block we are we are adding a product to the cart to through block we are not actually adding it right now but we are able to do it because now we just need to add the item in the list right so you can see I can uh I'm able to print that message that means My Block events are working right that's great so now now what I want to do is now it's the part when I'm when I'm getting this event my wishlist product clicked I want to append that list right so actually but don't you think that I should also get that product data because my this uh card items or this wishlist items is requiring a list of product data model that means product data model should also be product data model will only be appended in this list but in my home block there is no way I'm getting this uh product data model so how will I get it right so these two events product card button clicked and wishlist button clicked will have a product data model so final product data model click the product so whatever product I clicked on the product model of it will be passed to the block right so now I'm teaching this is a crucial part so now you need to focus right that how you need to pass data to the block through events you know how to pass data through States the loaded success should we just saw but how can you pass data through events this is how right so first let me create a Constructor generate a Constructor over here also let me paste the same line so generate a Constructor perfect now this will show an error that it is asking for the product so product data mod click product will be my product data model so over here also click product will be my product data model the model that I am just getting from my Constructor over here right so now over here I can say that uh yeah so this is wish list so wish list items dot add and it should add my event dot click product this is how you pass your data to the block through events I hope it is clear so uh as well is asking that what is block so block is basically a state management package or library or it's a way of writing code through which you can manage the state of your application professionally right so you can see that this app we could have built in 20-25 minutes right you could have just uh uh manage your data in your init state in a file and in the same home file you must have been doing the processes appending the list removing the item from the list everything you would have done there itself in just 20 minutes right but this is a standard way of writing the code because now when your apps will scale when you will be building a complete Instagram app then this is going to play a very very significant role because you are not going to mess up the code right so block is just about not messing up the code that's it simple so I just added my item to my wish list right so now yeah I'll add my item to my cart list card items Dot add event dot product click product now when I'm adding these items I also want to have a scaffold message that uh that your product has been added to wishlist or your product has been added to the card right so for this I will need a state because and that state will be an action state right so I can say that navigation states are handled okay so now I'll have two more States class whom product uh item fish listed action state extends a home action state same I'll just copy and home product card uh carted let's say I don't think it's a word but item is carted right so let's save it and I want to click over here I'll just uh go in my home block and for my wish list I'm going to emit this date and I'll just go over here copy my carted state and I'll just emit this rate and yes now as these are the action States both of these states will be listened by my listener you can see that my listener is going to listen to my action States right so now over here I can say else if if my state is home carted state then I can say scaffold messenger dot off context dot show snack bar and my snack bar will say some text item cut it right similarly copied it paste it over here item wishlisted and my snack bar will say item wishlisted uh yes subrat I am going to upload the source code on GitHub and the video will also be there on my channel always right so now let's see if it works or not right let's just refresh now what is happening I'm having this item when I'm going to click on it an event will be added to the block the block is going to add this banana item in my wishlist list and some state will be emitted let's see one two three item is listed one two three the item carted you can see now let's see for this one to three item which listed now let's see for card one two three item carded you can see how beautiful it is happening all through block now you have learned how to do simple block operations how to handle events how to handle States everything I've learned in this uh I think what is the uh duration uh we have been live from I guess 7 PM so it's 8 36 one and a half hour in one and a half hour you have learned how to manage Block events and block States right so my Gmail ID is not present okay I'll just add my Gmail ID right over here so I'll just write it over here so yeah this is my email ID if you have any queries or doubts you can reach out to me over here or definitely you can reach out to my LinkedIn and message me there so that will be an easier part right and do follow me on LinkedIn Instagram let's take a break of one minute and let's see what I have in my social media so you can follow me on Instagram where I'm posting some uh post regarding internship jobs and some simple technical things that I'm doing in my life or some tech tips you can follow me for that and in my LinkedIn you can see uh uh whatever videos I'm posting or whatever new things that are happening in my in my tech life or in the tech life in the world I'm just posting about that so if you are interested you can follow me on LinkedIn Instagram and you can definitely reach out to me through these platforms right so yes let's continue saying must much appreciated for teaching us please bring more videos definitely I'm not going anywhere I'm going to post such amazing videos so also let me know that whether you guys are from college or you guys are freshers or you guys are working professionals you are students just append in the chat box so that I know what type of content should I bring for you if you guys are in college then I'll bring internships jobs related content if you guys are students then I'll bring high school or how to get a good college type of uh videos so let's go yeah till then I'll just tell you this radical part what next we are going to do over here as you know that my list uh is appended my card list and my wish list is appended now we are going to go in my uh wishlist item wishlist page and we are going to see those uh items that are wish listed and items that are carted right now I'll give you a homework that the homework will be that you need to manage removing of the items right so I guess you can do it so what you have to do is basically when you go on the card page you again so all the icons that are there on the card page that is this uh all I'll show you let's not go in the theoretical part it will be too much let's let's keep doing it right let's not stop till then you can put in the chat message chat box from which year or from which background you are so I'll go in my home page uh in the card page so in the cart page also we are going to follow the same thing but my card block will be listed right so over here I'm going to have uh card block and it will be final yes perfect and my scaffold let's wrap body this time or I need to have an app bar so in the app bar I'm going to say uh title okay actions it is there so Snapper title text and this is my cart so card items and let's just save it and in my app perfect in my body uh let's come out yeah in the body again I'm going to have a block consumer block consumer will have a builder so let's do one thing let's uh have our body have a container and let's wrap this container with the block Builder oh sorry block consumer so we are using block consumer because we want to have listener also and you want to have Builder also if you just want to build your UI then you can use block Builder if you just want to listen the state then you can use block consumer block listener right but over here we want both so block listener and block uh Builder so block consumer is a combination of Builder and listener right so listener also we are going to handle and the block will be cart block and block state will be card state and the block we need to pass as card block perfect so now in my container yes so similarly what I'm going to do is in my cart event also I'm going to have a card initial event so class card initial event it is going to extends my card even this is simple inheritance and it is going to return me final okay it is not going to take anything and initial state is handled now I'll have two more events class no one event yes um yeah I guess yes I'll have an event so class card dislike event not dislike un wishlist is a word or not remove from wishlist card remove okay this is a card not a wish list so it will be card remove from card event right and it is going to extend my card event let's make this event for now and my States will be class card success state over here also I'm going to have an abstract class cart action state card state perfect I explained everything in my home block so you can see why I created an action State what are these states you can actually see my home block part just back uh okay yeah this is good so in My Success State I am going to have list of products only those products which were characters by me right so final list of product data model cart items right data Constructor perfect now let's go in block and let's handle this initial event so I'll just remove this on this event just whenever you are reading a code just read it like a story so on this event I want to run a function what is a function name this is the function name with small C but is this function uh like written no it's not written let's create this method or create this function let me make it small yeah so now I need to uh have uh I need to just emit my or you can have loading state if you want but I just want to emit my card success State and this card items will be nothing but my card items perfect right so this is going to emit My Success state with my items that I put it in the cart right so I'll just come to all the doubts that I'm seeing in the chat box just in a minute uh just a minute yeah so now in the car dot dot I want to have an initial State function and in this init State I'll have my card block I'll add an initial event so cart initial event so this initial event is going to run this method and it is going to emit my card item so it is going to emit My Success date so similarly in the card.dot I'm having this uh block consumer in the lesson when I will say that I just want to listen when my current state is a card action State because listen listen I want to implement when we want to have a actionable thing when I want to take an action like in the previous home block we uh taken action of passing the scaffold message right and build when I use build when I want to build my state when I get my current state as not an action state so when my state will not an action State then my UI will be rebuilt so not an action State perfect now over here in the Builder I'll have a switch case the switch case says state DOT runtime and if my state is card success state I'll say that my success state is I'll just saving my state in a variable State as my card success date and I want to return so if I'm returning I don't want this break statement if I'm returning and my return will be I'll just copy the same UI so uh card uh where is it in the product tile yeah so I will be having this product tile right so in the home dot dot I'm having this listview.builder so copy this the car dot dot let's return this simple and success State DOT cart items dot length productile widget let's import it home block okay yeah so it was asking for home block so what I'll do is I'll just create a same UI for my card type so cartile dot dot cartile widget or basically you can reuse that widget but I'm not going to go in like having some conditions or that part so I'm just creating a new widget that will be more simpler because it's already been around two hours so I just want to wrap this session otherwise it will be boring so I'm just taking copying this product tile widget and I'm pasting in the cartile widget and I'm just going to rename this product I'll widget perfect and it is going to take Card block not my home block and let's copy this let's paste like this and let's comment these two functions let's worry about them later perfect perfect perfect okay now in my car dot dot I'll return card style widget this will take Card block this will take Card block successdates Dot card items at index format and let me just refresh we are having an event the event will pass a success yes everything is done let's refresh foreign you can drop an email and we can definitely meet or you can put me a message on Instagram or LinkedIn and we can definitely meet that's not a problem from where have you learned flutter logic so basically I already created one video on my channel uh sharing all my resources all my resources from where I learned flutter right so you can definitely watch that and I also provided a uh PDF of resources so you can definitely watch that video where I shared all my resources of flutter bro when uh next live uh so I'm thinking to go live uh on some topics definitely it will not always be flutter it can be any topic related to your internships jobs guidance normal guidance technical guidance anything on every Saturday so do let me know if any other time you want to have or I'm thinking of Saturday I'm in class 11th and with Commerce Stream So I think BCA is better to go in it field what do you think so BCA so I yeah BCA is like Computer Applications Studios only but I think that in it field it doesn't matter from which field you are if you are good at coding if you are if you have done some good projects definitely it doesn't matter from which background you are people are shifting from mechanical Branch to ID field and they are literally doing great work there right so it doesn't matter the course which you take colleges are not going to teach you anything so it's only your self-study have you used Google Fit API yes I have experience in Google fit and apple health kit so it's quite impressive like it's a really good project if you are making so let's move further so now as I restarted so all my card items and my wishlist items will be gone right so I need to click again over here item is wish listed I'll click over here my cart item is carded so I just carted this grapes so if I just go on card I can see all of them okay so I guess my block is actually uh maintaining the state of my variables so I think if I just refresh let's see if I just go on yeah so my card items is now empty so now if I cut my bread and my eggs so these two items I should see in my card yes you can see bread and eggs I can see in my card right now if I just add grapes also to my cart I should see bread eggs and grapes right so all these three items are carted now for this card icon I should show a different icon because these items are carted so cartile widget I'll go over here shopping bag shopping bag perfect so this shows that these items are now carted right now what I want to do is uh when I click on this item I want to remove it from the so this was your homework actually this is your homework so yeah so when you click again on this card item you just need to remove it from the cart list so what you need to do is you actually need to go you need to fetch your card items list you need to see that is this product data model there in the card items yes definitely it is there so remove that right so it's simple right so this was the project I hope that you will do this part it's just a simple part where you just need to click on it and it is going to remove it from your cart items and I'll give you simple hint when you will be removing it so over here I just created a function uh I created an event card remove card event so I'll just create a event for it so block and I'll just have this function on this event I want to run this function right so let's create a method perfect now I'll just write pseudo code for it because it will be easier for you to actually take it from here so first of all you need to uh get your card items then you need to check is your product model the product model which I'm going to get from your event so is your product model product model there in your cart items definitely it will be there because that's why we are running this event so this is like always true but you need to actually see it so if my product is there then run a function run a function to remove that product model remove that product model from that card items simple and emit a state emit a cart item removed state right remove this state now there is one trick when I'm just clicking on it I actually don't want to show this style again in the screen that means I want to rebuild right I want to rebuild so if you want to rebuild that means your state will not be an action state it will be a simple state right do you want me to show this I'll show it right now and then you can do the same thing for wishlist just write yes or no if you write yes then then you means that means that you want me to show it right now right now if you say no then I'll wrap up the session and we can go to the normal questions I'm going to push this code on GitHub and you will get the repository link plus this video will be live on my channel also so firstly write yes or no if you want to show me yes yes I got to yes that's it let me just show you so for this uh card item removed event what I'll do is in my cart tile in my card tile I'm having this shopping bag I'll say first of all I need to add an event right that's yes I need to add an event so cart block card block dot add my cart remove from cart event and this event should actually take the model product model which I want to remove so final product data model product data model and it will take it I'll just get a Constructor and it is going to I'll just pass my product data model product data model right so now I can see that my card block has actually received my product model so these two are already done card items is nothing but it's a list of items but actually I write get your card and items because so that you can get it from repository or you can get it from database in actual scenarios right but over here we just have uh card items and it's done right so I'll just remove these two items right so now I'll what I'll do is my cart items Dot remove event dot product data model so this is going to actually remove this product data model from my card items right and now I'll emit now can somebody tell me what should I met should I create a separate state for it should I create a new state for it or what should I meant don't you think that if I just emit this success State again my state will be rebuilt because in my card or dot my build one is listening to that card state right and over here also it is listening to my cards accessed it so that means if I emit the card success rate my whole UI the whole UI of this card items page will automatically be rebuilt with the new cart items list because I just updated my card items list you can see I just updated it right so I'll just say card success state that's it that's it it should work if it doesn't work I'm here I'll resolve the error and now let's try to refresh and check the app from the start so it is loading one two three it's loaded I'll see the card items perfect uploaded list will be rendered that's it updated list will be rendered correct subrat you are definitely 100 right so I'll say my card item there is nothing because I just refresh the app I'll add bananas to my cart item carted and I'll just go to my card page I can see this item and I'll click over here but yes you can see it is gone because my state is now rebuilt right basically now what you can do is you can emit two states or what you can do is you can actually uh emit a two State yeah you can definitely admit two states one state can be an action State and using that action State you can uh have a scaffold message that your bananas item is removed from this list so now let me add two three items let me add bananas again let me add grapes again let me add bread again over here I can see that three items are there if I just want to remove bananas I'll click over here let me remove this bananas is gone grapes are gone bread is gone it is working seamlessly it is working without an ear I hope that you like this session scaffold message yeah so you can definitely do it you can actually uh uh pass so what you can do is you can actually create one more State you can say that cart removed uh action State and over here you can pass one more State you can pass one more State cart removed action State and what it will do is it will go in cart. and over here you can have a listener and in The Listener you can see that if my state is cart removed action State show a scaffold message simple simple super simple right so this will be your homework right you have to complete this part the scaffold message part and you have to complete the wishlist part if you are done with it take a screenshot upload on LinkedIn tag me I'll reply and I'll congratulate you right so I hope that you like this session and I hope that this was super helpful I hope that you will make beautiful apps using flutter block if you have some Journal questions on flutter or any Tech stack or internship or job uh you can ask right now let's take the doubts or questions for five minutes and then we can go and do our own work welcome subrath I hope you enjoyed this complete session yeah Google Fit API I didn't find okay uh sure I'll definitely see when I can make a tutorial on Google Fit API definitely tell me some flutter for inspiration uh so basically uh you can actually take inspiration from the fact that a lot of startups in India are adapting flutter for their applications like cred uh is using flutter ticker tape by small case is using flutter then team 11 is based on flutter BMW's application is built on flutter then um uh can you give me some examples yeah Google Google pay GPA is also having flutter code in their repository so it's more than enough for inspiration right a lot of such big companies are using flutter so I guess this is enough I really want to learn yeah definitely you can learn flutter it's a beautiful framework and it's growing day by day so I guess that's it still if you have any doubts you can definitely reach out to me on LinkedIn and Instagram and I guess we should wrap up the session over here I hope you liked it and uh keep coding as I always say keep coding keep innovating ad thanks a lot bye guys

Channel: Akshit Madan

Views: 73,679

Keywords: flutter, tinderapp, appdevelopment, bloc, flutterbloc

Id: Y1roIi0-Sro

Length: 107min 57sec (6477 seconds)

Published: Sun Apr 02 2023