Inherited Widget In Flutter

Save

Inherited Widget In Flutter is a base class that allows classes that extend it to propagate information down the tree efficiently. Basically, it works by notifying registered build contexts if there is any change. Therefore, the descendant widgets that depend on it will only be rebuilt if necessary. In addition, the descendant widgets can also get the nearest instance of the inherited widget and access non-private properties.

You might have already used the inherited widget unknowingly in Flutter. As Flutter framework uses it internally in order to solve multiple uses case such as Theming, Device sizing, routing, and so on.

Let’s talk about some main constructors of Inherited Widget.

child: We use the child property to use widgets like row, column stack, etc. so that we can exclude many children.

key: The key property is a one-of-a-kind parameter. Basically, every widget creator can be found if the two widget’s runtime type and key property are is equal respectively, then the new widget updates the old widget by calling it the underlying element. Otherwise, the old element is updated. The tree is removed from the tree, the new widget is converted to an element, and the new element is inserted into the tree.

The roadmap: what are we going to do with Inherited Widget In Flutter?

Since we are going to treat the current theme as a state of the app, we’re going to need an Inherited Widget wrapped by a Stateful Widget. Our Inherited Widget will expose the state of the Stateful Widget which is containing it.

Step 1: Let’s create our themes

Step 2: setup our Stateful Widget

We’ve defined our CustomTheme StatefulWidget, which contains the data for the currently selected theme.

We initialise the theme with an initialThemeKey and provide a changeTheme method that allows us to change the theme.

We need now to wrap this state inside an InheritedWidget, so that we can share our theme across the app.

Step 3: wrapping the state with an Inherited Widget

We’re going to expose the _CustomTheme InheritedWidget through our Stateful widget, as we’ll see in a bit.

Step 4: putting it all together

We’re now going to update our Stateful Widget in order to use the Inherited Widget and to expose the theme.

Let’s wrap this up with our UI

This is an ordinary Flutter screen, referencing the Theme as the usual apps do. We could achieve this because we’ve placed the CustomTheme to the root of our MaterialApp this way:

Since the whole app did not have to reference anything different than the classic Theme, we could do all of this on an already existing app. We’ll just need to define our CustomTheme and put it on top of our existing app and that would be it, no further changes required, no nasty renaming, nothing at all.

What’s happening under the hood?

  1. We change the theme calling CustomTheme.instanceOf(context).changeTheme(ourThemeKey).
  2. The change triggers a setState updating the theme with the new value inside the CustomTheme Stateful Widget.

Due to the setStateCustomTheme`rebuilds. The Inherited Widget gets rebuilt as well, and since its updateShouldNotify returns true all the depending widgets (MaterialApp in our case) are updated, resulting in a UI update with the new color scheme.

That’s all for this Article 🎊 .

Conclusion

We learned about the Inherited Widget in Flutter with theme changes in this blog.

Visit the link for additional information on the Inherited Widget in Flutter.

Thanks for reading this blog. You can also check other blogs from here for more knowledge.

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

css.php

It was a successful collaboration. The Mobikul team provided the client everything they needed in a timely and high-quality manner. They were very professional, reliable, and accessible during the entire process. The client also saw no room for any improvements in the vendor's performance.

Vincenzo Carrano

Vincenzo Carrano

Administrator, Segshop

Talk to Sales

Global

Live Chat
Start a Project


    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home