How To Easily Use For Loop In Flutter Widgets

for loop in flutter

In this post, we will be going through a detailed discussing on how to properly use for loop in Flutter. We will understand what is the role and usage of for loop in Flutter. Then we will implement it using multiple Flutter examples for complete understanding. After reading this post, you will be able to implement for loop in Flutter with ease.

What is For Loop In Flutter?

As the name suggests, it defines a loop(repetition). For loop is used when you want to use the index as well, if you want. We will be going through multiple examples on how to use for loop in Flutter. So let’s just get right into it.

Implementing For Loop In Flutter(Multiple Examples)

If you have learned other programming languages then you would know the syntax of for loop. Don’t worry if you don’t. The syntax of for loop is as follows:

for(variable;condition;increment)
  {
     body
  }

As you can see that it starts with a for keyword and inside parenthesis, first we see a variable whose value will be used in for loop, then a condition will be checked with that value and finally an increment to that value will be made. After that, body of the for loop which is inside curly braces will be implemented.

Let’s now see how to use it in Flutter widgets.

Example 1: For Loop In Flutter Column Widget

We will see how to use for loop in Flutter column widget. For that, we will use a Flutter column widget and in its children constructor we will use for loop. We will se printing the index value of for loop using the Flutter text widget. See the below code:

Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          for (int i = 0; i < 10; i++)
            Container(
                constraints: BoxConstraints(maxWidth: 70, minHeight: 30),
                margin: EdgeInsets.all(5),
                decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.circular(20)),
                alignment: Alignment.center,
                child: Text(i.toString(),
                    style: TextStyle(
                      color: Colors.white,
                    )))
        ],
      )
for loop in flutter column widget
As you can see that this is how you can easily use for loop in Flutter column widget. You don’t need curly braces here. The body of column will accept only one widget. In our case, it is Flutter container widget. We have decorated it with border radius, margin, background color and a child Flutter text widget to show the index value.

Example 2: For Loop In Flutter Row Widget

It can be used the same way it is used for the column widget. For loop will be implemented inside the children constructor of the Flutter row widget. See the below code:

Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          for (int i = 0; i < 5; i++)
            Container(
                constraints: BoxConstraints(maxWidth: 30, maxHeight: 30),
                margin: EdgeInsets.all(5),
                decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.circular(20)),
                alignment: Alignment.center,
                child: Text(i.toString(),
                    style: TextStyle(
                      color: Colors.white,
                    )))
        ],
      )
for loop in flutter row widget
You can see that for loop in Flutter row widget is successfully implemented.
So in this way, you can use and customize for loop in Flutter widgets.

for loop in flutter

Conclusion

To conclude, hope now you have an in depth  practical understanding of how to use for loop in Flutter widgets. I would love to see you comment on this post. Thank you for reading.

Leave a Comment

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