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);
+  }
+}