Greg Perry

Nov 26, 2021

7 min read

A Better Flutter App #8

Effectively using an InheritedWidget for separate and spontaneous rebuilds

One of a series of articles detailing a comprehensive starter app. This app is generated by a template offered by the package, app_template, which uses the underlying framework, mvc_application, based on the MVC design pattern.

I Like Screenshots. Tap Caption For Gists.

No Moving Pictures, No Social Media

Let’s begin.

Other Stories by Greg Perry

Individual Change

Get A Pair

Built It And They Will Too

Thus, in the next scheduled Flutter rebuild cycle the getter, wordPair, will retrieve its value, but not before its StatelessWidget, SetState, has been rebuilt. You see, that widget's InheritedWidget has been rebuilt, and so its builder parameter would have been passed a new value in the dynamic variable, obj. Looking at the second screenshot below, you can see if the dynamic variable is a String object (a word-pair), its value is returned within a Text widget…and there you have it.

A Stateless State Set

Again, as you see in the first screenshot below, when that static variable, dataObject, is assigned a value, the underlying framework’s InheritedWidget is having its setState() function called: _InheritedMVC.setState((){}). However, let’s not confine ourselves to the SetState class that only is rebuilt when some static variable is assigned a value. The framework can be more reflexible than that and take full advantage of Flutter’s InheriedWidget! Do you see what’s highlighted in the second screenshot below? What’s highlighted is unbelievably powerful. I’ll replace the SetState class in the starter app and instead implement those two functions: inheritWidget() and setStatesInherited().

Inherit The Widget

Of course, the underlying framework takes care of all this for you.

Inherit The State

In the screenshot below, you can see the _getWordPair() function has been modified a little bit. I’ve introduced four more lines of code. One assigns the newly generated word-pair to the instance variable, _wordPair. That property, if you recall, is accessed by the new StatelessWidget, _WordPair. Next, the ‘App State Object’ calls its function, inheritedNeedsBuild, to notify the framework’s InheritedWidget to call its setState() function and rebuild. Hence, all its ‘dependencies’ will also rebuild. Note, as of this writing the function, setStatesInherited, was recently deprecated in favor of the more familiar name, inheritedNeedsBuild (akin to the markNeedsBuild() function). It was placed there anyway as it’ll still work for now. Now, what of that fourth line? The one currently commented out? Well, it’s just another variation.

word_pair_timer.dart

Pass the Build

Same Inherited Behavior

For example, just imagine some financial app with a very, very busy screen — its data elements flashing and constantly changing here and there. Rebuilding and refreshing the whole screen would be madness! However, with the way an InheritedWidget is implemented in this framework, there’d be no problem at all. Now, would this be another crucial capability of a typical Flutter app? Well, it would certainly make that Counter app more efficient, I can tell you.

shutterstock

Cheers.

Part of the ‘A Better Flutter App’ Series

→ Other Stories by Greg Perry