FLUTTER - 将列表的一部分映射到小部件

Question

I am working on an ANAGRAM Game Screen. The idea is to shuffle the letters of a word and make them into separate draggable boxes. For now, I have succeeded in mapping my list of letters into widgets (LetterBox). Here is the code :

 Widget build(BuildContext context) {
    var uD = Provider.of<UdProvider>(context);
    List letters = widget.word!.split("");
    letters.shuffle();
    print(letters);
    return Scaffold(
      backgroundColor: Colors.indigo[900],
             body: Row(children: [
        ...letters.map((e) => Expanded(child: LetterBox(letter: e))),
      ]),
    );

It works fine, but I am encountering a problem. If the word has too many letters, it will eventually raise a problem for my row. What would be great is to display a maximum of 7 letters per row in a kind of column if the word is longer than 7. Is there a way to map part of the list into a row and the rest into another row ?

Answer 1

You might want to have a look at GridView . With the GridView.count constructor, you can specify how many items you want to display in one direction (horizontal by default), before adding another row.

GridView.count(
  crossAxisCount: 7,
  children: [...letters.map((e) => LetterBox(letter: e))]),
),