changing a nested child fields from its parent in flutter? - flutter

Question

I have a widget A that has a nested widget B. I need to update a field on B (maybe by calling a function of B) when user click on a button in A. How can I do it?
EDIT: more details
Widget B is a widget that I use across my app so I want to leave him as a separate widget. Widget A is composed of widget B plus another button and I want that click on the button will change the the text that inside Widget B
EDIT2 - what I want to achieve:
Widget B is actually a Container that contains TextFormField with some other widgets. I use it for 5 form fields. now I want to add a field for location. the field for location consists of B plus a list that open when user type and there are results from google geocode. When the user clicks on one of the results, I want to set the TextFormField controller text to the value the user type.
So, I don't want to copy all logic and widgets for the text field from B to A.
In my code widget B is FormTextField and A is LocationField
class LocationField extends StatefulWidget {
Location meetingPointData;
LocationField(this.meetingPointData): super();
#override
_LocationFieldFieldState createState() => new _LocationFieldFieldState();
}
class _LocationFieldFieldState extends State<LocationField> {
OverlayEntry _overlayEntry;
var addresses;
final LayerLink _layerLink = LayerLink();
#override
void initState() {
super.initState();
}
onLocationInputChanged(text) {
this.findLocations(text);
}
#override
Widget build(BuildContext context) {
return CompositedTransformTarget(
link: this._layerLink,
child: FormTextField('meetingPoint', 'Meeting Point', "", "enter the name of a place or an address", TextInputType.text, onLocationInputChanged, true , {"empty": "Please enter the meeting point"})
);
}
OverlayEntry _createOverlayEntry() {
RenderBox renderBox = context.findRenderObject();
var size = renderBox.size;
var addressesWidget = <Widget>[];
for(var i=0; i< addresses.length; i++) {
addressesWidget.add( ListTile(
title: Text(addresses[i].addressLine),
onTap: () {
widget.meetingPointData = Location(addresses[i].addressLine);
setState(() {});
this._overlayEntry.remove();
this._overlayEntry = null;
},
),);
}
return OverlayEntry(
builder: (context) => Positioned(
width: size.width,
child: CompositedTransformFollower(
link: this._layerLink,
showWhenUnlinked: false,
offset: Offset(10.0, size.height - 45.0),
child: Material(
elevation: 4.0,
child: ListView(
padding: EdgeInsets.zero,
shrinkWrap: true,
children: addressesWidget
),
),
),
)
);
}
Future findLocations(text) async {
if(text == "") {
addresses = [];
return;
}
// From a query
final query = text;
try {
addresses = await Geocoder.local.findAddressesFromQuery(query);
var first = addresses.first;
print("${first.featureName} : ${first.coordinates}");
} catch (err) {
}
if(addresses.length > 0) {
if(this._overlayEntry != null) {
this._overlayEntry.remove();
this._overlayEntry = null;
}
this._overlayEntry = this._createOverlayEntry();
Overlay.of(context).insert(this._overlayEntry);
} else {
}
}
}

Answer 1

Assuming that the widget tree you're thinking of is:
A(
child: B(),
);
Then A should not be able to modify the state of B. Even if it is technically possible through global variables/GlobalKey, it is anti-pattern to do so.
Instead, you should move the state up in the tree and store your field inside A instead of B.