everyone, i am having issue trying to rendered the selected icon from the list, bellow is my code. the iconlist contains the list of all icons

  List<Widget> selectedIcon = []; //updated

  List<IconData> iconList = [
    Icons.cake,
    Icons.add_location_sharp,
    Icons.zoom_in_outlined,
    Icons.auto_awesome_motion,
    Icons.call_end_sharp,
    Icons.equalizer_rounded,
    Icons.wifi_lock,
    Icons.mail,
  ];

i mapped through the iconlist and add the selected icon to the selectedIcon array, so, how can i display the selected icon? .thanks

i tried Icon(selectedIcon), but returns the above error

 Wrap(
      children: iconList.map((icon) {
        return GestureDetector(
            onTap: () {
              if (selectedIcon.contains(icon)) {
                selectedIcon.remove(icon);
              } else {
                selectedIcon.add(icon);
                print(selectedIcon);
              }
            },
            child: Icon(icon));
      }).toList(),
    );

CodePudding user response：

You are adding IconData but while the list is declared as List<Widget>, it expects to have Widget instead IconData.

You can replace List<Widget> selectedIcon with List<IconData> selectedIcon.

Or while adding items, use selectedIcon.add(Icon(icon));

You can map your selectedIcon the way did for iconList.

 List<IconData> selectedIcon = [];
 
...
///show selected icons
Wrap(
  children: selectedIcon.map((icon) {
    return Icon(icon);
  }).toList(),
),
Wrap(
  children: iconList.map((icon) {
    return GestureDetector(
      onTap: () {
        if (selectedIcon.contains(icon)) {
          selectedIcon.remove(icon);
        } else {
          selectedIcon.add(icon);
        }

        setState(() {});
      },
      child: Icon(icon),
    );
  }).toList(),
),

To show only selected Icon, you can use nullable data.

IconData? selectedIcon;

//....
if (selectedIcon != null) Icon(selectedIcon),
Wrap(
  children: iconList.map((icon) {
    return GestureDetector(
      onTap: () {
        setState(() {
          selectedIcon = icon;
        });
      },
      child: Icon(icon),
    );
  }).toList(),
),