如何从子小部件更新父小部件的状态并将其反映在子小部件中？

Question

Hello I have parent stateful widget which has button on tap of which I show a bottom sheet in which I have dropdown menu. now the state variable, list and function all are in the parent widget when choose any option in drop down it call the function to set that variable to new value but it doesn't reflect on the screen. when pop the bottom sheet and open it again it shows the updated value.

parent,

class PageAssets extends StatefulWidget {
  @override
  _PageAssetsState createState() => _PageAssetsState();
}

class _PageAssetsState extends State<PageAssets> {
OrganisationModel selectedOrganisation; //-----> state variable 
 List<OrganisationModel> lstOrganisation = []; //----> list of values

selectedOrgChanged(OrganisationModel plant) { //----> function which is to call on change 
    if (mounted) {
      setState(() {
        selectedOrganisation = plant;
      });
    }
    loadPlants(plant: selectedOrganisation);
  }

//somewhere in UI
...
IconButton(icon: Icon(Icons.tune),
              onPressed: () async {
                  showModalBottomSheet();
          })

}

custom drop down button

FilterDropDown(
                      title: 'Organization',
                      onOrgChange: (val) {
                        widget.selectedOrgChanged(val);
                      },
                      orgList: widget.lstOrganisation,
                      selectedOrg: widget.selectedOrganisation,
                    )

custom dropdown menu

class FilterDropDown extends StatelessWidget {
  final OrgBase selectedOrg;
  final List<OrgBase> orgList;
  final OnOrgChange onOrgChange;
  final String title;

  FilterDropDown({
    this.title,
    this.orgList,
    this.selectedOrg,
    this.onOrgChange,
  });

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Row(
      children: [
        SizedBox(
          width: 10,
        ),
        SizedBox(
          width: 130,
          child: Text(
            title,
            style: theme.textTheme.subtitle2,
          ),
        ),
        Container(
          width: 150,
          height: 55,
          margin: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
          padding: EdgeInsets.symmetric(horizontal: 7, vertical: 2),
          decoration: BoxDecoration(
              color: Color(0xffe4e4eb),
              borderRadius: BorderRadius.circular(10)),
          child: DropdownButton<OrgBase>(
              isExpanded: true,
              icon: Icon(Icons.arrow_drop_down),
              iconSize: 30,
              hint: Text('--Choose--'),
              underline: SizedBox(),
              value: selectedOrg,
              items: orgList
                  .map<DropdownMenuItem<OrgBase>>(
                      (value) => DropdownMenuItem<OrgBase>(
                          value: value,
                          child: Text(
                            value.label,
                            style: theme.textTheme.subtitle1,
                          )))
                  .toList(),
              onChanged: onOrgChange),
        ),
      ],
    );
  }
}

so how can I fix this?

Answer 1

inside FilterDropDown on DropdownButton ,

replace onChanged: onOrgChange, with onChanged: (value) => onOrgChange(value),