How can I create a PopUpMenu with dynamic data in flutter?-CodePudding

I want to show PopupMenu with dynamic data which will I got from API response. I tried with listview.builder inside PopupMenu child but it not works.

My code of showmenu()

void showMemberMenu() async {
    await showMenu(
      context: context,
      position: RelativeRect.fromLTRB(200, 150, 100, 100),
      items: [
        PopupMenuItem(
          value: 1,
          child: Text(
            "ROHIT",
            style: TextStyle(
                fontSize: 15.sp,
                fontWeight: FontWeight.bold,
                fontFamily: 'Roboto',
                color: green3),
          ),
        ),
        PopupMenuItem(
          value: 2,
          child: Text(
            "REKHA",
            style: TextStyle(
                fontSize: 15.sp,
                fontWeight: FontWeight.bold,
                fontFamily: 'Roboto',
                color: green3),
          ),
        ),
        PopupMenuItem(
          value: 3,
          child: Text(
            "DHRUV",
            style: TextStyle(
                fontSize: 15.sp,
                fontWeight: FontWeight.bold,
                fontFamily: 'Roboto',
                color: green3),
          ),
        ),
      ],
      elevation: 8.0,
    ).then((value) {
      if (value != null) print(value);
    });
  }

Please help to get out from this.

CodePudding user response：

You can use List.generate method to generate the dynamic length of the list using the existing list you get from the API response.

Below is an example of how you can achieve it.

  void showMemberMenu() async {
    final List<String> popList = ['ROHIT', 'REKHA', 'DHRUV'];
    await showMenu(
      context: context,
      position: RelativeRect.fromLTRB(200, 150, 100, 100),
      items: List.generate(
        popList.length,
        (index) => PopupMenuItem(
          value: 1,
          child: Text(
            popList[index],
            style: TextStyle(
              fontSize: 15,
              fontWeight: FontWeight.bold,
              fontFamily: 'Roboto',
            ),
          ),
        ),
      ),
      elevation: 8.0,
    ).then((value) {
      if (value != null) print(value);
    });
  }

I've added final List<String> popList = ['ROHIT', 'REKHA', 'DHRUV']; just for the testing purpose, and you can replace it with your list you get from API response.

CodePudding user response：

Try this:

call the api and put the value in PopupMenuItem

class PopupMenu {
 PopupMenu({@required this.title, @required this.onTap});

 final String title;
 final VoidCallback onTap;

 static PopupMenuButton<String> createPopup(List<PopupMenu> popupItems) {
 return PopupMenuButton<String>(
  onSelected: (value) {
    popupItems.firstWhere((e) => e.title == value).onTap();
  },
  itemBuilder: (context) => popupItems
      .map((item) => PopupMenuItem<String>(
            value: item.title,
            child: Text(
              item.title,
            ),
          ))
      .toList(),
    );
   }
 }