CODEWITHSUNDEEP
listflutterdartflutter-layout
neil_ruaro
neil_ruaro

Reputation: 506

Unable to use the .map function in Flutter

So I am following along a book about Flutter App Development where I was tasked to implement a ToDoMenuItem class and create a list in it.

      class TodoMenuItem {
      final String title;
      final Icon icon;
    
      TodoMenuItem({this.title, this.icon});
    
      List<TodoMenuItem> foodMenuList = [
        TodoMenuItem(title: 'Fast Food', icon: Icon(Icons.fastfood)),
        TodoMenuItem(title: 'Remind Me', icon: Icon(Icons.add_alarm)),
        TodoMenuItem(title: 'Flight', icon: Icon(Icons.flight)),
        TodoMenuItem(title: 'Music', icon: Icon(Icons.audiotrack)),
      ];
    }

Then I was tasked to map it to a PopUpMenuButtonWidget using an itemBuilder. Here is the class I wrote for it.

    class PopupMenuButtonWidget extends StatelessWidget
        implements PreferredSizeWidget {
      const PopupMenuButtonWidget({
        Key key,
      }) : super(key: key);
      @override
      Widget build(BuildContext context) {
        return Container(
          color: Colors.lightGreen.shade100,
          height: preferredSize.height,
          width: double.infinity,
          child: Center(
            child: PopupMenuButton<TodoMenuItem>(
              icon: Icon(Icons.view_list),
              onSelected: ((valueSelected) {
                print('valueSelected: ${valueSelected.title}');
              }),
              itemBuilder: (BuildContext context) {
                return foodMenuList.map((TodoMenuItem todoMenuItem) {
                  return PopupMenuItem<TodoMenuItem>(
                    value: todoMenuItem,
                    child: Row(
                      children: <Widget>[
                        Icon(todoMenuItem.icon.icon),
                        Padding(
                          padding: EdgeInsets.all(8.0),
                        ),
                        Text(todoMenuItem.title),
                      ],
                    ),
                  );
                }).toList();
              },
            ),
          ),
        );
      }
    
      @override // implement preferredSize
      Size get preferredSize => Size.fromHeight(75.0);
    }

However, it returns an error at this line.

    return foodMenuList.map((TodoMenuItem todoMenuItem) {

And the error says

Undefined name 'foodMenuList'.
Try correcting the name to one that is defined, or defining the name.

How can I 'map' the foodMenuList list to the widget?

Upvotes: 1

Views: 650

Answers (1)

Antoniossss
Antoniossss

Reputation: 32517

Your foodMenuList is declared in todoMenuItem class, while you try to refer to it like it would be a part of PopupMenuButtonWidget (you are doing this.foodMenuList in context of PopupMenuButtonModget)

You could create instantiate an instance of TodoMenuList in PopupMenuButtonWidget and then use it.

final TodoMenuItem _todoMenu = TodoMenuItem();

Widget build(BuildContext context) {
...
// Someplace where you need to use the list
_todoMenu.foodMenuList
...
}

Upvotes: 2

Related Questions