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.
Outline
- What is For Loop In Flutter?
- Implementing For Loop In Flutter(Multiple Examples)
- Example 1: For Loop In Flutter Column Widget
- Example 2: For Loop In Flutter Row Widget
- For Loop In Flutter Implementation Source Code
- Conclusion
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.
Also don’t forget to visit other articles on amazing Flutter templates, beautiful Flutter animations, Flutter app development guides, Flutter web development, informative Flutter books, Flutter widgets and many more. Links to some of these topics can be found listed below. Others can be found by the usage of menu navigation bar or search box of this site. Thank you for reading.
Flutter app articles you may like: flutter appbar title center, explanation of widgets in flutter, flutter architecture, flutter vs native, flutter sliverappbar customization, beautiful gradient login UI, Dart Vs JavaScript, flutter login UI form, flutter basics for beginners, why learn react native framework, react native jobs, react native elements, unique flutter development. mobile app marketing tips, flutter bottom navigation bar, flutter appbar actions.
You might also like:
How To Easily Use ForEach Loop In Flutter
Learn How To Use Flutter Image Asset-Easy Flutter Guide
How To Easily Change Flutter Container Color
How To Easily Customize Flutter Glassmorphism Container
Acer Predator Helios 300 PH315 54 760S Gaming Laptop Amazing Specs
How To Easily Change Flutter Text Underline Color
How To Easily Change Flutter Glassmorphism Container Size
How To Easily Customize Flutter Carousel Slider AutoPlay
How To Easily Change Flutter Appbar Icon Color Theme
How To Easily Set Flutter Carousel Slider Full Width
