Flutter Bottom Navigation bar - Persisting Navigated Pages

[Music] hello and welcome to port coder in this tutorial we are going to implement the bottom navigation bar in our flat our application so you can see here we have blocks we have favorites and we have accounts and we are able to navigate between these pages you can see here it's the block page and here is the favorite and also we have the account so implementing this bottom navigation bar in a flatter is really an easy task but when you want to persist the data in the pages that you navigated to that is a tricky part so let me show you what do I mean by that suppose here we have a list of blogs and we render it so the list of blocks you can see start from one and it's increasing and if suppose I am is crawling this much and tell 75 and I am going to the favorites page and when I come back you can see still I am in that part I mean I am in the scroll position that I left it before but by default this functionality is not there and not implemented so let me show you the account page that this functionality is not implemented so here we have the account and it starts from one and it's just increasing and right now I am at item 29 and if I go to these favorites and just I navigate back to the account you can see it starts from one so this is really costly when you just rendered this data and you got it from the server and user is crawled this much and right now if you go back and come it's just rendering again so it is really costly in the performance or when you render the UI okay so in this tutorial we are going to implement this functionality the bottom navigation bar and also persisting the data okay I am going to start the tutorial by building or by creating an app from scratch to restart I am going to open my terminal and first of all I want to see the two desktop or go to the desktop and dear I want to create a folder mkdir and i will call it test and inside this test I'm going to the test directory and here first of all let me clear it and I am going to write a flatter create bottom navigation bar so this is the name of our project it will create a new application for me it takes a little bit time so I think it's done so after it's done I am going to CD to this bottom navigation bar and I want to open it in my vs code so cut this one it will open it in the reuse code okay so before everything we have an empty flatter application let me run it so it takes time a little bit I think I am going to pause the video so here we have the counter app which you will get by crafting and new flatter application so this is a simple counter app so I'm going to the mean dot dot and first of all I am going to remove all this you know the comments so boy control pressing comment if or control if on windows and oh I think you know this double backslash and dot store it when selecting this rejects it Willis and select all the you can see the comments and here you can click on this one and replace it with nothing so it will replace it okay so after saving it's gone and what I want to do is I want to delete everything but this is stateless widget and here what I want is my home page which is not existed yet so I am going to the Lib directory and Here I am going to create a directory or folder called pages and inside these pages I'm going to create three pages so one is our blocks no first of all it's a home page dark and also we have here a stateful widget and this is stateful widget is our home page what I'm going to do is I am going to bring the material by pressing command dot on Mac or ctrl dot on Windows so here we have an escape fold and there's a scaffold does not have anything so right now what I am going to do is first of all let me bring this one and so it mean and if I save it we have nothing an empty page so let me create other pages so we have blocks blocks I'd call it page dot dot we have the favorite page or favorites page dot dot and we have the account page dot dot okay so I am going to paste what I copied from the home page and what I'm going to do is just by pressing command D on Mac I am going to select all and then I will rename it to blogs page and here we have our blocks let me copy used an app for so app bar we have here a title of text blocks page okay so this is our block and I am going to copy everything and I am going to paste it inside a there's account dot page I'm going to select everything and I'll write account page and here I will write account the same thing I will do with the favorites okay they wave rates page and here also favorites okay so we have our three pages and right now there's nothing because inside the main of our app we are not calling anyone of this so to start building a bottom navigation bar first of all if you use anis careful and so I discovered you have an bottom navigation bar you have basically this floating action bar and also you have this bottom navigation bar so if you use bottom navigation bar here you can see that we have the bottom it is a type of bottom navigation bar and this bottom navigation bar by default it needs the items and if you hover on these items you can see its bottom navigation bar item so basically it's a list and if you see it's a list of bottom navigation item and I am going to use bottom navigation bar item and here for the icon we can use icon so the first one I'm going to use icons dot home and here it will have title and for the title it's going to be a text and I will call it as home if you save it like this it will give you an error because this bottom navigation bar at least want the link to be to not one so if I just copy this one and paste it and also I will change it to a favorite and also favorite it will just render and right now we have two item menu items here but we want three so let me put a comma here too and also a comma here okay and I am going to copy this one and we have the person here and this should be account okay so we have our three minutes right now so see how easy it is to navigate the bottom navigation bar in flat but our main job is remained and that is to create our pages and also by clicking on any of this item we want to navigate between these pages and also persist the data so to do that I'm going to use this scaffold again and here we have a body property for that I'm going to use a page view and if you hover on this page view it has many you know properties first of all it's needs a page controller and also physics it has unpaid changed and a list of widget which is a children so I'm going to start with the controller so it needs a page controller which does not exist it and we will we will create that if you see the page controller is a type of pitch controller and also what we need is the children which is a list of widgets and we will call it currently as a screen but it is not exist all soon we want on pitch changed and I'll call it as on page changed this is also not exist and if you see this on page change is a function will give you an integer and that is basically the index and also we have the physics so physics never scroll what is that never a scrollable physics so we do not want this part or this piece view to be a scroller okay so we are going to create each of this one edge controller a screen and on a change so I am going to start with the pitch controller so it is a type of pitch controller and we call that a speech controller so we just want to initialize that we have our pitch controller and also we need our screens so screens is a list of widgets so here basically we want our blocks pitch also we want our favorite pitch favorites what I called it let me good here it is a few I'm sorry sure to be favorite that's why it's not coming it should be okay let me copy this one I'm going to save it and here I will write it as favorite so if not coming what you can do is bring it here okay and we have account rich so we have our three pages as and these pieces are widgets basically so we have our screens and this should be screens not the screen and right now we want our unchanged and this unchanged is basically a white function on page changed will give us the integer and this is index okay so also so we are done with this one okay so you can see by default it will select the first one the first by default if you save it like that it will save this the first element or the first widget from the children so we have our blocks page but right now we are not able to navigate between this pages because you can see that if we tap on this elements or these items it doesn't do anything for that let me close this terminal if I just hover on this bottom navigation bar you can see we have something here and not pitch by team and the bottom navigation bar itself so here we have untapped here which is a function so untapped we want item tapped so anyone of this item tapped so what we want is to create another function white on item item tapped and still gives us an integer which is the index or currently not the selected basically this is the selected index and right now we have this one so let me copy this one and put it here and if I right now just print this index you can see that selected index and if I print it and I open my terminal with the cancel lock is supposed to sub see if I choose this favorite it gives one and also for that count two for index it is zero so basically we are right now you know when clearing clicking or selecting any of this it will gives us here okay so what we want is here to adjust on top of this we want the pitch controller to jump to the pitch here we have another appropriate card jump to page and which pitch selected index so here so right now if I save it and if I click on any of T its home here it's block and here we have favorites and here we have the accounts this one is not home let me put it as blocks okay so you have the blocks here we have the you know the favorite and also we have the account but unfortunately it is not you know selecting the one which is selected right now or highlighting the selected one so to do that we what we need is an integer or selected index and it should be zero by default and what we want is on this paint changed when the page is changed we want to just make this selected index let me just bring it here because it should be here and we want to call set estate and change this selected index equal to the index which is selected okay or we can put it as current index Matt it's okay and also here what we want inside this bottom navigation bar for them icons let me put a comma to refactor it here for the color of this icon what we can say we check if or what we can see is the selected index equal to equal to zero if it is equal to zero we want the color colors dot blue and if not so it should be null so nothing and right now if I just save it and if I click on this one oh it's not working why so it should be colors that gray color is not great I would put it like this okay so if I click on this one you can see that the color change to gray but the same thing what we want is for this text so if I put a comma and save it it will refactor we have to stall here so it is text this type and we also we have the color here the same thing we want to do for this one so if we select the block you can see it is selected and it shows bad if I now we get to this one it's not indicating all of them so what I will do I just copy this one and I will put it here for this one and also text the style for my favorite and I need to put a comma here and this should be one if the selected index is equal to one should highlight this one so right now if see you can see it already okay so I need to copy this one again and put it here this should be too and the same thing I'm going to copy this text style and put it here this also should be too okay so right now if I just click here here here you can see it's highlight so we are done with the highlighting and right now the only thing that is remained to render our list or at least to persist the date okay so to do that so we are done with the navigate important right now you can see that our pages just changing and to implement the list what I'm going to do is inside our blocks I'm going to use a ListView for our body and this list builder should be a builder and we want them item count to be at least item counts to be 500 and for the Builder what I'm going to do is I'm going to return a card and inside this card we want the child should be a column column and this column has children's so yeah this should we should not be like this it should be because if you hover on this build item builder it's a function written giving you the build context and also the index so what we want is the context and also the index current index and then we return a widget because it's a list of which okay so we are done and what we want is here to text so this is the title of block and which block I am going to use the index plus 1 because index start from 0 so it is not meaningful so I'm going to do it like this if I save it you can see we have all the blocks now okay so it is listed here but what I want is not this one sorry I will just copy this text I put a comma here save it so it will refactor so here I am going to use the Laurium some let me bring it here now it will copy to this part and not this part this part is sufficient I think so let me go back and I am going to paste it here so if I save it right now we can see that we have everything but the color is not that much clear so for this scaffold I'm going to use background color as colors dot agree and it should be shade of 400 or 300 is okay so right now it is visible and what we want is we want to grab our card with a padding so at least we have some padding so I will give us 16 I think it's okay no it's a lot so it look if it does it still it is not okay we turn the padding and yeah what's so sorry so I'm not going to give it here it is okay but I want to over this column with a padding not the card itself so if I give it yeah right now it looks good okay so if ideally that's 16 it is better and also I'm going to use Texas tile texture style and font size this should be at least 18 or 16 so it's bold font family and put family front width phone width and should be front with that bolt so you're building basically and also what I'm going to do is I'm going to put a sized box here science parks and the height is around thing so if I save it you can see it looks bit but what we want is to at least highlight it to look clear so we can say here for the color of this cart if index mod to equal to equal to zero so what we want is the color colors dot till otherwise not so if I save it you can see right now and if the color is still we want the color to be white the color of the text so the color of this text the title and the color we can save it like this and they not tell it should be white if it is still the color should be white yeah it looks good but the problem is still here if I navigate to the favorites and come back you can see it start from one if I navigated this much or scrolled that much and if I go you can see it's start from one no problem will implement that and right now what I'm going to do I'm going to copy everything and I'm going to paste it inside the favorite bit and I am going to rename this page to favorites page and the same thing I'm just going to write here and not this should be say Ritz and you can see it is title of favorites one favorite too and here not till I'm going to use purple for this one it's okay yeah for this let me put it as blue and yes we have the blue one for the favorites and also I am going to copy everything and I'm going to paste it inside that count each so basically I'm just copy pasting to just demonstrate the persisting part okay account page we have the account page here and also account so for this one I'm going to use the purple color if I go to here you can see we have the account and if I navigate now it is a few oddities so I am going to change this one to favorites okay so right now we are able to navigate between these pages and also we are able to render our date but the persisting parties remain so to persist your data what is happening here inside if you go to inside the home page basically this page view will change we'll call this one unchanged and each time when we change on a tip tab here we are using the page controller and jump going to this concurrent page or the selected index page so basically it's choosing from this list of screens and it will initialize it so it will initialize it from 0 so that's why it's rear-ended again so to prevent that we have something to use with our stateful widgets and that is here inside suppose on blocks page state after the extents part we have can used wait automatic keep live client mixing and this will keep it alive or persisted but if we just put a deer we have an error here you can see it is basically it is not implementing something and if I go here and adjust by pressing control dot we can see we are missing an overwrite method if I click it here it will add this part and this will will say and want to keep a live we want true or return true yes we want to keep it alive or persistent and also inside the belt also we have this is quickly line and if you just go on to the end it should call the super dot belt I'm not sure with web it is written but basically this is this part that will it needs to call super dot belt so basically this is missing and if I add this one you can see that right now it's gone and hopefully if I right now here inside the blog as we implement it if I scroll this much or 200 or 101 and if I navigate to the favorites and come back you can see it is persisting so this is the trick that you can use this mixing and with this methods to keep this the scroll position and the data that is finished and rendered as it is so we are going to use this for our favorites as well so with automatic keep a live client mixing we are going to overwrite the method want to keep alive yes we want so it should return true and also inside the belt method we need to call super dot build and we need to pass the context so right now if I just scroll dispatch and navigate to the favorite parts and come back you can see our block space is still in that position also the same thing with the favorite because we implemented that if I suppose scrolled this much to 157 and suppose I go to the block and come back you can see it is at that position but for the account page as it is not implemented you can see if I navigate to the favorite part of the favorites part and just go back you can see it starts from the one so this is all about the bottom navigation bar in the flatter application I hope this video helped you and if it helped you kindly subscribe and hit the bell button so you'll be notified about the upcoming videos

Channel: PodCoder

Views: 34,064

Keywords: flutter, flutter bottom navigation bar, bottom navigation bar, persist pages in bottom navigation bar flutter, persist state and data in bottom navigation bar, flutter mobile app, flutter app, flutter implement bottom navigation bar, podcoder, PodCoder, pod coder

Id: YJEMMhA9udQ

Length: 28min 58sec (1738 seconds)

Published: Thu Apr 16 2020