Populate a widget with a List<Widgets> function from a pre-populated List - Flutter

Question

The idea behind my code is to populate a Column widget with dynamic data I get from a list of objects I use a List>> that's essentially just a list of objects.

My List :

List<List<Map<String, String>>> listCardsAll = [
  [
    {
      "cardCate": "AMEX",
      "cardDesc": "American Platinum 6",
      "cardImg":
          "images/AMEX/American-Express®-Green-Card-Earn-Rewards-Points.png"
    }
  ],
  [
    {
      "cardCate": "AMEX",
      "cardDesc": "American Platinum 5",
      "cardImg":
          "images/AMEX/American-Express®-Green-Card-Earn-Rewards-Points.png"
    }
  ],
];

Then I call a function within a column that returns a Widget(I want to return a List but it gives an error)

Widget:

  Column(
      children: <Widget>[
        Row(
          children: <Widget>[generateCardsALL()],
        )
      ],
    )

I Use a for-loop then in the function a make a widget with that dynamic data but it only returns one widget rather than the Collection that i was hoping for.

my Function :

Widget generateCardsALL() {
  var count = 0;
  for (var item in listCardsAll) {
    count++;
    if (count <= 2) {
      return ReusableCards(
        cardName: item[0]["cardDesc"],
        cardLink: item[0]["cardImg"],
        cardRowNum: count,
      );
    } else {
      count = 0;
      return ReusableCards(
        cardName: item[0]["cardDesc"],
        cardLink: item[0]["cardImg"],
        cardRowNum: 3,
      );
    }
  }
}

(The cardRowNum is only to see when its 3 cards next to each other that it can generate a new row)

This is the ReusableCards

ReusableCards:

class ReusableCards extends StatelessWidget {
  final String cardLink;
  final int cardRowNum;
  final String cardName;
  ReusableCards(
      {@required this.cardLink,
      @required this.cardRowNum,
      @required this.cardName});

  @override
  Widget build(BuildContext context) {
    // addToListcards(cardLink);
    print("Inserted");
    return (cardRowNum == 1 || cardRowNum == 2
        ? GestureDetector(
            onDoubleTap: () {},
            child: Padding(
              padding: EdgeInsets.fromLTRB(0, 15, 15, 20),
              child: Container(
                width: MediaQuery.of(context).size.width * 0.24,
                child: SizedBox(
                  child: Column(
                    children: <Widget>[
                      Image.asset(cardLink, fit: BoxFit.fill),
                      Text(cardName)
                    ],
                  ),
                ),
              ),
            ),
          )
        : cardRowNum == 3
            ? Padding(
                padding: EdgeInsets.fromLTRB(0, 15, 0, 20),
                child: Container(
                  width: MediaQuery.of(context).size.width * 0.24,
                  child: SizedBox(
                    child: Column(
                      children: <Widget>[
                        Image.asset(cardLink, fit: BoxFit.fill),
                        Text("" + cardRowNum.toString())
                      ],
                    ),
                  ),
                ),
              )
            : SizedBox());
  }
}

if I want to make it a List rather then just a widget it breaks. Can someone please help me with this dilemma

Answer 1

I think the problem is that inside of the function generateCardsALL. You don't return an array of Widgets, you should change to this.

List<Widget> generateCardsALL() {
  var count = 0;
  List<Widget> widgets;
  for (var item in listCardsAll) {
    count++;
    if (count <= 2) {
      widgets.add(ReusableCards(
        cardName: item[0]["cardDesc"],
        cardLink: item[0]["cardImg"],
        cardRowNum: count,
      ));
    } else {
      count = 0;
      widgets.add(ReusableCards(
        cardName: item[0]["cardDesc"],
        cardLink: item[0]["cardImg"],
        cardRowNum: 3,
      ));
    }
  }
  return widgets;
}

Answer 2

Try using map for iterating through the list and getting a list of widgets,

Example:

Column(
      children: listCardsAll.map((oneCard){ 
                      return Container(
                                child: Text(oneCard.cardDesc)
                       );
                 }).toList(),
)