Flutter: Communication between widgets
I have seen this question many times in StackOverflow and in other forums / social networks, when we started with Flutter, we have the question of how we can communicate between widgets, that is, from parent Widget to child Widget and vice versa.
We have many ways of communicating between widgets.
We will review each of the ways, from the simplest to the most optimal.
Scenario
As a scenario we will have 2 tabs and 2 child widgets.
We created the 3 widgets as Stateful since we are going to update the content, part of the code would be like this.
Parent
Child 1
Child 2
Result
Now, if you see the UI of our example, we have created several action buttons, each action represents the following:
Action 1 Update the content of the Child 1 widget from the Parent widget.
Action 2 Update the content of the Parent widget from the Child 1 widget.
Action 3 Update the content of the Child 2 widget from the Child 1 widget.
Action 4 Change the tab from Child 1 widget to Child 2 widget.
We will see step by step each of these actions and what options we have to do it.
Action 1
Update the content of the Child 1 widget from the Parent widget.
Result
Option 1:
Update the widget passing a parameter (defined inside the child). Then we need to modify the child also to display the param if there is any.
Code updated:
Parent
Child 1
Note: we are asking if there is any non-value param from widget.title, otherwise It will display the value “Page 1”.
Option 2:
Define a GlobalKey with State class of the Child 1. We will have to make the State class public, so remove the underscore : Child1PageState
Set the GlobalKey as a key for the Child1 Widget.
Create a method on the Child1 widget which will refresh the Widget with the new value.
Call the method defined in Child1State from Parent Widget.
Code updated:
Parent
Child 1
Option 3:
Using InheritedWidget to store the data from Parent Widget and restore the data from Child1 Widget.
After we refresh the Parent Widget with the new value, we can access to that InheritedWidget from any Widget in the Widget tree.
Code updated:
Parent and InheritedWidget
Child 1
Note: If you like this approach I recommend you to use this awesome package called: ScopedModel
Action 2
Update the content of the Parent widget from the Child 1 widget.
Result
Option 1:
Using CallBacks , create a method in the Parent widget, pass the method as a callback from your Parent Widget to your Child Widget.
Create Callback param in your Child Widget.
Execute the callback from your Child Widget.
Code updated:
Parent
Child 1
Action 3
Update the content of the Child 2 widget from the Child 1 widget.
Result
Option 1:
Because the Child 2 Widget is not built yet (we are using tabs and Child 1 widget is the current) Using InheritedWidget to store the value is the best option.
Code updated:
Parent
Child 1
Child 2
Action 4
Change the tab from Child 1 widget to Child 2 widget.
Result
Option 1:
Pass the tabController as a parameter from Parent Widget to Child 1 Widget.
Code updated:
Parent
Child 1
Option 2:
Pass a callBack from Parent to Child 1 Widget and change the index of the controller.
Code updated:
Parent
Child 1
Option 3:
Set the tabController inside InheritedWidget , call it from Child 1 Widget and change the index of the controller.
Code updated:
Parent
Child 1
Conclusion
It is good to use the tools that Flutter provides so you can check the performance of each one, the ideal is that when passing values, the minimum possible widgets are rebuilt.
Let us know if you have another ways to communicate Widgets.
You can check the source code in my flutter-samples repo https://github.com/diegoveloper/flutter-samples
References
https://flutter.dev/docs/development/ui/interactive
You can follow me on Twitter
