Same BLoC Update Different Parts of the Screen in Flutter

hello everyone asalam alikum so here I'll show you how to update different parts of the screen using the same block now this is my app and let me go ahead and restart it and we'll see that uh interesting things happens so here I do have same products for popular products and new arrival now the the whole UI over here this homepage is being used by one block so one block image States or cubit then we show the products over here but the problem is it's being duplicated why so this is not what we want to show but in fact this is what we want to show we want to have categories and then we want to show popular products and then new arrivals but in this case we just see one type of products that being duplicated and how to avoid this if you use block all right if you use block one thing you have to do that your same block could be used to update different parts of the screen just like uh we have done over here okay the same block has been used to update this UI but how to make sure that it's not duplicated okay the first thing you have to understand usually when you use block each time one state is emitted when a event is triggered and for that state only one part of the screen should be updated but in general because the build method gets called so it updates the whole page so we need to make sure that each part of the screen updated by using one block but independently and at the same time we need to make sure that they don't interrupt Each Other Well to able to achieve this thing what we need to do we need to get our block like for example over here category session so this should show a category over here here but it's not showing it should show the category like this over here okay now to be able to do that should read this screen using a block which means uh block provider so if we remove this code and then over here if we unlock this code now we'll see something interesting you see category session is over here just like the earlier category session but now I'm getting it through a block provider so it will give me a new instance of the category session and right now if we go ahead and update it well beautifully we do see that here category session but they're still being duplicated so that means that for this two sections I can get new block provider but blog provider would still be looking up the same Cubit or block now let me comment this one over here out and then uncomment this code now as you see just now we had popular product popular section we still have the same but in this case I'm getting this block or Cubit once again by wrapping around this block provider so it will get me a new instance of the code now I could do the same for new arrivals which is different from popular screen or section so let me go ahead and comment this out and uncomment this code now over here we do see once again the same block or Cubit but a different screen or different UI section so let me go ahead and restart it now we see here is our category here is are popular products and here is our new arrivals so the idea is if you have a block and the same block is used to update different parts of the UI you should get that block using block provider in your screen otherwise you will end up getting the same products or same items on the screen that's because one block in general it'll just give you one state and for that state one part of the screen get updated but it actually rebuilds the whole screen and then the old UI is gone or the other part is gone so to avoid this you have to get the new instance of block and then you can wrap that your block or that section using block provider hopefully it makes sense thanks

Channel: dbestech

Views: 2,934

Keywords: same bloc update different parts of the screen, bloc update screens, bloc architecture, flutter bloc, flutter bloc pattern

Id: L31mlsIuTWU

Length: 4min 51sec (291 seconds)

Published: Sat Jan 20 2024