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, ))) ], )
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 Implementation Source Code
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.
