Loop to generate a list of 2 columns with 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()
            ),