Flutter iterate through List with access to index

Question

I tried some other solutions to this like using asMap() and forEach but kept getting different errors. Like it was saying the return type of my ChartBar isn't a 'MapEntry', as defined by anonymous closure, or The expression here has a type of 'void', and therefore cannot be used.

Row(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    crossAxisAlignment: CrossAxisAlignment.end,
    children: myList.map((data) {
      return ChartBar(
          ///etc
    }).toList(),
  )

I want the index as well.

@mirkancal That's the question I was referring to, the solutions gave me the errors I described above. — Hasen, Aug 23 '19 at 15:45
Can you try `myList.asMap().map((MapEntry data) => data.value).toList()` ? — mirkancal, Aug 23 '19 at 15:47
@mirkancal As described in the question, I get the error `ChartBar isn't a 'MapEntry'` — Hasen, Aug 23 '19 at 15:49
@mirkancal It doesn't make any difference, with a text widget as `Text('text')` it throws the error `The return type 'Text' isn't a 'MapEntry'` as well. — Hasen, Aug 23 '19 at 16:04
@Hasen No, your code above does not use `.asMap().map(...)`. — jamesdlin, Aug 23 '19 at 16:21
Also, please pay attention whom you're replying to. You seem to be directing all of your replies to mirkancal when you're answering other people's questions. — jamesdlin, Aug 23 '19 at 16:22
@jamesdlin Obviously I meant that part was changed. Do you have a working example? — Hasen, Aug 23 '19 at 16:23
And again, *exact* code matters so that we can be sure that you're not making a typo somewhere. — jamesdlin, Aug 23 '19 at 16:23
@jamesdlin What's the exact code you want me to try? His code doesn't even include a widget. — Hasen, Aug 23 '19 at 16:26

jamesdlin · Accepted Answer · 2019-08-23T16:44:44.193

9

mirkancal's suggestion didn't work because Map.map returns another Map (and therefore the enumeration callback you pass it is expected to return a MapEntry).

You instead need to use Map.entries so that you can use Iterable.map instead to construct a List:

Row(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    crossAxisAlignment: CrossAxisAlignment.end,
    children: myList.asMap().entries.map((MapEntry entry) {
      return ChartBar(entry.key, entry.value);
    }),
  )

You alternatively can use Dart's new collection-for construct:

Row(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    crossAxisAlignment: CrossAxisAlignment.end,
    children: [for (MapEntry entry in myList.asMap().entries)
      ChartBar(entry.key, entry.value)
    ],
  )

In the above, entry.key will be the index, and entry.value will be the original value in myList.

edited Aug 23 '19 at 16:44

answered Aug 23 '19 at 16:31

jamesdlin

81,374
13
159
204

With this I get the error `The type 'Map' used in the 'for' loop must implement Iterable.` or `The type 'Map' used in the 'for' loop must implement Iterable.` with a different List. – Hasen Aug 23 '19 at 16:35
@Hasen Oops, I forgot to add `.entries`. I've updated my answer. – jamesdlin Aug 23 '19 at 16:36
It's kind of odd code to me, why is it all contained in square brackets? – Hasen Aug 23 '19 at 16:37
@Hasen I've updated my answer with a better explanation. – jamesdlin Aug 23 '19 at 16:43
I guess it's the equivalent of the `toList()` with a map, you're constructing a List inside the square brackets. – Hasen Aug 23 '19 at 16:43
Ok great, thanks for your help. I really like this solution. – Hasen Aug 23 '19 at 16:44
Muchas gracias!! – Ryan Godlonton-Shaw Jan 15 '20 at 16:36
Please see these answers https://stackoverflow.com/a/59447850/56974 and https://stackoverflow.com/a/68357576/56974 – Michael Ekoka Jul 09 '22 at 05:57

score -1 · Answer 2 · answered Aug 23 '19 at 15:51

-1

For the index you could use indexOf(value) function from the list to get index value. For example:

List list = List.generate(3, (int index) => index * index); // [0, 1, 4]

list.indexOf(4) // returns 2

As for your other issue, I'd need to see more code to see how you populate myList. I would suggest this approach (if it fits) to render your Row children. Use a function to return that list, for example:

buildList() {
 List<Widget> list = List<Widget>();

 chartBars.forEach((chart) => { //chartBars list with info
  // add your ChartBar widget to the list with appropiate info
  list.add(ChartBar(someProperty: chart.property));
 });
 return list;
}

Then on your Row widget just call that function when you build it's children:

Row(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    crossAxisAlignment: CrossAxisAlignment.end,
    children: buildList()      
)

answered Aug 23 '19 at 15:51

Rodolfo Franco

431
3
11

Splitting widgets to methods is an antipattern though. https://iirokrankka.com/2018/12/11/splitting-widgets-to-methods-performance-antipattern/ – mirkancal Aug 23 '19 at 15:52
Is there no simpler way to do it? There's no simple tweak to my existing code just to get the index to display? – Hasen Aug 23 '19 at 15:52
@mirkancal thanks for the heads up, I'm relatively new to Flutter and may not be aware of best practices, @Hasen Have you tried using `myList.indexOf(data)` to show the index? – Rodolfo Franco Aug 23 '19 at 15:59
1

Using `indexOf()` would be rather inefficient, making what should be an O(n) operation instead O(n^2). – jamesdlin Aug 23 '19 at 16:15
@mirkancal Yes `indexOf()` works but like it doesn't seem like the most eloquent way to do it. – Hasen Aug 23 '19 at 16:18
This will not work if there are duplicate items in the list. – tmath Dec 23 '22 at 12:15

Flutter iterate through List with access to index

2 Answers2