Android App Development
iOS App Development
Flutter App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 22.214.171.124 release ready!
Updated 26 April 2023
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.
You may also check out our Flutter app development company.
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.
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.
Due to the setState, CustomTheme`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 🎊 .
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.
Your email address will not be published. Required fields are marked*
Save my name email and website in this browser for the next time I comment.
Be the first to comment.
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.