Make the game board its own widget.

lib/main.dart

@@ -9,42 +9,56 @@ class MainApp extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const MaterialApp(
+    return const MaterialApp(home: Scaffold(body: GameBoard()));
-      home: Scaffold(
+  }
-        body: Row(
+}
+
+class GameBoard extends StatelessWidget {
+  const GameBoard({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        // Player 1 Goal
+        Column(children: [Center(child: Text(" P1 "))]),
+        // Center holes
+        Column(
+          spacing: 2,
           children: [
-            // Player 1 Goal
+            Row(
-            Column(children: [Text("P1")]),
+              spacing: 2,
-            // Center holes
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-            Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
               children: [
-                Row(
+                Column(children: [Text(" 0,0 ")]),
-                  children: [
+                Column(children: [Text(" 1,0 ")]),
-                    Column(children: [Text("0,0")]),
+                Column(children: [Text(" 2,0 ")]),
-                    Column(children: [Text("1,0")]),
+                Column(children: [Text(" 3,0 ")]),
-                    Column(children: [Text("2,0")]),
+                Column(children: [Text(" 4,0 ")]),
-                    Column(children: [Text("3,0")]),
+                Column(children: [Text(" 5,0 ")]),
-                    Column(children: [Text("4,0")]),
+              ],
-                    Column(children: [Text("5,0")]),
+            ),
-                  ],
+            Row(
-                ),
+              spacing: 2,
-                Row(
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                  children: [
+              crossAxisAlignment: CrossAxisAlignment.stretch,
-                    Column(children: [Text("0,1")]),
+              children: [
-                    Column(children: [Text("1,1")]),
+                Column(children: [Text(" 0,1 ")]),
-                    Column(children: [Text("2,1")]),
+                Column(children: [Text(" 1,1 ")]),
-                    Column(children: [Text("3,1")]),
+                Column(children: [Text(" 2,1 ")]),
-                    Column(children: [Text("4,1")]),
+                Column(children: [Text(" 3,1 ")]),
-                    Column(children: [Text("5,1")]),
+                Column(children: [Text(" 4,1 ")]),
-                  ],
+                Column(children: [Text(" 5,1 ")]),
-                ),
               ],
             ),
-            // Player 2 Goal
-            Column(children: [Text("P2")]),
           ],
         ),
-      ),
+        // Player 2 Goal
+        Column(children: [Center(child: Text(" P2 "))]),
+      ],
     );
   }
 }