How should I adjust my widget tree in Flutter?

Question

This is the widget tree of my application.

In deleteBtn widget is a button. If I press the button it should send false value to textVahy and bottomRect . Is here any simple way to do it? Maybe it can be done with Inherited Widget but I can't use that widget... So is here any simple way to do that?

Answer 1

I would suggest to use some sort of state management such as BloC or Redux. In case of Redux you can wrap your "dropDown" inside StoreProvider which allows you to handle various events from various widgets. These widgets needs to be wrapped inside StoreConnector. After you dispatch action to reducer from one connector, lets say tour "deleteBtn", you can define how the other connector would react. Take a look at example here .

Answer 2

I totally agree with David on using some State Management like Providers , BLoC . But if you are using a single page state management, then, you can leave it for now, since, it is advanced topics. It also requires some package imports, for instance providers , flutter_bloc etc.

What you can do is to use a simple version of the State Management and that is ValueListenableBuilder class .

• It checks for the value which you have defined for it, that is in the ValueNotifier object, and then you pass into it. It is mandatory
• You wrap the widget, which would rebuild at the time of value changed, in this case, textVahy and bottomRect

You wrap your widget in your ValueListenableBuilder for the textVahy and bottomRect

Now, let us talk like the way you want to understand.

We take the bool value which has to be sent to the two widgets, in your tree, with the help of ValueNotifier

// taking the initial value as true
ValueNotifier<bool> _myBool = ValueNotifier<bool>(true);

Now, we wrap the two widgets, which get's affected with the value change only.

Please note: No other widgets should be wrapped, which don't required to be changed with the bool

            ValueListenableBuilder(
              // the value is myBool's value only
              builder: (BuildContext context, bool value, Widget child) {
                // This builder will only get called when _myBool
                // is updated.
                return Column(
                  children: <Widget>[
                    // whatever operation you wanna do based upon your value
                    // listen to value, since it has a param, it shows text with value
                    // if the value is false, else show you textVahy and bottomRect
                    if value ? textVahy : Text('$value'),
                    if value ? bottomRect : Text('$value')
                  ]
                );
              },
              // passing ValueNotifier object to listen for any changes
              valueListenable: _myBool
            )

Now when you want to change the value of the _myBool via deleteBtn , you simply do via setState()

RaisedButton(
   onPressed: (){
      // please note _myBool is the object of ValueNotifier, but _myBool.value has 
      // the right variable to store the predefined data
      setState(() => _myBool.value = false);
   },
   child: Text('Delete Me!!')
)

As soon as you hit the button, the value will be sent to ValueListenableBuilder() , and according to the bool , it will rebuild the Widgets, which are wrapped in it.