May 27, 2020

Popup menu in flutter

By Mohit Agrawal

Learn how to use popup menu in flutter with easy steps

Introduction

Hello πŸ‘‹ , In this small tutorial I will show you how to use the popup menu in the flutter with some easy implementation guide. This is going to be a tutorial for beginners. In this article you will learn how to use PopupMenuButton, GridView.count, and PopupMenuItem widgets. Enough talking 😴let’s start with some coding.

Our final output will be this

popupmenu
Final output

Implementation

First I will create a grid view layout and then two views in it. After that, we will see how to put a popup menu inside a view. Create a new flutter project in Android Studio. Check this for the flutter installation guide in the android studio. Remove the default body widgets of the scaffold and write myGridView().

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: myGridView()
    );
  }
}

The myGridView() is a function that returns a grid view widget. Now let’s design our grid view.

Widget myGridView() {
  return GridView.count(crossAxisCount: 2,
    padding: EdgeInsets.all(15),
    crossAxisSpacing: 15,
    mainAxisSpacing: 5,
    children: <Widget>[
      Container(
        color: Colors.amberAccent,
        child: Stack(
          children: <Widget>[
            Positioned(
              child: myPopMenu(),
              right: 0,
            )
          ],
        )
      ),
      Container(
          color: Colors.deepOrangeAccent,
          child: Stack(
            children: <Widget>[
              Positioned(
                child: myPopMenu(),
                right: 0,
              )
            ],
          )
      ),
    ],
  );
}

As you can see that I am using two container widgets, one is for yellow color view and another one is for orange color view. Then I have set myPopMenu() as a child for both views. Now We will design a function that will return the popup menu widget.

Widget myPopMenu() {
  return PopupMenuButton(
      onSelected: (value) {
        Fluttertoast.showToast(
            msg: "You have selected " + value.toString(),
            toastLength: Toast.LENGTH_SHORT,
            gravity: ToastGravity.BOTTOM,
            timeInSecForIosWeb: 1,
            backgroundColor: Colors.black,
            textColor: Colors.white,
            fontSize: 16.0
        );
      },
      itemBuilder: (context) => [
        PopupMenuItem(
          value: 1,
            child: Row(
            children: <Widget>[
            Padding(
              padding: const EdgeInsets.fromLTRB(2, 2, 8, 2),
              child: Icon(Icons.print),
            ),
            Text('Print')
      ],
    )),
        PopupMenuItem(
            value: 2,
            child: Row(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.fromLTRB(2, 2, 8, 2),
              child: Icon(Icons.share),
            ),
            Text('Share')
          ],
        )),
        PopupMenuItem(
            value: 3,
            child: Row(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.fromLTRB(2, 2, 8, 2),
              child: Icon(Icons.add_circle),
            ),
            Text('Add')
          ],
        )),
      ]);
}

When you click on any popup menu item then onSelected(value) will be called. So you can write your activation code in this function. As you can see I am showing a simple Toast message. Check how to implement toast notification in the flutter app. This is the simple tutorial for the popup menu in the flutter.

Help me to grow our YouTube Channel: More tutorials like this

I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below πŸ‘.
Thanks for reading!!!