Loop to generate a list of 2 columns with Flutter - flutter

Question

I'm a beginner with Flutter and I need to make a loop and generate a widget that contains rows with just 2 columns.
I tried too many different ways to do that but nothing works :/
when I put a loop to my code such as for (var i = 0; i < p1.length-1; i+2) .. nothing shows in the screen and its became all in white.
Here is the code I'm using:
class _MapPageState extends State<MapPage> {
var p1= [
"A0",
"A1",
"A2",
"A3",
];
List<Widget> getWidgets()
{
List<Widget> list = new List<Widget>();
for(var i = 0; i < p1.length-1; i+2){
list.add(new Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius:BorderRadius.circular(20.0)
),
child: FlatButton(
child: Text(p1[i].toString(),style: TextStyle(color: Colors.white),),
onPressed:()=>print('hii1'),
),
),);
list.add(new Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius:BorderRadius.circular(20.0)
),
child: FlatButton(
child: Text(p1[i+1].toString(),style: TextStyle(color: Colors.white),),
onPressed:()=>print('hii2'),
),
),);
}
return list;
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
centerTitle: true,
title: Text("Votre SMARTY PARK"),
),
body:Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://images.wallpaperscraft.com/image/parking_cars_underground_131454_240x320.jpg'),
fit: BoxFit.cover,
),),
child: ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 80),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: getWidgets()
),
),
],
),
)
);
}
}
Hope anybody can help cuz i'm trying to that for 3 days..
Thanks

Answer 1

Instead of adding two Container's to list, add a Row containing two Container's to the list.
Also, you should probably change the Row in ListView to Column
Refer to the following code:
(I just copy pasted a few things from your code, there are a lot of changes so go through it carefully. You will have to make changes to make it look neater and have the correct name etc.)
import 'package:flutter/material.dart';
void main() {
runApp(MainApp());
}
class MainApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
centerTitle: true,
title: Text("Votre SMARTY PARK"),
),
body: MapPage(),
),
);
}
}
class MapPage extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return MapPageState();
}
}
class MapPageState extends State<MapPage> {
var p1 = ["A0", "A1", "A2", "A3"];
List<Widget> widgetlist = List();
MapPageState() {
getWidgets(widgetlist);
}
#override
Widget build(BuildContext context) {
double scwidth = MediaQuery.of(context).size.width;
double scheight = MediaQuery.of(context).size.height;
return Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
height: scheight - kToolbarHeight - 24,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://images.wallpaperscraft.com/image/parking_cars_underground_131454_240x320.jpg'),
fit: BoxFit.cover,
),
),
child: ListView(
children: widgetlist.map((element) {
return element;
}).toList(),
),
)
],
);
}
void getWidgets(List<Widget> wlist) {
for (int i = 0; i < p1.length-1; i++) {
wlist.add(Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.green, borderRadius: BorderRadius.circular(20.0)),
child: FlatButton(
child: Text(
p1[i].toString(),
style: TextStyle(color: Colors.white),
),
onPressed: () => print('hii1'),
),
),
Container(
decoration: BoxDecoration(
color: Colors.green, borderRadius: BorderRadius.circular(20.0)),
child: FlatButton(
child: Text(
p1[i + 1].toString(),
style: TextStyle(color: Colors.white),
),
onPressed: () => print('hii2'),
),
)
],
));
}
}
}
Output:

Answer 2

Your method should return a list of row.You can use this method
List<Row> getWidgets()
{
List<Row> list = new List<Row>();
for(var i = 0; i < p1.length-1; i+=2){
list.add(Row(
mainAxisAlignment:MainAxisAlignment.spaceAround,
children:[
Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius:BorderRadius.circular(20.0)
),
child: FlatButton(
child: Text(p1[i].toString(),
style: TextStyle(
color: Colors.white
),
),
onPressed:()=>print('hii1'),
),
),
Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius:BorderRadius.circular(20.0)
),
child: FlatButton(
child: Text(p1[i+1].toString(),
style: TextStyle(
color: Colors.white
),
),
onPressed:()=>print('hii2'),
),
),
]
);
);
}
return list;
}
Then you can call this from your build() with a ListView.
ListView(
scrollDirection: Axis.vertical,
children:getWidgets()
),