How To Easily Use ForEach Loop In Flutter

foreach loop in flutter

In this Flutter post, we will be practically understanding how to use forEach loop in Flutter. An easy Flutter example with step by step explanation will be provided to better understand the usage and customization of forEach loop in Flutter. So why waste time? Let’s both of us jump right into implementing forEach loop it in our Flutter app.

What is ForEach Loop In Flutter?

As the name suggests, it is a loop(repetition). It can be used to take items from the list. It may look a bit complex but I am sure after reading this complete post, you will easily implement it in your Flutter app. I will be using multiple examples to demonstrate how you can use forEach loop in Flutter. Let’s start understanding it using practical Flutter examples.

Implementing ForEach Loop In Flutter(Multiple Examples)

ForEach Loop In Flutter

We will be using forEach loop for list of strings, then we will be using it for a list of maps to give you a proper understanding of how to use forEach loop in Flutter. Finally a nested list of maps will also be used for more detailed understanding. See the below examples:

Example 1: ForEach Loop In Flutter List Of Strings

For that, we will first define a list of strings. See below code:

List<String> listOfColorNames = ['White', 'Red', 'Green', 'Purple', 'Blue'];
You can see that we now have a list of color names.
Let’s now print all the color names using forEach loop. See the below code:
listOfColorNames.forEach((value){ print(value); });

Output:

White
Red
Green
Purple
Blue
You can see that the output shows all the items of the list. In the above code, you can see that we have used listOfColorsNames.forEach, you can use forEach like this. When forEach runs, then it will first take the first item of list and pass it value to the value parameter as seen in the above code. We can print or do other actions with this value, then it will take the next value of list, then third and so on.

Example 2: ForEach Loop In Flutter List Of Maps

Let’s now see a more complex example of the usage of forEach loop in Flutter. We will first create a list of maps. See below:

 List<Map<String,dynamic>> colorDetails=[
    {
      'name':'Red',
      'id': 34
    },
    {
      'name':'Green',
      'id': 47
    },
    {
      'name':'Blue',
      'id': 95
    },
];

We now have a list of maps. We have two details, first one is name of color and the second one is id.

Let’s now see how to take both the name and id of color using the forEach loop. See below code:

 colorDetails.forEach((value){
              print(value['id']);
              print(value['name']);
             });

Output:

34
Red
47
Green
95
Blue

You can see that the forEach loop with take the first item of the list which is a map. It means that value now have the first map of the list. We took the id of the map using the value[‘id’] key and for the name we have used value[‘name’]. These are keys of the map and by using these keys, we have accessed the values as seen in the above output block.

Example 3: ForEach Loop In Flutter Nested Lists With Maps

For that we will be creating a nested list having maps. See the below code:

List<dynamic> colorDetails=[
   [
    {
     'name':'Red list 1',
     'id': 344
    },
    {
     'name':'Green list 1',
     'id': 477
    },
   ],
   [
    {
     'name':'Red list 2',
     'id': 345
    },
    {
     'name':'Green list 2',
     'id': 475
    },
   ], 
   [
    {
     'name':'Red list 3',
     'id': 342
    },
    {
     'name':'Green list 3',
     'id': 472
    },
   ],
];

Now we will be taking the name and value from each list using the forEach loop. See the below code:

 colorDetails.forEach((value){
    value.forEach((value2){
      print(value2['id']);
      print(value2['name']);
   });
 });

Output:

344
Red list 1
477
Green list 1

345
Red list 2
475
Green list 2

342
Red list 3
472
Green list 3

You can see that we first have used the forEach loop to the color details list, when the loop executes for the first time then the value will have a first list of time which is a list of two maps. We have again used the forEach loop. This time we have applied this loop to the value parameter which currently has the first item of color details list. As you can see that now we have easily printed the values of id and name using the value2[‘id’] and value2[‘name’] as see in the above output block.

So this is how you can easily use forEach loop in Flutter apps. If you still have any questions related to the implementation of forEach loop in Flutter then do let me know in the comment section. I would be glad to answer all your questions.

Conclusion

To conclude, I have practically discussed the implementation of forEach loop in Flutter with the help of simple and complex examples. I would love to hear your thoughts about this post. Thank you for reading this post.

Leave a Comment

Your email address will not be published. Required fields are marked *