flutter-mancala/lib/main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: Scaffold(body: GameBoard()));
  }
}

class GameBoard extends StatelessWidget {
  const GameBoard({super.key});

  @override
  Widget build(BuildContext context) {
    var text = "hello test lalala";
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        // Player 1 Goal
        Column(
          children: [Center(child: PlayerHole(text: "P1"))],
        ),
        // Center holes
        Column(
          //spacing: 2,
          children: [
            Row(
              //spacing: 2,
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Column(children: [BoardSpot(text: "0,0")]),
                Column(children: [BoardSpot(text: "1,0")]),
                Column(children: [BoardSpot(text: "2,0")]),
                Column(children: [BoardSpot(text: "3,0")]),
                Column(children: [BoardSpot(text: "4,0")]),
                Column(children: [BoardSpot(text: "5,0")]),
              ],
            ),
            Row(
              //spacing: 2,
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Column(children: [BoardSpot(text: "0,1")]),
                Column(children: [BoardSpot(text: "1,1")]),
                Column(children: [BoardSpot(text: "2,1")]),
                Column(children: [BoardSpot(text: "3,1")]),
                Column(children: [BoardSpot(text: "4,1")]),
                Column(children: [BoardSpot(text: "5,1")]),
              ],
            ),
            BoardSpot(text: text, w: 75, h: 200),
          ],
        ),
        // Player 2 Goal
        Column(
          children: [Center(child: PlayerHole(text: "P2"))],
        ),
      ],
    );
  }
}

class BoardSpot extends StatefulWidget {
  final String text;
  final double w;
  final double h;

  BoardSpot({super.key, required this.text, this.w = 50, this.h = 50});

  @override
  State<BoardSpot> createState() => _BoardSpotState();
}

class _BoardSpotState extends State<BoardSpot> {
  var _marbles = 4;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      // 2. Handle the tap
      onTap: () {
        // 3. Update the state
        setState(() {
          _marbles++;
        });
      },
      // 4. The sized box containing the text
      child: SizedBox(
        width: widget.w,
        height: widget.h,
        child: Center(child: Text("$_marbles", textAlign: TextAlign.center)),
      ),
    );
  }
}

class PlayerHole extends StatelessWidget {
  final String text;

  PlayerHole({super.key, required this.text});

  @override
  Widget build(BuildContext context) {
    return BoardSpot(w: 50, h: 100, text: text);
  }
}