Pop Up Menu in Flutter, E Com App 10

As a Flutter developer our final goal is to give a better user experience. Right? For that we need a pop up menu. 

As the name suggests this button will pop up some menus. 

Firstly, why do we need it?

Secondly we will discuss how we can manage the local state to make this happen.

Finally we will see how it works in the E Commerce app that we’ve been building step-by-step.

First thing first. Why do we need a pop up menu?

For example, a user logs in and makes some products their favorite. As a result, it will give the users a chance to see favorite items and all the other product items. 

Let’s see how it works.

Before seeing the screenshots, let’s see the code of the products overview screen. Here we have used the pop up menu button on the AppBar.

import 'package:flutter/material.dart';

import '../controllers/products_grid.dart';

enum FilterOptions {
  favorites,
  all,
}

class ProductsOverviewScreen extends StatefulWidget {
  const ProductsOverviewScreen({Key? key}) : super(key: key);
  @override
  State<ProductsOverviewScreen> createState() => _ProductsOverviewScreenState();
}

class _ProductsOverviewScreenState extends State<ProductsOverviewScreen> {
  var _showOnlyFavorites = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('E-Commerce App'),
        actions: <Widget>[
          PopupMenuButton(
            onSelected: (FilterOptions selectedValue) {
              setState(() {
                if (selectedValue == FilterOptions.favorites) {
                  _showOnlyFavorites = true;
                } else {
                  _showOnlyFavorites = false;
                }
              });
            },
            icon: const Icon(
              Icons.more_vert,
            ),
            itemBuilder: (_) => [
              const PopupMenuItem(
                value: FilterOptions.favorites,
                child: Text('Only Favorites'),
              ),
              const PopupMenuItem(
                value: FilterOptions.all,
                child: Text('Show All'),
              ),
            ],
          ),
        ],
      ),
      body: ProductsGrid(_showOnlyFavorites),
    );
  }
}

At the same time, we have changed our model class Products to add a new method.

List<Product> get favoriteItems {
    return _items.where((productItem) => productItem.isFavorite).toList();
  }

There are two questions that emerge from the above change.

Firstly, why have we changed the products overview screen to a Stateful Widget? 

Secondly, why does the new method in the model class Products return a list?

Well, we will explain the first question in our next discussion. However, the answer to the second question is simple. When users make some items their favorite, we will show those items as a list.

Let’s first see how this pop up menu item button looks like.

Pop Up Menu in Flutter has some properties

It displays a menu. So that users can choose any one of them. 

Let’s see how it looks.

As we see in the above screenshot, we find that the pop up menu shows options to choose any page.

As a result, when the user taps any one option, it calls onSelected method that expects some change of state.

PopupMenuButton(
            onSelected: (FilterOptions selectedValue) {
              setState(() {
                if (selectedValue == FilterOptions.favorites) {
                  _showOnlyFavorites = true;
                } else {
                  _showOnlyFavorites = false;
                }
              });
            },
...

When the user selects any item, the widget dismisses itself. 

In addition it passes the value that the user selects.

It has also an item builder property that expects a list of widgets.

itemBuilder: (_) => [
              const PopupMenuItem(
                value: FilterOptions.favorites,
                child: Text('Only Favorites'),
              ),
              const PopupMenuItem(
                value: FilterOptions.all,
                child: Text('Show All'),
              ),
            ],
...

For example, a user still has not tapped any item as favorite.

In that case, the show favorite icon of pop up menu button will display a blank page.

On the contrary if the user has already tapped some items favorite, it will show only the favorite items on the page.

But, remember before that the user has tapped those items in particular.

Otherwise, it didn’t show them.

The mechanism is simple.

However, here we have managed the State locally.

How have we done that?

We will discuss it in the next article.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Python and Data Science

Twitter