Make the spots clickable and have them increment their inner value.

lib/main.dart

@@ -18,47 +18,97 @@ class GameBoard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    var text = "hello test lalala";
     return Row(
-      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-      crossAxisAlignment: CrossAxisAlignment.stretch,
+      mainAxisAlignment: MainAxisAlignment.center,
+      crossAxisAlignment: CrossAxisAlignment.center,
       children: [
         // Player 1 Goal
-        Column(children: [Center(child: Text(" P1 "))]),
+        Column(
+          children: [Center(child: PlayerHole(text: "P1"))],
+        ),
         // Center holes
         Column(
-          spacing: 2,
+          //spacing: 2,
           children: [
             Row(
-              spacing: 2,
-              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-              crossAxisAlignment: CrossAxisAlignment.stretch,
+              //spacing: 2,
+              mainAxisAlignment: MainAxisAlignment.center,
+              crossAxisAlignment: CrossAxisAlignment.center,
               children: [
-                Column(children: [Text(" 0,0 ")]),
-                Column(children: [Text(" 1,0 ")]),
-                Column(children: [Text(" 2,0 ")]),
-                Column(children: [Text(" 3,0 ")]),
-                Column(children: [Text(" 4,0 ")]),
-                Column(children: [Text(" 5,0 ")]),
+                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.spaceEvenly,
-              crossAxisAlignment: CrossAxisAlignment.stretch,
+              //spacing: 2,
+              mainAxisAlignment: MainAxisAlignment.center,
+              crossAxisAlignment: CrossAxisAlignment.center,
               children: [
-                Column(children: [Text(" 0,1 ")]),
-                Column(children: [Text(" 1,1 ")]),
-                Column(children: [Text(" 2,1 ")]),
-                Column(children: [Text(" 3,1 ")]),
-                Column(children: [Text(" 4,1 ")]),
-                Column(children: [Text(" 5,1 ")]),
+                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: Text(" P2 "))]),
+        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);
+  }
+}

pubspec.lock

@@ -21,10 +21,10 @@ packages:
     dependency: transitive
     description:
       name: characters
-      sha256: f71061c654a3380576a52b451dd5532377954cf9dbd272a78fc8479606670803
+      sha256: faf38497bda5ead2a8c7615f4f7939df04333478bf32e4173fcb06d428b5716b
       url: "https://pub.dev"
     source: hosted
-    version: "1.4.0"
+    version: "1.4.1"
   clock:
     dependency: transitive
     description:
@@ -103,18 +103,18 @@ packages:
     dependency: transitive
     description:
       name: matcher
-      sha256: dc58c723c3c24bf8d3e2d3ad3f2f9d7bd9cf43ec6feaa64181775e60190153f2
+      sha256: dc0b7dc7651697ea4ff3e69ef44b0407ea32c487a39fff6a4004fa585e901861
       url: "https://pub.dev"
     source: hosted
-    version: "0.12.17"
+    version: "0.12.19"
   material_color_utilities:
     dependency: transitive
     description:
       name: material_color_utilities
-      sha256: f7142bb1154231d7ea5f96bc7bde4bda2a0945d2806bb11670e30b850d56bdec
+      sha256: "9c337007e82b1889149c82ed242ed1cb24a66044e30979c44912381e9be4c48b"
       url: "https://pub.dev"
     source: hosted
-    version: "0.11.1"
+    version: "0.13.0"
   meta:
     dependency: transitive
     description:
@@ -180,10 +180,10 @@ packages:
     dependency: transitive
     description:
       name: test_api
-      sha256: ab2726c1a94d3176a45960b6234466ec367179b87dd74f1611adb1f3b5fb9d55
+      sha256: "8161c84903fd860b26bfdefb7963b3f0b68fee7adea0f59ef805ecca346f0c7a"
       url: "https://pub.dev"
     source: hosted
-    version: "0.7.7"
+    version: "0.7.10"
   vector_math:
     dependency: transitive
     description: