How to create GridView of stacked images in Flutter app?

Question

What I want to create

The following picture shows the layout I want to create in a flutter app.

The code

Then I wrote the following code.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Board(),
      debugShowCheckedModeBanner: false,
    );
  }
} 

class Board extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      primary: false,
      padding: const EdgeInsets.all(12),
      crossAxisSpacing: 4,
      mainAxisSpacing: 4,
      crossAxisCount: 5,
      children: List.generate(30, (index) {
        return Container(
          child: Column(
            List.generate(3, (index) {
              return FractionallySizedBox(
                widthFactor: 1,
                heightFactor: 0.3333,
                child: Image(image: AssetImage("assets/piece_b.png"))
              );
            })
          )
        );
      })
    );
  })
  }
}

// pubspec.yaml
flutter:
  assets:
    - assets/piece_b.png
    - assets/piece_w.png

The error

However, the following error was reported.

Error: Too many positional arguments: 0 allowed, but 1 found.
Try removing the extra positional arguments.
            child: Column(
                         ^

How do I create the flutter layout like the picture?

Answer 1

inside Column it should be children: you have missed it

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Board(),
      debugShowCheckedModeBanner: false,
    );
  }
} 

class Board extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      primary: false,
      padding: const EdgeInsets.all(12),
      crossAxisSpacing: 4,
      mainAxisSpacing: 4,
      crossAxisCount: 5,
      children: List.generate(30, (index) {
        return Container(
          child: Column(
            children:List.generate(3, (index) {
              return FractionallySizedBox(
                widthFactor: 1,
                heightFactor: 0.3333,
                child: Image(image: AssetImage("assets/piece_b.png"))
              );
            })
          )
        );
      })
    );
  })
  }
}

let me know in comments if you need more help

Answer 2

You have to provide your list to children in the column

like: Column( children: your list here )