Your Second Flutter App

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

At the moment, the courses page and filter page each separately maintain the state of the filter in the app. Now that you have an inherited widget in filter state container, you can replace the separate state on two pages with the single state that is lifted up in the widget tree. In Flutter, this is referred to Lifting State Up. You'll make the flutter state container, the parent of your material app so that the state is lifted up sufficiently high to be used by both the courses page and the filter page. To get started, open your project in progress or download the sample project for this episode. In the UI and Filter folders, open up filterpage.dart. In the last episode, we created a filter state. Instead of the state being private, we actually made it public, replaced the filter value property with the state. Naturally, we have to import the filter state container. Since we don't have a filter value, remove both the unit state and load value methods. Of course, we still have lots of compile errors because our group value referred to the filter value. Thankfully, we added a filter value to our state object. Now we need to update handleRadioValueChange to just call updateFilterValue on the state object. Now that we removed shared preferences from this widget, we can get rid of the import. To set the value of the state property, add a method override in FilterPageState for its didChangeDependencies method. By setting the state property to the filter state container value, whenever the inherited widget is updated, so long as its updateShouldNotify returns true, the state property of the filter state will be updated as well, and the page will be rebuilt. Now we'll make similar changes in courses_page. In the UI courses folder, open up courses_page.dart. Replace the filter value with our state object. Of course, make sure to import filter_state_container.dart. Now remove both of the initState and load value methods. With those methods gone, we can also remove the shared preferences and constants imports. We still have a compile error. Change the build methods so that the call to fetchCourses uses the state filterValue. We also want to update the check on a null course to check the snapshot connected state property. We will continue to show the progress indicator if the connected state is not done. That way, when we refresh the filter, the progress indicator will be shown as the filter's applied. We need to add the same didChangeDependencies method override as we did for the filter page. Finally, we need to make our FilterStateContainer wrap the materials app widget in main.dart. Believe it or not, that's all there is to it. Let's see it in action Build and run the app. Navigate to filter and change it again. Go back, navigate to filter and change it again. Everything is working great. Well done.