flutter passes values to any widget of when widget nesting is required

  • 2021-11-10 10:58:28
  • OfStack

If we have such an application scenario:

After the WidgetA performs the click, the data is passed through the widgetB to the widgetC below it.

You can usually pass the corresponding parameters to the specified widget tree by setting the constructor, as described in the following code:

Indicates that the click change content in widgetA needs to be passed to widgetC in widgetB for display;

It is necessary to set the constructor of widgetB, receive the corresponding parameters, and then pass them to widgetC for display;


class Inheritedwidget extends StatefulWidget {
 @override
 _InheritedWidgetState createState() => _InheritedWidgetState();
}
class _InheritedWidgetState extends State<Inheritedwidget> {
 int count=0;
 @override
 void initState() {
  // TODO: implement initState
  super.initState();
 }
 @override
 Widget build(BuildContext context) {
  print(count);
  return Scaffold(
   appBar: AppBar(title: Text("inherited widget"),),body: Container(
   child: Center(
    child: Column(
     children: <Widget>[
      Text("class0"),
      class1(count),
     ],
    ),
   ),
  ),
   floatingActionButton: FloatingActionButton(onPressed: (){
    return addCount();
   },child: Text("add"),),
  );
 }
 void addCount() {
  setState(() {
   count=1+count;
  });
 }
}

WidgetB:


class class1 extends StatelessWidget {
 int count;
 class1(this.count);
 @override
 Widget build(BuildContext context) {
  return Container(
   child: Column(
     children: <Widget>[
      Text("class1"),
      class2(count),
     ],
   ),
  );
 }
}

widgetC:


class class2 extends StatelessWidget {
 int count;
 class2(this.count);

 @override
 Widget build(BuildContext context) {
  return Container(
   child: Center(
    child: Text("$count"),
   ),
  );
 }
}

Of course, the above methods can achieve the desired effect, but when there are multiple layers of widget nesting relationships, the code readability is reduced, and the values can be passed to the specified widget by the following methods;

An intermediate class is provided by contentProvider similar to Android, and the data to be passed is passed to the formulated widget through the intermediate class.

Intermediate classes:


//countProvider Class   Provide count Attributes and child Attribute   Used with the original widget Associate, 
class CountProvider extends InheritedWidget{
 final int count;
 final Widget child;
 // Construction method 
 CountProvider({this.count, this.child}):super(child:child);
 // Provides a method to get to countprovider Class object 
static CountProvider of(BuildContext context){
 return context.inheritFromWidgetOfExactType(CountProvider);
}
 @override
 bool updateShouldNotify(InheritedWidget oldWidget) {
  // TODO: implement updateShouldNotify
  return false;
 }
}

Wrap the widget to be displayed through counterprovider and pass in the value to be changed;


class Inheritedwidget extends StatefulWidget {
 @override
 _InheritedWidgetState createState() => _InheritedWidgetState();
}
class _InheritedWidgetState extends State<Inheritedwidget> {
 int count=0;
 @override
 Widget build(BuildContext context) {
  print(count);
  return CountProvider(
   count:count,
   child: Scaffold(
    backgroundColor: Colors.blue,
    appBar: AppBar(title: Text("inherited widget"),),body: Container(
    child: Center(
     child: Column(
      children: <Widget>[
       Text("class0"),
       class1(),
      ],
     ),
    ),
   ),
    floatingActionButton: FloatingActionButton(onPressed: (){
     return addCount();
    },child: Text("add"),),
   ),
  );
 }
 void addCount() {
  setState(() {
   count=1+count;
  });
 }
}

Update the corresponding widget using the data provided by the intermediate class.


class class2 extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  int count = CountProvider.of(context).count;
  return Container(
   child: Center(
    child: Text("$count"),
   ),
  );
 }
}

Through the above method, the values that need to be changed can be passed in different widget.

Summarize


Related articles: