How To Easily Use For Loop In Flutter Widgets

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,
                    )))
        ],
      )

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,
                    )))
        ],
      )

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. Do ask if you still have questions related to the implementation of for loop in Flutter. I would love to answer all your questions.

Below is the complete source code in which both Flutter row and column widgets are customized with for loop.

For Loop In Flutter Implementation Source Code

for loop in flutter

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Column(
            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(50)),
                    alignment: Alignment.center,
                    child: Text(i.toString(),
                        style: TextStyle(
                          color: Colors.white,
                        )))
            ],
          ),
          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,
                        )))
            ],
          ),
        ],
      ),
    )));
  }
}

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.