Flutter: Inherited Widget Basics

In this post you will learn about maintaining app state in Flutter app with the help of Inherited Widget.

Introduction

If you have ever worked on app using state management you must have had problem passing the state from root parent node down to leaf nodes (or child of child of child).

Consider a shopping app where you save all the products selected by user in a cart. You want to show this cart in your feed page, in products details page, may be in navigation bar … basically you want it to be available wherever you need.

Another use case can be that your app has multiple themes for daylight mode, dark mode, etc. You just want current mode chosen by user to be accessible in any widget you need.

Enter Inherited Widget

Simply to put, InheritedWidget helps to efficiently propagate any information down the tree. But there are some more things to consider before we begin:

  1. What information InheritedWidget will hold?
  2. What update in information should trigger listener widget rebuild?
  3. How to make information in InheritedWidget accessible to any child widget?

Now, lets take the Shopping Cart problem we described above and solve each step one by one.

1. Define what Information InheritedWidget will hold

For this example we will only store id of products selected by user.

2. Define InheritedWidget and what information update should trigger listener widget rebuild

Notice that any widget listening to InheritedWidget will only get notified when updateShouldNotify will return true. In this case, we compared productId list of old info with product list of current info.

If you just want to disable update, set it to always return false.

3. Make info in InheritedWidget accessible to any child widget

Become A Flutter Expert With This Course

The convention to access info InheritedWidget is by defining a static method in same class that will accept BuildContext from child widget and make call to BuildContext.inheritFromWidgetOfExactType.

Now that you have static function to access info from nearest parent of InheritedWidget type, you can easily access it from any child widget in the Widget Tree.

Example

Notice that we did not pass any info to ProductDetail from ProductFeed, yet its so easy to access shopping cart info inside its build method.

Now its time to create and combine all the widgets we have written so far.

Run this app then you will see shopping cart info in both Product Feed and Product Detail page. If you are new to navigation, you can head over to our tutorial for navigation in Flutter from here: Navigation and Routing

Also notice that we wrapped main MaterialApp inside ShoppingCart, this is crucial because every widget that needs to access info should be child of ShoppingCart widget.

Conclusion

Wrapping up: This is just basic way to use InheritedWidget. We only covered how to access information from the child widgets. Most often, you might need to update info in InheritedWidget and rebuild listening child.

For this, we recommend to head over our Flutter tutorial:

Building An Expense Manager App In Flutter

About the author