Dart: mapping a list (list.map)

Question

I have a list of Strings, e.g.,

var moviesTitles = ['Inception', 'Heat', 'Spider Man'];

and wanted to use moviesTitles.map to convert them to a list of Tab Widgets in Flutter.

score 236 · Accepted Answer · answered Apr 20 '18 at 12:12

236

you can use

moviesTitles.map((title) => Tab(text: title)).toList()

example:

    bottom: new TabBar(
      controller: _controller,
      isScrollable: true,
      tabs:
        moviesTitles.map((title) => Tab(text: title)).toList()
      ,
    ),

answered Apr 20 '18 at 12:12

AbdulMomen عبدالمؤمن

19,419
17
57
65

46

Why do we need `toList`? – onmyway133 Mar 12 '19 at 08:25
4

@onmyway133 because the question is about mapping a list – AbdulMomen عبدالمؤمن Mar 12 '19 at 11:07
8

@AbdulMomenعبدالمؤمن I believe the question is why is it needed in the first place. In Swift, mapping an Array returns an Array of the new result type. Why is the result of mapping a Dart List not already a list? – Michael Long Apr 18 '19 at 15:42
29

@MichaelLong becaues here, in Dart, `map` returns an `Iterable` instead of a `List` – AbdulMomen عبدالمؤمن Apr 20 '19 at 05:40
85

The `Iterable` that `map()` returns is lazy. It isn't evaluated yet, only when somebody actually iterates it. Calling `toList()`, in addition to returning an actual list, forces this evaluation. – Gábor Jul 11 '19 at 16:27
How can we use map on list object type array? final List filterOptions = [ { 'id': 1, 'type': 'deposit', 'icon': 'assets/wallet.svg', 'title': 'Deposit', }, { 'id': 2, 'type': 'deposit', 'icon': 'assets/wallet.svg', 'title': 'Salary', }, ]; – Kamlesh Jan 20 '20 at 11:52
hi bro. how can i do this with two parameters? like this: [list1,list2].map((item1,item2)=>.....).tolist() – Mehrdad May 08 '21 at 09:42
how to get index of title when using this function – Hoangdz Aug 18 '21 at 08:13
The tab widget makes the difference from my previous approach – AKinsoji Hammed Adisa Feb 13 '22 at 20:09

score 39 · Answer 2 · answered Feb 06 '20 at 17:38

39

I'm new to flutter. I found that one can also achieve it this way.

 tabs: [
    for (var title in movieTitles) Tab(text: title)
  ]

Note: It requires dart sdk version to be >= 2.3.0, see here

answered Feb 06 '20 at 17:38

CrackRead

407
4
3

this one is better understandable.. thanks – Balaji Oct 05 '22 at 11:39
It's the best way... – Sapto Sutardi Dec 01 '22 at 08:15

score 7 · Answer 3 · answered Sep 21 '19 at 09:12

7

Yes, You can do it this way too

 List<String> listTab = new List();
 map.forEach((key, val) {
  listTab.add(val);
 });

 //your widget//
 bottom: new TabBar(
  controller: _controller,
  isScrollable: true,
  tabs: listTab
  ,
),

answered Sep 21 '19 at 09:12

AlexPad

10,364
3
38
48

Matias de Andrea · Answer 4 · 2021-04-12T08:27:35.617

6

I try this same method, but with a different list with more values in the function map. My problem was to forget a return statement. This is very important :)

 bottom: new TabBar(
      controller: _controller,
      isScrollable: true,
      tabs:
        moviesTitles.map((title) {return Tab(text: title)}).toList()
      ,
    ),

edited Apr 12 '21 at 08:27

answered Aug 01 '19 at 08:20

Matias de Andrea

194
2
11

3

It's because your function is declared with ``{}`` the question is one line function – Mehrdad Shokri Apr 06 '20 at 21:15
6

Simply change it to `map((title) => Tab(text: title)).toList()` , so no return needed... – Mamrezo Apr 09 '21 at 21:08
Yes, this is the first (most voted) comment. I add this comment for code with more lines before return @Nima – Matias de Andrea Apr 12 '21 at 08:29

score 4 · Answer 5 · edited Jan 14 '23 at 10:38

4

tabs: [...data.map((title) => Text(title)).toList(), extra_widget],

tabs: data.map((title) => Text(title)).toList(),

It's working fine for me

edited Jan 14 '23 at 10:38

Community

1
1

answered Nov 04 '20 at 07:26

Azhar Ali

1,961
3
13
24

score 0 · Answer 6 · answered Aug 25 '23 at 08:39

0

small addition to the AbdulMomen عبدالمؤمن answer: for better performance you should set grawable false if list will not grow.

moviesTitles.map((title) => Tab(text: title)).toList(growable: false);

answered Aug 25 '23 at 08:39

Vladyslav Ulianytskyi

1,401
22
22

Dart: mapping a list (list.map)

6 Answers6

Linked