Navigation and Pages
A free video tutorial from Reed Barger
Professional Web and Mobile Developer
4.3 instructor rating • 21 courses • 38,229 students
Learn more from the full courseBuild a Social Network with Flutter and Firebase
Make a complete mobile social media app like Twitter, Instagram or Facebook using Flutter and Firebase!
09:02:15 of on-demand video • Updated December 2019
- How to build a complete social network with Flutter and Firebase!
English [Auto] Now that we've added authentication we take users that sign into our authenticated page. However instead of just displaying this logout button we want to display a number of pages the user's timeline their profile their search page etc. So to enable users to toggle between pages we're going to add a bottom navigation bar to the bottom of the home page and it's going to be available in all of our pages. So to add that we're going to build out our build off screen function and instead of returning a raised button we're going to return a scaffold so we can contact our logout button for now. We'll return a scaffold widget and to be able to display different pages. We're going to set as the body of this scaffold a special widget called a page view. And for this page view it will have as its children a list of widgets which are going to consist of all the pages that we mentioned. The first one will be the timeline. And I'm just going to auto import all of these by hitting the tab button. Well first have the timeline page then the user's activity feed then the upload page then the search page and after that the user's profile so we want the pages to be displayed in this order. And we want a corresponding button for example for the timeline page for the upload page et cetera. The first thing that we're going to do for the page you is we're going to add a controller to enable us to switch between the pages. That's going to be set to a page controller variable that we're going to create in state. So we'll make this page controller variable that will be of type page controller. So within in its state we want to initialize a special widget called a page controller and we're going to assign it to the variable that we created and the reason for this. The reason we want a reference to our created page controller is that since we're creating it when our state is created in the in it's state method we want to dispose it. We want to dispose it in the dispose method when we're not on the home page when we don't need the controller. So we'll create the dispose method and just call page controller dot dispose to get rid of it. This is a common pattern for we just that we have to initialize with an IT state. So now that we have our page controller we're going to also add a function called on page changed and what this will do is it's going to first take the index that we're on. So for example if we're on the 0 index of this children list then we're going to be displaying the timeline page. If we're on the first index we're gonna be on the activity feed page et cetera. So we're going to pass this value to on page changed and we want to put that index value in state in order to pass it to some other widgets namely our bottom navigation bar. So in its parameters we'll get the integer page index and we'll use that state to update a new state value that will create of the name of the same name page index and note that since the value that we're attempting to put in state has the same name as the state variable that we're trying to update we need to instead update this dot page index instead of just page index. So let's create page index in state. It'll be an integer initialized to 0. We could set a different initial index within our page controller by setting initial page to something else other than 0 by default will be 0. We could set it to say 2 to display the upload page. And now since we have these two values we're going to add another argument to our page view called Physics and we don't want our page view to be scroll level. We want the pages to sometimes have scroll widgets within them. However we don't want the page view itself to scroll. We'll set widgets we'll set physics to never scroll scroll physics. This particular widget to make sure we cannot for the user cannot scroll. So after body within scaffold we're gonna add the bottom navigation bar and for this we're gonna use a Iow style component so we're gonna use a Cupertino widget called tab bar and the first value that we're gonna provide to the tab bar is the current index. We want to keep the buttons that we're gonna put in this tab bar in sync with our children. So from the time line page we want to say that our current index is zero and we're going to get that from the page index integer and state. The next is going to be on tap. So when we tap on one of our buttons we're gonna create them in just a second when we press on one of them. We want to execute this on tap function. So we're gonna add this. And what this will do this on tap function is gonna be responsible for actually changing the page in our page view. So how are we gonna do that. Well we're gonna do it with our page controller. So first on tap is again going to get in its parameters the page index and we can use the page controller to change the page that we're on with the help of the method. Jump to page. And this method just accepts the integer the page index. So that's all that's needed in order to change our page after on tap. We want to give the button that we've got selected say the button corresponding to the timeline page we want to give it an active color if we're actually on the timeline page. So for active color I'm going to set mine to my primary color coming from themed out of context primary color my deep blue deep purple color and then finally we need to include our items which like children for page view is a list and it's going to be a list of widgets called bottom navigation var item. And we can supply to this an icon value so we can provide an icon that users can click on to go to a given page. So for example for our timeline page we're gonna include the icon with the name icons dot what's hot. And note that you can preview this icon by just hovering over its name. So you see we have this little flame icon here going to copy this and paste this in four more times for our other four buttons so for the activity feed page this will have the icon of notifications active for the upload page. This will be camera underscore or actually photo underscore camera. And I want to make this slightly larger since it's going to be in the middle the middle of our list of buttons. So I'll set these size arguments to thirty five point zero and for these search page that will have an icon of search associated with it. And then finally for profile that's gonna have an icon of account underscore circle. So with all that we can save. I'd also recommend doing a hot restart of your app. And when we take a look at our simulator we see initially we're on the timeline page you see our first navigation bar Button has the active color that we applied and we see up at the top text timeline it may not be easily visible but we're displaying the correct page. Then if we go to the activity feed page if we click on that button see the activity feed page text and the same for the rest of the widgets. So now we have navigation within our app we're using the majority of our pages. And at this point we've established our basic app structure and are ready to move on to making each of these pages functional.