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

Question

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

Answer 1

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

Answer 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

的位置

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

How to make a Floating Action Button with a popup menu in flutter?

flutter

flutter-dependencies

flutter-layout

flutter-animation