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

An inherited widget is useful for lifting state up because it can be accessed in any widget in the widget tree. Inherited widgets are used to send information down the widget tree. To successfully use an inherited widget, you can wrap it inside of a stateful widget. The combination acts as a central storage from which widgets lower in the widget tree can access app state. For the RW courses app, the filter value state for the courses page and filter page will be lifted up in the widget tree so that both pages can access the same state. In this episode, you'll create the stateful widget and inherited widget combo called filter state container. In the next episode, you'll lift that state up. To get started, open your project in progress or download the sample project for this episode. First, create a new top-level state folder. Next, create a new file called filter_state_container.dart. We're going to do things a little differently. Normally we just have Visual Studio Code create our stateful widget template. In this case, we're going to write it manually. You'll see why in just a moment. First, create a stateful widget called FilterStateContainer, making sure to import the material library. Next, create a widget property, and then add a constructor. We're going to need to override createState to return a filtered state object. We're getting a compile error because we haven't made this class yet. The filter state is our internal state. You'll notice that it's public. Next, use the of pattern as a static method on the constructor to return the filter state contained in the stateful widget. You call dependOnInheritedWidgetOfExactType, which is typed by the filter inherited widget will create soon. Calling that method on the context means it will return the closest inherited widget in the widget tree that returns a filter state. Now give filter state a filter value int property and a shared preferences property. Make sure to import constants.dart and shared_preferences. Now create a load value method to read the filter value from SharedPreferences, just like we did earlier on the filter page and the courses page. Create an update filter method that will later be used to update the save filter value on the filter page. Okay, now it's time to finally create the inherited widget class, a private class called filterInheritedWidget. The inherited widget also has a filter state property, and also needs a constructor that populates the state and a child for the inherited widget. We also need to override update should notify on the inherited widget. By returning true, we're saying that all the widgets that depend on this inherited widget should rebuild when the state of the inherited widget changes. Next, we provide the necessary build method on filter state, which returns a filter inherited widget. The state of the filter inherited widget is the current filter state instance. And the child is the same child as that for the filter state container widget. Okay. That completes filter state container and filter inherited widget. Next you'll use them to lift up state in the app.