How To Use The map() Function In Dart

How To Use The map() Function In Dart

3 min read · 466 words · Shared April 28, 2021 by

Article Summary: Dart and Flutter doesn't return data when I use .map() function on array list.

The Problem

Recently, I was building a Flutter app and I needed to map over an array of users when a user logged in and check if their username, password, and security question answer matched what was in the database (the userArray). I tried to do something like this:

var userArray = ['User 1', 'User 2', 'User 3'];

userArray
    .map((user) => {
            if (user == 'User 1')
            {
                // log user in
            } else {
                    // don't log user in
                }
            });

This code logs the user in if they are user 1. This looks like it should work, right? Unfortunately, it doesn't. It will not break either. Instead, nothing will happen. This makes it hard to debug.

The Solution

The simple solution is to add .toList() to the end of the map statement.

var userArray = ['User 1', 'User 2', 'User 3'];

userArray
    .map((user) => {
            if (user == 'User 1')
            {
                // log user in
            } else {
                    // don't log user in
                }
            }).toList(); // add .toList() here!

Why This Works

Unlike in JavaScript, in Dart when you .map() over an object, the Iterable that is returned is lazy. This means it is not evaluated by calling .map(). To evaluate it, we need to call .toList(). You can read more about this here.

If you want to quickly see this in action, open up DartPad and paste in the code below (with added print statements) with and without .toList().

void main() {
  var userArray = ['User 1', 'User 2', 'User 3'];

userArray
    .map((user) => {
            if (user == 'User 1')
            {
                print('logging user 1 in!')
            } else {
                    print('Not user 1, can\'t log in!')
                }
            }).toList(); // Remove .toList() to see no output!
}

From The Flutter Docs


.map()

Returns a new lazy Iterable with elements that are created by calling f on each element of this Iterable in iteration order.

This method returns a view of the mapped elements. As long as the returned Iterable is not iterated over, the supplied function f will not be invoked. The transformed elements will not be cached. Iterating multiple times over the returned Iterable will invoke the supplied function f multiple times on the same element.

Methods on the returned iterable are allowed to omit calling f on any element where the result isn't needed. For example, elementAt may call f only once.

.toList()

Creates a List containing the elements of this Iterable.

The elements are in iteration order. The list is fixed-length if growable is false.

Edit on GitHub

Related Tags

    #dart

Related Posts

Create A Flutter Bottom Navigation Bar · July 16, 2021
How To Use Firebase As Flutter's Backend · May 3, 2021

On This Page

The Problem

The Solution

Why This Works

From The Flutter Docs

.map()

.toList()

View Related Posts

July 16, 2021

flutter.png

Create A Flutter Bottom Navigation Bar

May 3, 2021

firebase.png

How To Use Firebase As Flutter's Backend


Loading author data...

    Legal

    Terms

    Disclaimer

    Privacy Policy


    Carlson Technologies Logo© Copyright 2021 - 2024, Carlson Technologies LLC. All Rights Reserved.