Inherited Widget In Flutter
Flutter has made it quite easy to develop complex UIs for developers. Pulsation automated testing empowers you to meet high responsiveness in your application as it helps in discovering bugs and various issues in your application. Pulsation is a tool for developing mobile, desktop, web applications with a code & is a free and open-source tool.
Hello friends, I will talk about my new blog on Inherited Widget In Flutter. We will also implement a demo of the Inherited Widget, and describes its properties, and how to use them in your flutter applications. So let’s get started.
Table Of Contents :
Inherited Widget :
In flutter, the inherited widget is a base class that allows those classes to extend the information under the tree from it. Inherited widgets are also a kind of state management technique. It works by telling registered build references when a change occurs. However, it adds interoperability to any app in a secure way, but when doing so it can Re-create each widget atop the tree.
Demo Module :
Attributes
Let’s talk about some main constructors of Inherited Widget.
const InheritedWidget({
Key? key, required Widget child
})
: super(key: key, child: child);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.
Code Implementation:
You need to implement it in your code respectively:
Create a new dart file calledcount_state_demo inside the lib folder.
Before using the Inherited widget we have created a class named Constant that extends the Inherited widget It overrides the updateShouldNotify method used to get the closest widget to the information from the given BuildContext.
class CountState extends InheritedWidget {
final int count;
final Widget child;
final Function addCounter;
final Function removeCounter;
CountState({Key key, this.count,this.child, this.addCounter,this.removeCounter})
: super(key: key, child: child);
static CountState of(BuildContext context) {
return (context.dependOnInheritedWidgetOfExactType<CountState>());
}
@override
bool updateShouldNotify(CountState oldWidget) {
//return true;
return count != oldWidget.count;
}
}This method has to be canceled before the inherited widget can be overridden updateShouldNotify method. This method has been used so that the widget received from this widget must be notified or not. It is of type Boolean and accepts a parameter that Is similar to a square
@override
bool updateShouldNotify(CountState oldWidget) {
//return true;
return count != oldWidget.count;
}Now we will initialize the count state in the RootWidget class and initialize the addCounter and removeCounter functions, then we will define the InheritedWidgeDemo class which will display the value of the counter which has two buttons that will be clicked on and add value and remove value.
return CountState(
count: count,
addCounter: addCounter,
removeCounter: removeCounter,
child: InheritedWidgetDemo(),
);When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_inherited_widget_demo/view/count_state.dart';
class RootWidget extends StatefulWidget {
@override
_RootWidgetState createState() => _RootWidgetState();
}
class _RootWidgetState extends State<RootWidget> {
int count = 0;
void addCounter() {
setState(() {
count++;
});
}
void removeCounter() {
setState(() {
if(count>0){
count--;
}
});
}
@override
Widget build(BuildContext context) {
return CountState(
count: count,
addCounter: addCounter,
removeCounter: removeCounter,
child: InheritedWidgetDemo(),
);
}
}
class InheritedWidgetDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
final counterState = CountState.of(context);
return Scaffold(
appBar: AppBar(
backgroundColor:Colors.blue,
title: Text(
'Counter Inherited Widget Demo',
style: TextStyle(color: Colors.white),
),
),
body: Column(
mainAxisAlignment:MainAxisAlignment.spaceEvenly,
children: <Widget>[
Align(
alignment: Alignment.bottomCenter,
child:Text('Items add & remove: ${counterState.count}',
style: TextStyle(fontSize: 20),
),
),
Row(
mainAxisAlignment:MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Align(
alignment: Alignment.bottomLeft,
child: new FloatingActionButton(
onPressed: counterState.removeCounter,
child: new Icon(
Icons.remove,
color: Colors.white,
),
),
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Align(
alignment: Alignment.bottomCenter,
child: new FloatingActionButton(
onPressed: counterState.addCounter,
child: new Icon(
Icons.add,
color: Colors.white,
),
),
),
),
],
),
],
),
);
}
}Conclusion:
In this article, I have explained an Inherited Widget in a flutter, which you can modify and experiment with according to your own, this little introduction was from the Inherited Widget demo from our side.
I hope this blog will provide you with sufficient information in Trying up the Inherited Widget in your flutter project. We showed you what the Inherited Widget is and work on it in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
