How can i iterate a list of objects and get their properties within a widget using flutter?

Issue

class drinkMenu extends StatelessWidget {
  int i = 0;
  @override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;
    List<products> _products = <products>[];
    
    return Scaffold(
        appBar: AppBar(
          title: Text('Bebidas.'),
          backgroundColor: Colors.brown,
        ),
        body: GridView.count(
          padding: const EdgeInsets.all(15),
          mainAxisSpacing: 10,
          crossAxisCount: 1,
          childAspectRatio: 2.4,
          children: <Widget>[
            _products.forEach((products _drink) {
              showGrid(
                  child: GestureDetector(
                      onTap: () {
                        Navigator.push(context,
                            MaterialPageRoute(builder: (context) {
                          return productosNuevos();
                        }));
                      },
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: <Widget>[
                          Text(
                            "BebidasPH",
                          ),
                          Container(
                            alignment: Alignment.bottomRight,
                            child: Image.asset(
                              "assets/images/cafesitop.png",
                              width: screenSize.width / 2.635,
                            ),
                          ),
                        ],
                      )),
                  text: '');
            })
          ],
        ));
  }
}

I’m currently developing my first-ever mobile aplication (Developed with Flutter and Dart.), my app is a food related app, which contains menus that displays the products. The problem comes when i try to make a list of objects (the product in this case) so i can easily asign and display their name/price and image on screen, what i’ve tried to do is using "forEach()" function which iterates every instance in my list and then i can apply an action, using the object’s properties and from there i (teorically) get that info and display it, but i get this error that says "This expression has a type of ‘void’ so its value can’t be used. Try checking to see if you’re using the correct API; there might be a function or call that returns void you didn’t expect. Also check type parameters and variables which might also be void."

How can i do it without using the for each function or how can i solve this ?

This is the part of the code which gives me the problem:

Solution

While you are using StatelessWidget it won’t cause any issue placing variable _product but while you like to make it StatefulWidget place it before build method.

If you look at the structure of forEach it’s return void

void forEach(
   void action(
     E element
   )
)

For your case, you need to map the list and to return on Column use spread operator... . It will be like

   Column(
        children: [
          ..._product.map((e) {
            //return your widget
            return Text("");
          }).toList(),
        ],
      ),

for your snippet

children: <Widget>[
            ..._products.map((_drink) {
             return showGrid(
                  child: GestureDetector(
                      onTap: () {
                        Navigator.push(context,
                            MaterialPageRoute(builder: (context) {
                          return productosNuevos();
                        }));
                      },
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: <Widget>[
                          Text(
                            "BebidasPH",
                          ),
                          Container(
                            alignment: Alignment.bottomRight,
                            child: Image.asset(
                              "assets/images/cafesitop.png",
                              width: screenSize.width / 2.635,
                            ),
                          ),
                        ],
                      )),
                  text: '');
            }).toList(),
          ],

More about spread-operator on So and Map

Answered By – Yeasin Sheikh

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)