Flutter UI Widgets

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

Tabs are very common in most modern apps and Flutter provides us with different tab based widgets. The Scaffold widget provides us with a bottom navigation bar which lets us add a widget that can be shown at the bottom of the screen. Let's add that now, paste in the following code inside the scaffold, save your work. The bottom navigation bar shows up with the home and inbox items. In here, we set the current index to zero, which selects the first tab as the active tab. Next, we pass an empty function to the on tap property, this function will be executed when a bottom navigation bar item is clicked and is receives the click items index, we'll implement this shortly. Finally, we pass the items which is an area of bottom navigation bar item and those are the two buttons you can see over here, which is filled with a little text and an icon. We need to specify the pages to show based on the selected tabs. We will switch the current body of the scaffold widgets when we select a different item, but first let's extract the current body into a new page. This would be the homepage and it would live inside the pages folder and I'll do that now. Next, we need to be able to change the body of the scaffold based on the selected tab. We would need a stateful widget for this because we want this widgets to be able to rebuild itself, based on the updated states. We will go ahead and convert the main page to a stateful widget. To do this, click on the class definition then click on the bulb icon and select convert to stateful widget. This creates two classes, the first is a stateful widget itself, while the second is the state of the widget. In Flutter, widgets are immutable. So we delegate the management of a mutable state to a separate state object. Whenever a stateful widget is mounted or inflated, Flutter then calls the create states method, which generates the state object. Next, update the state class to the following, then save your work. We added the pages list to hold the pages that will be displayed based on the selected tab. Over here, we pass on the homepage you just refactored and an inbox page that has been added to the start up project of this episode. Next we add the selected index variable and set it to zero. Inside the scaffolds body, we pass an index stack. This widget simply takes in a list of widgets and displays only one based on the selected index. Next, we use a spread operator, to feed in the pages list to the children of the index stack It should display the first item in the pages list, which is the home screen. The current index property of the bottom navigation bar is set to select that index. This makes sure that when the selected index value is updated, the bottom navigation bar item updates accordingly. Let's change the selected index value to one and see the changes, then save your work. The hot restart amounts the widgets. We need to do a hot restart, simply because we just manually change the value of a state member. You can see it updates the selected item and the scaffolds body. Let's quickly change that back to zero. We don't want to do this manually and that is why we changed this widgets to a stateful widget. Here, selected index is a member of the state objects and when these values change, Flutter would rebuild the UI to the updated appearance. Let's create the method that does this, add the filing code just before the build method. And this method sets the value of the selected index to the index that is passed to it, the set state method is provided by the state class it simply notifies Flutter that the state object has changed which in turn triggers a widget rebuild. Next, set this as a on top property of the bottom navigation bar and do know that the bottom navigation bar passes the current selected index to this callback function. Now save your work. And with this setup, you can see that the body is updated based on the selected tab.