How To Easily Use 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.

Outline

What is ForEach Loop In Flutter?
Implementing ForEach Loop In Flutter(Multiple Examples)
Example 1: ForEach Loop In Flutter List Of Strings
Example 2: ForEach Loop In Flutter List Of Maps
Example 3: ForEach Loop In Flutter Nested Lists With Maps
Conclusion

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)

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.

Also do visit other articles on beautiful Flutter templates, beautiful Flutter animations, Flutter app development guides, informative Flutter books, Flutter widgets, Flutter web development and many more. Post links to some of these mentioned topics can be found listed below while other posts can be found by using menu navigation bar or search box of this site. Thank you for reading this post.

Flutter app articles you may like: Flutter basics for beginners, why learn react native framework, react native jobs, react native elements, flutter appbar title center, explanation of widgets in flutter, flutter architecture, flutter vs native, unique flutter development. mobile app marketing tips, flutter sliverappbar customization, beautiful gradient login UI, Dart Vs JavaScript, flutter login UI form, flutter bottom navigation bar, flutter appbar actions.