Use the filter state container and inherited widget you’ve create to lift filter state up to where it
can be seen by both the courses page and the filter page.
This content was released on Nov 30 2021. The official support period is 6-months
from this date.
Use the filter state container and inherited widget you’ve create to lift filter state up to where it
can be seen by both the courses page and the filter page.
Cinema mode
Mark complete
Download course materials
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress,
bookmark, personalise your learner profile and more!
Previous episode: 33. Create an Inherited Widget
Next episode: 35. Use Portrait Mode
Get immediate access to this and 4,000+ other videos and books.
Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and
4,000+ professional videos in a single subscription, it's simply the best investment you can make in
your development career.
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.
All videos. All books.
One low price.
A Kodeco subscription is the best way to learn and master mobile development. Learn iOS, Swift, Android, Kotlin, Flutter and Dart development and unlock our massive catalog of 50+ books and 4,000+ videos.