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

Question

I need to make a popup menu kind of button. Is there any way to make a pop up menu floating action button,this is my desired view

Answer 1

You can use flutter speed dial package. Visit - https://pub.dev/packages/flutter_speed_dial . And here is a youtube video - https://www.youtube.com/watch?v=1FmATI4rOBc

Answer 2

Your answer is PopupMenuItem class, which will help you get the desirable result.

PLEASE NOTE: I have just demonstrated how to use, and with what code, you achieve the result. You can anyways, play with it, and get your desirable result.

CODE SNIPPET FOR CREATING A POPUP MENU ITEM

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

CODE FOR REFERENCE

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

The above will give you this result:

PRO-TIP

You can play around with Offset() to decide the position of your PopupMenuItems