Your Second Flutter App

Nov 30 2021 · Dart 2.13, Flutter 2.2.3, Visual Studio Code

Part 5: Meet Inherited Widgets

33. Create an Inherited Widget

Episode complete

Play next episode

Next
About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 32. Learn Flutter State Management Next episode: 34. Lift State Up

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.

Learn more Already a subscriber? Sign in.

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

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.