Flutter 使用 Text 和 Icon 而不是单个 Icon 创建 PopupMenuButton

我正在创建一个 PopUpMenuButton 让用户选择应用程序的语言,并且我想显示当前所选语言的文本作为打开菜单的按钮。
所以是这样的:
enter image description here
我目前只有一个图标作为按钮来打开带有工具提示的菜单:
enter image description here

BlocBuilder<LanguageBloc, LanguageState>(builder: (context, state) {
  return PopupMenuButton(
    offset: const Offset(0, 40),
    elevation: 2,
    iconSize: 18,
    icon: Icon(
      Icons.g_translate,
      color: Theme.of(context).primaryColor,
    ),
    itemBuilder: (BuildContext context) => [
      PopupMenuItem(
          value: "en",
          child: Row(children: [
            Text("English",
                style: Theme.of(context).textTheme.bodyText2),
            const SizedBox(width: 15),
            Icon(
              Icons.check_circle,
              size: 18,
              color: Colors.black.withOpacity(0.60),
            )
          ])),
      PopupMenuItem(
          value: "de",
          child: Text("Deutsch",
              style: Theme.of(context).textTheme.bodyText2)),
    ],
  );
})

我可以在图标前放置一个文本,但单击文本不会打开 Popupenu ,因此我需要一个允许在单击文本或图标时打开菜单的实现。

stack overflow Flutter create PopupMenuButton with a Text and an Icon instead of single Icon
原文答案
author avatar

接受的答案

你可以使用 TextButton.icon 作为孩子:

 PopupMenuButton(
    offset: const Offset(0, 40),
    elevation: 2,
    child: TextButton.icon(
                label: Text(
                 'Your label'
                  ),
                ),
                icon: Icon(
                 Icons.g_translate,
                 color: Theme.of(context).primaryColor,
                   ),
                onPressed: () {
                //do logic, or keep it empty
                },
              ),

答案:

作者头像

我设法创建了一个将 PopupMenu 集成到 TextButon.icon 中的“漂亮”按钮

    Tooltip(
        message: "Change main color",
        child: TextButton.icon(
            icon: const Icon(Icons.color_lens),
            label: const Text("Color"),
            onPressed: () {
              showMenu(
                  context: context,
                  position: const RelativeRect.fromLTRB(100, 100, 100, 100),
                  items: List.generate(colorOptions.length, (index) {
                    return PopupMenuItem(
                        value: index,
                        onTap: () => handleTap(index),
                        child: Wrap(
                          children: [
                            Padding(
                              padding: const EdgeInsets.only(left: 10),
                              child: Icon(
                                Icons.color_lens_outlined,
                                color: colorOptions[index],
                              ),
                            ),
                            Padding(padding: const EdgeInsets.only(left: 20), child: Text(colorText[index]))
                          ],
                        ));
                  }));
            }),
      )