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.
asked Apr 20, 2018 at 12:10
AbdulMomen عبدالمؤمن
22.8k18 gold badges62 silver badges66 bronze badges
Add a comment
|
7 Answers
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, 2018 at 12:12
AbdulMomen عبدالمؤمن
22.8k18 gold badges62 silver badges66 bronze badges
9 Comments
onmyway133
Why do we need
toList?AbdulMomen عبدالمؤمن
@onmyway133 because the question is about mapping a list
Michael Long
@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?
AbdulMomen عبدالمؤمن
@MichaelLong becaues here, in Dart,
map<T> returns an Iterable<T> instead of a List<T>
Gábor
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. |
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
1 Comment
Sapto Sutardi
It's the best way...
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
,
),
Comments
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 Comments
Mehrdad Shokri
It's because your function is declared with
{} the question is one line function
Mamrezo
Simply change it to
map((title) => Tab(text: title)).toList() , so no return needed...
Matias de Andrea
Yes, this is the first (most voted) comment. I add this comment for code with more lines before return @Nima
tabs: [...data.map((title) => Text(title)).toList(), extra_widget],
tabs: data.map((title) => Text(title)).toList(),
It's working fine for me
Comments
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);
Comments
Addition to the original answer:
Starting from Dart 2.7, you can now declare extensions to existing classes.
That means that now one can do like so:
extension ListExtension<E> on List<E> {
List<T> mapAsList<T>(T Function(E e) toElement) =>
List<T>.generate(length, (index) => toElement(this[index]));
}
And now this code:
List<int> integerList = [1, 2, 3];
final stringList = integerList.mapAsList((e) => 'Number: $e');
print(stringList);
Will output this, without the need to call .toList() at the end:
[Number: 1, Number: 2, Number: 3]
