Flutter: ListView.builder create columns

Question

I am developing a flutter-app for some counting games. I am trying to get it working, that one ListView.builder is displaying two items in one column and the other two items in another column. But i do not know how to do that. Any suggestions?

Here is my code:

import 'dart:math';
import 'package:flutter/material.dart';

class Teams extends StatefulWidget{
  final String spieler1;
  final String spieler2;
  final String spieler3;
  final String spieler4;

  Teams({Key key, this.spieler1, this.spieler2, this.spieler3, this.spieler4}) : super(key : key);

  @override
  State<StatefulWidget> createState() => new TeamsState();
}

class TeamsState extends State<Teams>{
  @override
  Widget build(BuildContext context) {
    var namen = [widget.spieler1, widget.spieler2, widget.spieler3, widget.spieler4];
    List<String> erstellt = shuffle(namen);

    return new Scaffold(
      appBar: new AppBar(
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.shuffle),
            onPressed: (){setState(() {});} 
          ),
        ],
      ),
      body: new  ListView.builder(
              itemCount: namen.length,
              itemBuilder: (BuildContext context, int index){
                return new ListTile(
                  title: new Text(erstellt[index]), // <-- content is loading here
                );
              }
          ),
    );
  }

  List shuffle(List items) {
    var random = new Random();

    // Go through all elements.
    for (var i = items.length - 1; i > 0; i--) {

      // Pick a pseudorandom number according to the list length
      var n = random.nextInt(i + 1);

      var temp = items[i];
      items[i] = items[n];
      items[n] = temp;
    }

    return items;
  }

}

Answer 1

I think what you are describing is whats known as a GridView in flutter. To achieve two columns this is an example of what you can do:

GridView.count(
  // crossAxisCount is the number of columns
  crossAxisCount: 2,
  // This creates two columns with two items in each column
  children: List.generate(2, (index) {
    return Center(
      child: Text(
        'Item $index',
        style: Theme.of(context).textTheme.headline,
      ),
    );
  }),
);

You can read more about it on Flutter's Website: https://flutter.io/cookbook/lists/grid-lists/