Can you use BLoC for Routing?

one assalamualaikum so here I have built this app using block and we use block not only for State Management but also for routing especially the routing part a lot of time emails third-party plugin but yeah I'll show you actually you don't need any plugin to do routing in blog it's very simple idea how routing Works in flutter app itself if you know that then you'd know you'll find that actually it's very easy with blog of course everything over here basic routing whatever you will see it will happen using blog you can go back like sign up or you can come to a sign in page once you are here from your onboarding screen so I'm gonna go ahead and log in over here using my account the one that I have created all right so just now we saw signup page that was done the routing using block now we are going to say login and this has also been done using block so now we are logging in so now we are on our home page and after that actually we can go to different tabs there's our personal Center now let me show you the more routing that I have done of course the app is still being built so there are a lot more work to be done so here we also have routing as you can see now we can go back now this is a search page but we are still working on this and then over here your settings page and of course you can go ahead and log out so yeah routing could be done using blog so I want you to see carefully and then you'll understand how it works no I want you to take a look at this class here which is called app pages and here I have this list now if you take a look at this list and if you're coming from getex background you'll see it feels like that it's pretty much the routes in gettex where you define all of your routes in a list so this is exactly the same thing I have done over here but in this case actually I'm not using get X actually I'm using block take a closer look this pretty much all looks like get X right where you have your path or your route name and your screen or page now over here I the the different thing I have done over here is that over here I also created a property which is called block now instead block actually it takes a Blog provider now block provider we use to create blogs like for example this is my welcome blog welcome block has event and States as simple as that one if you go to sign in Block actually over here I also have event and state and inside this actually just a block that has been created for sign-in requests so whatever your pages or routes name they all should go ahead with a block where you create the block using block provider and all of your pages are inside this list I would say all of your routes are inside this list now you may wonder what is this page entity actually page entity is over here this is just a simple class more like a model which takes the path or your route's name and your page which is a widget or a screen right and our blog that's how we create object now this object over here it is consists of over here path page and blog so we return the list over here right so just a list a list of blocks now after that actually we want to inject this blocks or actual block provider in our main.dart since we are using block to do that first I wrapped my app using multi-block provider now we know that multi block provider has a provider's parameter which takes a list of providers or list of blogs actually now what is this actually this browser the one that I created over here is this one what it does actually it returns all these blocks the one that we created in the list in a list now you may ask why you just directly don't return this list up there now the problem with this list is that these are objects but I don't want to return objects all I want I want to return blocks so that's why over here actually we created a method which is called Blosser now over here I have created a list Dynamic list and I take all the lists the list that I've created at the top and then I look through them and as I look through I just add the blocks or the block provider in this list once the for Loop is done and then we just return it and as we return we can actually inject our block providers in our main.dart inside this multi-block provider so that's the first step and actually we're very close to be done with this concept the one that I'm introducing like use blocks pure blocks to do routing no plugins the last step actually it's called on generate route now what is this now we know that actually over here it says there's a callback right it's generated when you navigate in your app when your navigation happens through named route now of course you see that over here our routes these are actually named routes because these are all string actually so these are named routes so what I did over here I created a callback function now let's take a look so this is that callback function now this callback function also actually works a little bit like a middleware why because we do a lot of things a lot of checkings over here now the Callback function the name is generate route settings as you can see okay now this callback function actually I bind it here or I assign it to on generate route so this callback function is same page or same class as you can see in app pages actually so this is over here now if you wonder where are my routes name routes name are actually over here in app routes as you can see so these are just basic strings that we are returning anyway so now let's go ahead and take a look at this callback function so the Callback function actually while it does it takes parameter which is called route settings now this is a built-in class in flutter so you don't have to worry about it all it does is checking with your routing so whatever the route you go to so it can take that route and if it can take we grab it in this object which is called settings you can name it anything so all we do over here we check if this is null or not if this is not null actually from this list over here remember routes is the list at the top this is the list at the top so we go through it and we check if the route that we are navigating to if this is in this list over here if this is there of course it will match one of the paths and the route name that we are trying to navigate and then we do a basic conditional check and if the check Works actually we go to the certain route that we are supposed to go all right if this is not null but of course you could go anywhere you like based on this the idea I'm trying to say when you navigate then definitely route settings would catch which named route you are going to and then we just check it and after checking you may go to certain route as you want so you can check whether the user has logged in or not if the user has logged in then you can so if the user has logged in you can go to your dashboard or application page or you can go to somewhere else or if none of this property is true over here you just go where you are supposed to go so this is also just basic navigating using material page route so if you want to use block for routing so I would suggest go ahead and create a list of objects the object itself should have your block provider inside which corresponds to each class or screen with a certain block and after that you should create a loop and in the loop actually you just get blocks from the objects remember this routs class this routes method over here it returns list of objects so from the objects we just get our block and then we return the block as we return we put it inside our providers inside multi-block provider and then once that is done once that is done you also create a callback function the Callback function checks which route you are supposed to go so that's how actually basic routing works with block without any plugin if you liked it don't forget to subscribe and push that like button thank you

Channel: dbestech

Views: 9,521

Keywords:

Id: dl6oUW6H7yo

Length: 9min 58sec (598 seconds)

Published: Tue Jan 31 2023