Flutter - PopupMenuButton - add an item manually after adding items from a list

Question

I have a PopupMenuButton which displays items from a List.

List<Subject> subjects = [
  Subject(
    name: 'English',
    iconFile: 'english.jpg',
  ),
  Subject(
    name: 'Mathematics',
    iconFile: 'maths.jpg',
  ),
  Subject(
    name: 'Business Studies',
    iconFile: 'business.jpg',
  ),
];

Below is PopupMenuButton code where the list is used to generate the menu items:

child: PopupMenuButton<Subject>(
              color: Color.fromARGB(255, 95, 115, 231),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10)),
              onSelected: _changeSubject,
              itemBuilder: (BuildContext context) {
                return subjects.map((Subject subject) {
                  return PopupMenuItem<Subject>(
                    value: subject,
                    child: Text(subject.name),
                  );
                }).toList();
              },
            ),

This works as intended. Now I want to add another item "Sign Out" below "Business Studies" (as in this image link -> PopupMenuButton) and a divider between them. I don't want to add "Sign Out" to the subjects list. Is it possible to add another PopupMenuItem manually after all the generated items?

score 1 · Answer 1 · answered Jul 14 '22 at 07:16

`

Subject signOutSubject = Subject(
        name: 'Sign Out',
        iconFile: 'signOut.jpg',
    );

add to the end of the toList() function

 toList()..add(PopupMenuItem<Subject>(
                        value: signOutSubject,
                        child: Text(signOutSubject.name),
                      );)

`

Hamid Musayev · Accepted Answer · 2022-07-14T07:37:14.897

0

You can do like this. result image

return PopupMenuButton(
      color: const Color.fromARGB(255, 95, 115, 231),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      itemBuilder: (context) => <PopupMenuEntry>[
        ...subjects
            .map((s) => PopupMenuItem(value: s, child: Text(s.name)))
            .toList(),
        const PopupMenuDivider(),
        PopupMenuItem(
          onTap: () {},
          value: "LogOut",
          child: const Text('LogOut'),
        ),
      ],
    );

edited Jul 14 '22 at 07:37

answered Jul 14 '22 at 07:36

Hamid Musayev

482
1
9

Your solution works the way I wanted UI-wise. But I can't have `onSelected: _changeSubject,` call. – thampister Jul 14 '22 at 07:59
...subjects .map((s) => PopupMenuItem( value: s, child: Text(s.name), onTap: _changeSubject(s), )) .toList(), Just change like this – Hamid Musayev Jul 14 '22 at 08:16

Flutter - PopupMenuButton - add an item manually after adding items from a list

2 Answers2