the element type 'List<widget>' can't be assigned to the list type 'Widget'

Question

I am trying to add data using for loop in gridview but it is showing some error. Here is my code for component

return new GridView.count(
    crossAxisCount: 2,
    padding: const EdgeInsets.all(10.0),
    crossAxisSpacing: 10.0,
    mainAxisSpacing: 10.0,
    children: <Widget>[getList()],
);

getList() code

List<Widget> getList() {
  List<Widget> childs = [];
  for (var i = 0; i < 10; i++) {
    childs.add(new ListItem('abcd ' + $i));
  }
  return childs;
}

But it is showing compile time error.

The element type 'List<widget>' can't be assigned to the list type 'Widget'

Solution 1

Here you are wrapping a list as list

children: <Widget>[getList()],

This should rather be

children: getList(),

Solution 2

Just use spread operator:

return new GridView.count(
    crossAxisCount: 2,
    padding: const EdgeInsets.all(10.0),
    crossAxisSpacing: 10.0,
    mainAxisSpacing: 10.0,
    children: <Widget>[...getList()],
);

Solution 3

Using the spread operator is one way of solving this issue. But there is also another one that involves the use of toList() method.

children property requires list of Widgets. However, in your case, it becomes the following:

return new GridView.count(
    crossAxisCount: 2,
    padding: const EdgeInsets.all(10.0),
    crossAxisSpacing: 10.0,
    mainAxisSpacing: 10.0,
    children: [
      [
        ListItem('abcd 0'),
        ListItem('abcd 1'),
        ...
      ]
    ],
);

Therefore,

Solution 1

the wrapping should be children: getList(),

Solution 2 (spread operator)

children: <Widget>[...getList()],

As a side note, you might encounter this issue when trying to use something like a map() method. In that case, the usage of toList() method comes in handy. For example,

children: someListOfObjects.map((el) => Text(el)).toList(),

Solution 4

There are two methods I found working.

Method 1 - Simple

This method is supported in the latest version of flutter

var list = ["one", "two", "three", "four"]; 
child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
          for(var item in list ) Text(item)
      ],
),

Method 2 - A bit Complex

Tested in Flutter 1.12.13+hotfix.7 and Dart 2.7.0, we can iterate over the list of objects as follows:

Iterate over the list of objects

...data.map((f) => paragraph(f.title, f.description)).toList(),

Custom widget

Column paragraph(String title, String description) {
  return new Column(
    children: <Widget>[
      Container(
        child: Text(title),
      ),
      Container(
        child: Text(description),
      ),
    ],
  );
}

Data: List of objects

List<AboutUsData> data = [
    new AboutUsData(
      title: 'Our Vision',
      description:
          'OUR VISION',
    ),
    new AboutUsData(
      title: 'Our Mission',
      description:
          'OUR MISSION',
    ),
    new AboutUsData(
      title: 'Our Values',
      description:
          'As we grow as a company',
    ),
  ];

Solution 5

Since the answer was not satisfactory for me, so I found another solution.

Flutter gives you the possibility to write conditions on a single line also in the graphic, so you can insert a cycle on a single line and then insert the other different widgets. This is a practical example in response to the main question:

 Column(
    children: <Widget>
      [
        for (int i = 0;
        i < workouts.series.length;
        i++)
          "//CREATE N YOUR WIDGETS//",
          new Text(
          "${workouts.series.length} x ${exerciseWorkout.repsToDo} ",
          style: TextStyle(
          color: Colors.black87,
          fontSize: 16,
          fontWeight: FontWeight.bold),
          )
      ],
     )

View more solutions

Comments

[Dani]

How can I get the index from that .map?

[WasiF]

for now you can manually count the number of iterations by some variable, let say count. set count = 0, and then add count+=1 based on each iteration.

[Nadeem Shaikh]

Thanks..It worked. But could you please explain what happens with a spread separator?

[Alexufo]

I test it. Only first widget will be iterated by loop. Other will be just added after