如何在 flutter 中创建带有动态数据的 PopUpMenu？

Question

我想用从 API 响应中获得的动态数据显示 PopupMenu。我尝试在 PopupMenu 子项中使用 listview.builder，但它不起作用。

我的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);
    });
  }

请帮忙摆脱困境。

Answer 1

试试这个：

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(),
    );
   }
 }

Answer 2

您可以使用 List.generate 方法使用从 API 响应中获得的现有列表生成列表的动态长度。

下面是如何实现它的示例。

  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.

Answer 3

你可以尝试这样做：

https://dartpad.dev/?id=a3f9002a37cbacc2cfae46174cbd2eba

您可以添加任何状态管理来替换 FutureBuilder，但这是合乎逻辑的方法。

希望对您有所帮助。

如何在 flutter 中创建带有动态数据的 PopUpMenu？

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

android

flutter

dart

popup