Decode InheritedWidget

Greg Perry
Flutter Community
Published in
14 min readJan 8, 2021

--

An in-depth look at the InheritedWidget

Part of the Decode Flutter Series

This sample app, counter_app_inherited, is being used in this article to showcase the InheritedWidget. It supplies the simple ‘counter app’ you’ll no doubt recognize whenever you create a new Flutter project. However, in this app, an InheritedWidget is involved in incrementing the counter.

Looking at the screenshot below, the red arrows highlight how the InheritedWidget is being implemented. As always, when the ‘floating button’ is pressed, a setState() function is called. However, in this app, it’s a static setState() function defined in the class, BuildInheritedWidget. The traditional expression, _counter++, is nowhere to be seen, and yet the app does increment successfully. How does that work? Know now that it is in the widget, BuildInheritedWidget, where you’ll find the InheritedWidget, and as you see below, that widget also wraps around the CounterPage widget. Being such a simple example app, this all may look a little strange, but it’s so to truly showcase the InheritedWidget’s capabilities. You’ll see this shortly.

I Like Screenshots. Tap Caption For Gists.

--

--