The InheritedWidget

Many are not using it right.

Greg Perry


Here, copy this gist, inherited_state_mixin.dart, and you’ll have a mixin that provides you with a properly implemented InheritedWidget to be used with any State class. I’m seeing developers are not implementing their InheritedWidgets quite right and thus not utilizing them to their fullest. This mixin will make that a distant memory.

I had first introduced this ‘ready-made InheritedWidget’ approach in a previous free article (see below), but it involved my own Flutter framework — you’d have to use my framework to use these ‘built-in’ InheritedWidgets. Further, it was originally implemented in an abstract class, but I’ve since improved the approach using a mixin — making it more versatile by that fact. Now you’ve your own mixin!

In this article, an example app will be used to demonstrate this mixin.

InheritedWidget & FutureBuilder

If you’re interested, I have another article, Decode InheritedWidget, offering an in-depth review of the InheritedWidget.

Decode InheritedWidget

I Like Screenshots. Tap Caption For Gists.

As always, I prefer using screenshots in my articles over gists to show concepts rather than just show code. I find them easier to work with frankly. However, you can click or tap on their captions to see the code in a gist or in Github. Tap or click on the screenshots themselves to zoom in on them for a closer look. With that, you’ll find it best to read this article about mobile development on your computer than on your phone.

No Moving Pictures, No Social Media

There will be gif files in this article demonstrating aspects of the topic at hand. However, it’s said viewing such gif files is not possible when reading this article on platforms like Instagram or Facebook. They may come out as static pictures or simply blank placeholders. Please, be aware of this and maybe read this article on or on their own app.

Let’s begin.