What is for loop in Flutter
In Flutter, a for loop is a control flow statement that allows you to iterate over a collection of data and perform a specific action on each item. The basic syntax of a for loop in Flutter is as follows:
for (int i = 0; i < collection.length; i++) {
// code to be executed on each item
}The for loop starts with the keyword for, followed by a set of parentheses that define the loop conditions. Inside the parentheses, you define a variable, such as i, that will be used as the loop counter. The loop then starts by initializing the counter variable to a value, such as 0.
The next part of the loop is the condition, which is checked before each iteration. In this case, it’s i < collection.length, which means that the loop will continue to run until the counter variable i is no longer less than the length of the collection.
The last part of the loop is the increment statement, which is executed after each iteration. In this case, it’s i++, which means that the counter variable i will be incremented by 1 after each iteration.
Inside the loop, you can then perform any action on each item in the collection, such as displaying it on screen, processing it, or adding it to a list.
Flutter how to use for loop
The Flutter for loop is a control flow statement that allows you to iterate over a collection of data and perform a specific action on each item. It consists of three parts:
- Initialization: This is where you declare and initialize the loop variable. For example,
int i = 0;declares an integer variableiand sets its initial value to0. - Condition: This is where you define the condition that must be met in order for the loop to continue executing. For example,
i < collection.length;is a condition that checks if the value ofiis less than the length of the collection. - Update: This is where you update the loop variable. For example,
i++increases the value ofiby 1 after each iteration.
The basic syntax of a for loop in Flutter is as follows:
for (int i = 0; i < collection.length; i++) {
// code to be executed on each item
}In this example, the for loop starts with the keyword for, followed by a set of parentheses that define the loop conditions. Inside the parentheses, you define a variable, such as i, that will be used as the loop counter. The loop then starts by initializing the counter variable to a value, such as 0.
The next part of the loop is the condition, which is checked before each iteration. In this case, it’s i < collection.length, which means that the loop will continue to run until the counter variable i is no longer less than
What is forEach in Flutter
In Dart and Flutter, forEach is a method that is used to iterate over the elements of a collection, such as List, Map, and Set. The forEach method takes a single argument, which is a function that will be called for each element in the collection. This function takes two arguments, the first one is the current element, and the second one is the index of the current element.
forEach method is a more concise way to iterate over a collection compared to for loop and it’s more readable too. Here’s an example of how you can use the forEach method to iterate over a list of strings:
@override
void initState() {
List<String> items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"];
items.forEach((item) {
print(item);
});
}In this example, the forEach method is called on the items list, and it takes a function that takes a single argument item and prints it. The forEach method will iterate over the items in the list, and for each item, it will call the function and pass the item as the argument.
You can also use the forEach method to generate widgets, for example:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children:
_buildTextWidgets(),
),
),
);
}
List<Widget> _buildTextWidgets() {
List<String> items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"];
List<Widget> textWidgets = [];
items.forEach((item) {
textWidgets.add(
Container(
width: MediaQuery.of(context).size.width,
child: Text(item),
),
);
});
return textWidgets;
}
In this example, the forEach method is called on the `items` list, and it takes a function that takes a single argument item and creates a Container widget and the child of the container is Text widget with the item as the text. The forEach method will iterate over the items in the list, and for each item, it will call the function and pass the item as the argument and add the generated Container widget to the textWidgets list.
So in short, forEach is a method that allows you to iterate over elements of a collection and perform some action on each element, it’s a more concise and readable way to iterate over a collection compared to a for loop.
How to use for loop inside the Column in Flutter
Here’s an example of how you can use a for loop inside the children property of the Column widget to populate Text widgets without creating a new widget:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
for (int i = 0; i < 10; i++)
Text("Item $i"),
],
),
),
);
}
In this example, we’re using the Column widget as the root of the widgets tree, and we’re using a for loop inside the children property of the Column widget to generate Text widgets, the for loop generates 10 Text widgets with “Item $i” as a text, where i is the current iteration number.
It’s worth mentioning that this is a new feature introduced in Dart 2.3, it allows you to put a for loop or any other kind of control flow constructs directly in the widget tree, which makes it a more concise and readable way to generate widgets.
Here is another example:
You can use a for loop inside the Column widget to populate Text widgets by creating a list of Text widgets in the loop, and then passing that list as the children property of the Column widget. Here’s an example:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children:
_buildTextWidgets(),
),
),
);
}
List<Widget> _buildTextWidgets() {
List<Widget> textWidgets = [];
for (int i = 0; i < 10; i++) {
textWidgets.add(
Text("Item $i"),
);
}
return textWidgets;
}In this example, the _buildTextWidgets method uses a for loop to create a list of Text widgets with the text “Item $i”, where i is the current iteration number. Then it returns the list which is passed as the children property of the Column widget.
Here’s an example of how you can wrap the Text widget inside a Container widget and make the container full-screen width:
List<Widget> _buildTextWidgets() {
List<Widget> textWidgets = [];
for (int i = 0; i < 10; i++) {
textWidgets.add(
Container(
width: MediaQuery.of(context).size.width,
height: 50,
child: Card(
child: Text("Item $i")
)
),
);
}
return textWidgets;
}
In this example, we are wrapping the Text widget inside a Container widget and setting the width property of the container to the width of the screen using MediaQuery.of(context).size.width . this way the container will take the full width of the screen.
It’s worth noting that when you wrap a widget inside a container you can customize its properties such as width, height, padding, margin, background colour, etc.
How to use for loop inside the Row in Flutter
Here’s an example of how you can use a for loop inside a SingleChildScrollView with a Row widget to make it scrollable:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
for (int i = 0; i < 10; i++)
Container(
width: MediaQuery.of(context).size.width / 3,
height: 50,
child: Card(
child: Text("Item $i"),
),
),
],
),
),
);
}
In this example, we’re using SingleChildScrollView as the root of the widgets tree, which allows the children to be scrolled. Inside the SingleChildScrollView, we’re using a Row widget as the main container, and we’re using a for loop inside the children property of the Row widget to generate Container widgets, each container contains a Text widget with “Item $i” as a text, where i is the current iteration number.
To make the Row scrollable, we’re setting the width of each container to be a third of the screen width using MediaQuery.of(context).size.width / 3, this way the number of the generated widgets will exceed the screen size and the SingleChildScrollView will allow scrolling.
For loop to create a list of widgets in Flutter
Here is an example of how to use a for loop to create a list of widgets in a Flutter app:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'flutterassets.com'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text("Using for loop to generate widgets:"),
Expanded(
child: _buildList(),
),
],
),
),
);
}
Widget _buildList() {
List<Widget> list = [];
for (int i = 0; i < 10; i++) {
list.add(ListTile(
title: Text("Item $i"),
onTap: () {
print("Item $i tapped");
},
));
}
return ListView(
children: list,
);
}
}In this example, we created a new function _buildList() that creates a list of widgets. Inside the function, we use a for loop to iterate 10 times. For each iteration, we create a new ListTile widget and add it to the list variable. The ListTile widget takes a title and an onTap callback. The title argument is set to “Item $i” which will display the current index of the loop, and the onTap callback is used to print the current index when the tile is tapped.
After the for loop ends, we return a ListView widget, passing the list variable as the children argument, which will display all the widgets that have been added to the list.
So, this example will generate a list of 10 tiles, each with a title “Item x” where x is the index of the loop, and when you tap on each tile it will print the current index of the loop.
Also, you can wrap the ListView with the Card widget:
Widget _buildList() {
List<Widget> list = [];
for (int i = 0; i < 10; i++) {
list.add(Card(
child: ListTile(
title: Text("Item $i"),
onTap: () {
print("Item $i tapped");
},
),
));
}
return ListView(
children: list,
);
}
In this example, we added a Card widget as the parent of the ListTile widget, inside the for loop. Every time the loop runs, it will add a new Card widget that contains a ListTile widget as its child.
Simiar results you can acheave using ListView.builder, here is an example:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'flutterassets.com'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final List<String> _items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
_buildTitle(),
_buildList(),
],
),
),
);
}
Widget _buildTitle() {
return Padding(
padding: const EdgeInsets.all(20.0),
child: Text(
"For Loop Example",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
),
);
}
Widget _buildList() {
return Expanded(
child: ListView.builder(
itemCount: _items.length,
itemBuilder: (context, index) {
return _buildListItem(_items[index], index);
},
),
);
}
Widget _buildListItem(String item, int index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: ListTile(
title: Text(item),
leading: CircleAvatar(
child: Text("$index"),
),
trailing: IconButton(
icon: Icon(Icons.delete),
onPressed: () {
_items.removeAt(index);
},
),
),
),
);
}
}
In the build method, it returns a Scaffold widget that contains a Column widget as the body. The Column widget has two children, a title and a list. The title is generated by the _buildTitle method, which returns a Padding widget that contains a Text widget with the title “For Loop Example”.
The list is generated by the _buildList method, which returns an Expanded widget that contains a ListView.builder widget. The ListView.builder widget takes two arguments: itemCount and itemBuilder. The itemCount argument is used to specify the number of items to generate and the itemBuilder argument is used to create the widgets for each item.
In this case, we set itemCount to the length of the _items list, so it will iterate over all the items in the list. Inside the itemBuilder function, we call the _buildListItem function for each item, passing the current item and its index. The _buildListItem function creates a Card widget that contains a ListTile widget.
The ListTile widget takes the title of the current item and an avatar with the current index. Also, it has a trailing icon button that when pressed removes the current item from the list by calling _items.removeAt(index)
In short, this code is an example of how to use a for loop to generate a list of widgets in a Flutter app. It uses a ListView.builder widget which takes two arguments, itemCount and itemBuilder, to generate the widgets based on a list of items and it uses the _buildListItem function to generate the widgets for each item.
Calculator buttons grid with the for loop in Flutter
Here is another practical example how to use for loop in your Flutter app:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'flutterassets.com'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
_buildTitle(),
_buildCalculator(),
],
),
),
);
}
Widget _buildTitle() {
return Padding(
padding: const EdgeInsets.all(20.0),
child: Text(
"For Loop Example",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
),
);
}
Widget _buildCalculator() {
return Expanded(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
Text("Calculator"),
_buildNumberPad(),
_buildResult(),
],
),
),
);
}
Widget _buildNumberPad() {
List<Widget> buttons = [];
for (int i = 1; i <= 9; i++) {
buttons.add(
_buildNumberButton(i.toString()),
);
}
buttons.add(_buildNumberButton("0"));
buttons.add(_buildOperatorButton("+"));
buttons.add(_buildOperatorButton("-"));
buttons.add(_buildOperatorButton("*"));
buttons.add(_buildOperatorButton("/"));
buttons.add(_buildEqualButton("="));
return Expanded(
child: GridView.count(
crossAxisCount: 3,
children: buttons,
),
);
}
Widget _buildNumberButton(String text) {
return TextButton(
child: Text(text),
onPressed: () {},
);
}
Widget _buildOperatorButton(String text) {
return TextButton(
child: Text(text),
onPressed: () {},
);
}
Widget _buildEqualButton(String text) {
return TextButton(
child: Text(text),
onPressed: () {},
);
}
Widget _buildResult() {
return Text("0");
}
}
In this code, we have added a _buildEqualButton method that creates a button for the equal sign. This button is added to the list of buttons that we generated in the _buildNumberPad method using a for loop. In this method, we use a GridView.count widget to organize the buttons in a 3×3 grid, and we pass the list of buttons as children to the GridView.
We also added a _buildResult method which creates a Text widget that will display the result of the calculation.
It’s worth noting that in this example, the onPressed callbacks of the buttons are empty, as it depends on the implementation of the calculator logic which can be done by different ways, the most common one is to use the StatefulWidget and use its state to handle the calculator logic.
It’s also worth noting that the current implementation is not a functional calculator, it’s just an example of how to use a for loop to generate a set of widgets.
Can I mix Column children with the for loop in Flutter?
Here’s an example of how you can use a for loop inside a Column widget to populate Text widgets mixed with other widgets:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Column(
children: [
Text("Header"),
Text("Subheader"),
for (int i = 0; i < 10; i++)
Text(
"Item $i"),
],
),
),
);
}
In this example, we’re using the Column widget as the root of the widgets tree, and we’re mixing a Text widget with the for loop inside the children property of the Column widget to generate Text widgets, the for loop generates 10 Text widgets with “Item $i” as a text, where i is the current iteration number.
You can add any other widgets you want as children of the Column widget, and they will be rendered in the order they’re added to the children list.
