how can I rebuild the dropdownButton instantly , when I delete the items from DropdownMenuItem

Question

I have a dropdownButton , where I add few things to list , then using contextMenu with edit and delete I manipulate the list , I want the manipulated list to be displayed instantly when I remove the item . as of now If I reopen the dropdown I am able to see updated items.

I tried using global keys and also Unique Key . using Unique key closed dropdown . I dont want to close and reopen the dropdown again to get the updated list.

class _ChatDropdownState extends State<ChatDropdown> { List<Profile> dropdownProfiles = []; 
late DropdownProvider _dropdownProvider;
@override void initState() { super.initState(); dropdownProvider = context.read<DropdownProvider>(); WidgetsBinding.instance.addPostFrameCallback(() { _loadDropdownData(); }); }
Future<void> _loadDropdownData() async { dropdownProfiles = Preferences.instance.getProfiles(); String? selectedProfile = Preferences.instance.getSelectedProfile(); setState(() { _dropdownProvider.setDropdownItems(dropdownProfiles); if (_dropdownProvider.selectedValue == null && selectedProfile != null) { _dropdownProvider.setSelectedValue(selectedProfile); } }); }
@override Widget build(BuildContext context) { String? selectedValue = context .select<DropdownProvider, String?>((value) => value.selectedValue);
List<Profile> dropdownItems =
    context.select<DropdownProvider, List<Profile>>(
        (value) => value.dropdownItems);

return Column(
  children: [
    DropdownButton<String>(
      value: selectedValue,
      key: UniqueKey(),
      items: [
        const DropdownMenuItem<String>(
          value: 'addProfile',
          child: Text('Add Profile'),
        ),
        ...dropdownItems.reversed.map((profile) {
          return DropdownMenuItem<String>(
            value: profile.title,
            child: GestureDetectorWithContextMenu(
              onTap: () => {
                onTapDefaults(),
              },
              contextMenuBuilder: (_, primaryAnchor) =>
                  _DropDownSelectionToolbar(
                      primaryAnchor: primaryAnchor,
                      title: profile.title,
                      context: profile.context,
                      character: profile.character),
              child: Text(profile.title),
            ),
          );
        }),
      ],
      onChanged: (String? value) {
        if (value == 'addProfile') {
          showDialog(
            context: context,
            builder: (BuildContext context) {
              return const EditChatDialog();
            },
          );
        } else {
          _dropdownProvider.setSelectedValue(value);
          Preferences.instance.setSelectedProfile(value!);
        }
      },
    ),
  ],
);
} }

Answer 1

To rebuild the DropdownButton instantly when you delete items from DropdownMenuItem, you can use the setState method to trigger a rebuild of the widget tree whenever you modify the list of dropdown items. Since you're already using setState to update the dropdown items, you need to ensure that modifications to the dropdown items list are reflected in the UI