Overhauled layout building

lib/presentation/views/main_menu/home_view.dart

@@ -1,66 +1,111 @@
 import 'package:flutter/material.dart';
 import 'package:game_tracker/presentation/widgets/game_tile.dart';
-import 'package:game_tracker/presentation/widgets/info_tile.dart';
 import 'package:game_tracker/presentation/widgets/quick_create_button.dart';
-import 'package:game_tracker/presentation/widgets/quick_info_tile.dart';
+import 'package:game_tracker/presentation/widgets/tiles/info_tile.dart';
+import 'package:game_tracker/presentation/widgets/tiles/quick_info_tile.dart';
 
 class HomeView extends StatelessWidget {
   const HomeView({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return Column(
+    return LayoutBuilder(
-      crossAxisAlignment: CrossAxisAlignment.center,
+      builder: (BuildContext context, BoxConstraints constraints) {
-      children: [
+        return SingleChildScrollView(
-        const Row(
+          child: Column(
-          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+            crossAxisAlignment: CrossAxisAlignment.center,
-          children: [
-            QuickInfoTile(title: 'Games', icon: Icons.casino, value: 42),
-            QuickInfoTile(
-              title: 'Groups',
-              icon: Icons.groups_rounded,
-              value: 5,
-            ),
-          ],
-        ),
-        const InfoTile(
-          title: 'Recent Games',
-          padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 16.0),
-          icon: Icons.timer,
-          content: GameTile(),
-        ),
-        InfoTile(
-          title: 'Quick Create',
-          height: 210,
-          padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 16.0),
-          icon: Icons.add_box_rounded,
-          content: Column(
             children: [
               Row(
-                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                mainAxisAlignment: MainAxisAlignment.center,
                 children: [
-                  QuickCreateButton(text: 'Cabo', onPressed: () {}),
+                  QuickInfoTile(
-                  QuickCreateButton(text: 'Uno', onPressed: () {}),
+                    width: constraints.maxWidth * 0.45,
+                    height: constraints.maxHeight * 0.15,
+                    title: 'Games',
+                    icon: Icons.casino,
+                    value: 42,
+                  ),
+                  SizedBox(width: constraints.maxWidth * 0.05),
+                  QuickInfoTile(
+                    width: constraints.maxWidth * 0.45,
+                    height: constraints.maxHeight * 0.15,
+                    title: 'Groups',
+                    icon: Icons.groups_rounded,
+                    value: 5,
+                  ),
                 ],
               ),
-              Row(
+              Padding(
-                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                padding: const EdgeInsets.symmetric(vertical: 24.0),
-                children: [
+                child: InfoTile(
-                  QuickCreateButton(text: 'Phase 10', onPressed: () {}),
+                  width: constraints.maxWidth * 0.95,
-                  QuickCreateButton(text: 'Category 5', onPressed: () {}),
+                  title: 'Recent Games',
-                ],
+                  icon: Icons.timer,
+                  content: const Padding(
+                    padding: EdgeInsets.symmetric(horizontal: 40.0),
+                    child: Column(
+                      mainAxisAlignment: MainAxisAlignment.start,
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        GameTile(
+                          gameTitle: 'Gamenight',
+                          gameType: 'Cabo',
+                          ruleset: 'Lowest Points',
+                          players: '5 Players',
+                          winner: 'Leonard',
+                        ),
+                        Padding(
+                          padding: EdgeInsets.symmetric(vertical: 8.0),
+                          child: Divider(),
+                        ),
+                        GameTile(
+                          gameTitle: 'Schoolbreak',
+                          gameType: 'Uno',
+                          ruleset: 'Highest Points',
+                          players: 'The Gang',
+                          winner: 'Lina',
+                        ),
+                        SizedBox(height: 8),
+                      ],
+                    ),
+                  ),
+                ),
               ),
-              Row(
+              InfoTile(
-                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                width: constraints.maxWidth * 0.95,
-                children: [
+                title: 'Quick Create',
-                  QuickCreateButton(text: 'Category 6', onPressed: () {}),
+                icon: Icons.add_box_rounded,
-                  QuickCreateButton(text: 'Category 7', onPressed: () {}),
+                content: Column(
-                ],
+                  spacing: 8,
+                  children: [
+                    Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                      children: [
+                        QuickCreateButton(text: 'Category 1', onPressed: () {}),
+                        QuickCreateButton(text: 'Category 2', onPressed: () {}),
+                      ],
+                    ),
+                    Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                      children: [
+                        QuickCreateButton(text: 'Category 3', onPressed: () {}),
+                        QuickCreateButton(text: 'Category 4', onPressed: () {}),
+                      ],
+                    ),
+                    Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                      children: [
+                        QuickCreateButton(text: 'Category 5', onPressed: () {}),
+                        QuickCreateButton(text: 'Category 6', onPressed: () {}),
+                      ],
+                    ),
+                  ],
+                ),
               ),
             ],
           ),
-        ),
+        );
-      ],
+      },
     );
   }
 }

