如何在颤动中制作带有弹出菜单的浮动操作按钮？

Posted 2023-02-23

【中文标题】如何在颤动中制作带有弹出菜单的浮动操作按钮？

【英文标题】：How to make a Floating Action Button with a popup menu in flutter?

【发布时间】：2020-11-09 20:07:28

【问题描述】：

我需要制作一个弹出菜单类型的按钮。 有什么办法可以做一个弹出菜单浮动操作按钮，这是我的desired view

【参考方案1】：

您可以使用颤振快速拨号包。 访问-https://pub.dev/packages/flutter_speed_dial。 这是一个 youtube 视频 - https://www.youtube.com/watch?v=1FmATI4rOBc

【参考方案2】：

您的答案是PopupMenuItem class，这将帮助您获得理想的结果。

请注意：我刚刚演示了如何使用，以及使用什么代码，您可以获得结果。无论如何，您都可以使用它，并获得您想要的结果。

用于创建弹出菜单项的代码片段

PopupMenuButton<Choice>(
    itemBuilder: (context) => [
        PopupMenuItem()
    ],
    icon: Icon(),
    offset: Offset()
)

参考代码

class _MyHomePageState extends State<MyHomePage> 
  
  Widget _offsetPopup() => PopupMenuButton<int>(
    itemBuilder: (context) => [
          PopupMenuItem(
            value: 1,
            child: Text(
              "Flutter Open",
              style: TextStyle(
                  color: Colors.black, fontWeight: FontWeight.w700),
            ),
          ),
          PopupMenuItem(
            value: 2,
            child: Text(
              "Flutter Tutorial",
              style: TextStyle(
                  color: Colors.black, fontWeight: FontWeight.w700),
            ),
          ),
        ],
    icon: Container(
      height: double.infinity,
      width: double.infinity,
      decoration: ShapeDecoration(
        color: Colors.blue,
        shape: StadiumBorder(
          side: BorderSide(color: Colors.white, width: 2),
        )
      ),
      //child: Icon(Icons.menu, color: Colors.white), <-- You can give your icon here
    )
  );

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        padding: EdgeInsets.only(right: 10.0, bottom: 10.0),
        child: Align(
          alignment: Alignment.bottomRight,
          child: Container(
            height: 80.0,
            width: 80.0,
            child: _offsetPopup()
          )
        )
      )
    );
  

上面会给你这个结果：

专业提示

您可以使用Offset() 来决定 PopupMenuItems 的位置

【讨论】：

乐于帮助@AshokRout :)