156

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.

6 Answers 6

239

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()
      ,
    ),
9
  • 46
    Why do we need toList?
    – onmyway133
    Mar 12, 2019 at 8:25
  • 4
    @onmyway133 because the question is about mapping a list Mar 12, 2019 at 11:07
  • 8
    @AbdulMomenعبدالمؤمن I believe the question is why is it needed in the first place. In Swift, mapping an Array<E> returns an Array<R> of the new result type. Why is the result of mapping a Dart List<E> not already a list? Apr 18, 2019 at 15:42
  • 29
    @MichaelLong becaues here, in Dart, map<T> returns an Iterable<T> instead of a List<T> Apr 20, 2019 at 5:40
  • 86
    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, 2019 at 16:27
41

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

2
  • this one is better understandable.. thanks
    – Balaji
    Oct 5, 2022 at 11:39
  • It's the best way... Dec 1, 2022 at 8:15
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
  ,
),
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()
      ,
    ),
3
  • 3
    It's because your function is declared with {} the question is one line function Apr 6, 2020 at 21:15
  • 6
    Simply change it to map((title) => Tab(text: title)).toList() , so no return needed...
    – Mamrezo
    Apr 9, 2021 at 21:08
  • Yes, this is the first (most voted) comment. I add this comment for code with more lines before return @Nima Apr 12, 2021 at 8:29
4
tabs: [...data.map((title) => Text(title)).toList(), extra_widget],

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

It's working fine for me

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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.