lib/presentation/widgets/info_tile.dart

@@ -1,61 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:game_tracker/core/custom_theme.dart';
-
-class InfoTile extends StatefulWidget {
-  final String title;
-  final IconData icon;
-  final Widget content;
-  final EdgeInsets? padding;
-  final double? height;
-  const InfoTile({
-    super.key,
-    required this.title,
-    required this.icon,
-    required this.content,
-    this.padding,
-    this.height,
-  });
-
-  @override
-  State<InfoTile> createState() => _InfoTileState();
-}
-
-class _InfoTileState extends State<InfoTile> {
-  @override
-  Widget build(BuildContext context) {
-    return Padding(
-      padding: widget.padding ?? const EdgeInsets.all(0),
-      child: Container(
-        padding: const EdgeInsets.all(12),
-        height: widget.height ?? 200,
-        width: 380,
-        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(12),
-          color: CustomTheme.boxColor,
-          border: Border.all(color: CustomTheme.boxBorder),
-        ),
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.start,
-          crossAxisAlignment: CrossAxisAlignment.center,
-          children: [
-            Row(
-              children: [
-                Icon(widget.icon),
-                const SizedBox(width: 5),
-                Text(
-                  widget.title,
-                  style: const TextStyle(
-                    fontSize: 16,
-                    fontWeight: FontWeight.bold,
-                  ),
-                ),
-              ],
-            ),
-            const SizedBox(height: 10),
-            widget.content,
-          ],
-        ),
-      ),
-    );
-  }
-}

lib/presentation/widgets/quick_create_button.dart

@@ -19,15 +19,14 @@ class _QuickCreateButtonState extends State<QuickCreateButton> {
   Widget build(BuildContext context) {
     return ElevatedButton(
       onPressed: widget.onPressed,
-
       style: ElevatedButton.styleFrom(
-        minimumSize: const Size(140, 40),
+        minimumSize: const Size(140, 45),
         backgroundColor: CustomTheme.primaryColor,
         shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
       ),
       child: Text(
         widget.text,
-        style: const TextStyle(fontWeight: FontWeight.bold),
+        style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
       ),
     );
   }

lib/presentation/widgets/tiles/info_tile.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:game_tracker/core/custom_theme.dart';
+
+class InfoTile extends StatefulWidget {
+  final String title;
+  final IconData icon;
+  final Widget content;
+  final EdgeInsets? padding;
+  final double? height;
+  final double? width;
+  const InfoTile({
+    super.key,
+    required this.title,
+    required this.icon,
+    required this.content,
+    this.padding,
+    this.height,
+    this.width,
+  });
+
+  @override
+  State<InfoTile> createState() => _InfoTileState();
+}
+
+class _InfoTileState extends State<InfoTile> {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: widget.padding ?? const EdgeInsets.all(12),
+      height: widget.height,
+      width: widget.width ?? 380,
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(12),
+        color: CustomTheme.boxColor,
+        border: Border.all(color: CustomTheme.boxBorder),
+      ),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          Row(
+            children: [
+              Icon(widget.icon),
+              const SizedBox(width: 5),
+              Text(
+                widget.title,
+                style: const TextStyle(
+                  fontSize: 16,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: 10),
+          widget.content,
+        ],
+      ),
+    );
+  }
+}

lib/presentation/widgets/tiles/quick_info_tile.dart

@@ -5,11 +5,17 @@ class QuickInfoTile extends StatefulWidget {
   final String title;
   final IconData icon;
   final int value;
+  final double? height;
+  final double? width;
+  final EdgeInsets? padding;
   const QuickInfoTile({
     super.key,
     required this.title,
     required this.icon,
     required this.value,
+    this.height,
+    this.width,
+    this.padding,
   });
 
   @override
@@ -20,9 +26,9 @@ class _QuickInfoTileState extends State<QuickInfoTile> {
   @override
   Widget build(BuildContext context) {
     return Container(
-      padding: const EdgeInsets.all(12),
+      padding: widget.padding ?? const EdgeInsets.all(12),
-      height: 110,
+      height: widget.height ?? 110,
-      width: 180,
+      width: widget.width ?? 180,
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(12),
         color: CustomTheme.boxColor,