align title text left

lib/presentation/views/main_menu/home_view.dart

@@ -1,10 +1,150 @@
-import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:game_tracker/core/custom_theme.dart';
+import 'package:game_tracker/presentation/widgets/primary_outlined_button.dart';
+import 'package:game_tracker/presentation/widgets/primary_container.dart';
 
-class HomeView extends StatelessWidget {
+class HomeView extends StatefulWidget {
   const HomeView({super.key});
 
+  @override
+  State<HomeView> createState() => _HomeViewState();
+}
+
+class _HomeViewState extends State<HomeView> {
+  final gameData = <Map<String, String>>[
+    {'game': 'Cabo', 'group': 'Bananencrew', 'date': '01.08.2024'},
+    {'game': 'Quixx', 'group': 'Die Anhänger Jesu', 'date': '30.07.2024'},
+    {'game': '6 Nimmt', 'group': 'Säufer', 'date': '28.07.2024'},
+    {'game': 'Uno', 'group': 'Grillraketen', 'date': '25.07.2024'},
+  ];
+
   @override
   Widget build(BuildContext context) {
-    return const Center(child: Text('Home View'));
+    return Scaffold(
+      backgroundColor: CustomTheme.backgroundColor,
+      body: Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: Column(
+          children: [
+            Align(
+              alignment: Alignment.centerLeft,
+              child: const Text(
+                'Zuletzt verwendete Gruppen',
+                style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold),
+              ),
+            ),
+            const SizedBox(height: 8),
+            PrimaryContainer(
+              Column(
+                children: [
+                  Row(
+                    children: [
+                      Expanded(
+                        child: PrimaryOutlinedButton(
+                          text: "${gameData[0]['group']}",
+                          onPressed: () {},
+                        ),
+                      ),
+                      const SizedBox(width: 8),
+                      Expanded(
+                        child: PrimaryOutlinedButton(
+                          text: "${gameData[1]['group']}",
+                          onPressed: () {},
+                        ),
+                      ),
+                    ],
+                  ),
+                  const SizedBox(height: 8),
+                  Row(
+                    children: [
+                      Expanded(
+                        child: PrimaryOutlinedButton(
+                          text: "${gameData[2]['group']}",
+                          onPressed: () {},
+                        ),
+                      ),
+                      const SizedBox(width: 8),
+                      Expanded(
+                        child: PrimaryOutlinedButton(
+                          text: "${gameData[3]['group']}",
+                          onPressed: () {},
+                        ),
+                      ),
+                    ],
+                  ),
+                ],
+              ),
+            ),
+            const SizedBox(height: 24),
+            Align(
+              alignment: Alignment.centerLeft,
+              child: const Text(
+                'Zuletzt gespielte Spiele',
+                style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold),
+              ),
+            ),
+            const SizedBox(height: 8),
+            PrimaryContainer(
+              Column(
+                children: [
+                  Row(
+                    children: [
+                      Expanded(
+                        child: PrimaryOutlinedButton(
+                          text: "${gameData[0]['game']}",
+                          onPressed: () {},
+                        ),
+                      ),
+                      const SizedBox(width: 8),
+                      Expanded(
+                        child: PrimaryOutlinedButton(
+                          text: "${gameData[1]['game']}",
+                          onPressed: () {},
+                        ),
+                      ),
+                    ],
+                  ),
+                  const SizedBox(height: 8),
+                  Row(
+                    children: [
+                      Expanded(
+                        child: PrimaryOutlinedButton(
+                          text: "${gameData[2]['game']}",
+                          onPressed: () {},
+                        ),
+                      ),
+                      const SizedBox(width: 8),
+                      Expanded(
+                        child: PrimaryOutlinedButton(
+                          text: "${gameData[3]['game']}",
+                          onPressed: () {},
+                        ),
+                      ),
+                    ],
+                  ),
+                ],
+              ),
+            ),
+            const SizedBox(height: 24),
+            Align(
+              alignment: Alignment.centerLeft,
+              child: const Text(
+                'Lieblingsspiel nicht gefunden?',
+                style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold),
+              ),
+            ),
+            const SizedBox(height: 8),
+            PrimaryContainer(
+              Center(
+                child: PrimaryOutlinedButton(
+                  text: 'Jetzt vorschlagen',
+                  onPressed: () {},
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
   }
 }

lib/presentation/widgets/primary_container.dart

@@ -0,0 +1,13 @@
+import 'package:flutter/material.dart';
+import 'package:game_tracker/core/custom_theme.dart';
+
+Widget PrimaryContainer(Widget childWidget) {
+  return Container(
+    padding: const EdgeInsets.all(16.0),
+    decoration: BoxDecoration(
+      borderRadius: BorderRadius.circular(16.0),
+      color: CustomTheme.secondaryColor,
+    ),
+    child: childWidget,
+  );
+}

lib/presentation/widgets/primary_outlined_button.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+import 'package:game_tracker/core/custom_theme.dart';
+
+Widget PrimaryOutlinedButton({required String text, required onPressed}) {
+  return SizedBox(
+    height: 65,
+    child: OutlinedButton(
+      onPressed: onPressed,
+      style: OutlinedButton.styleFrom(
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(16.0),
+        ),
+        backgroundColor: CustomTheme.primaryColor,
+      ),
+      child: SizedBox(
+        width: double.infinity,
+        child: Text(
+          text,
+          textAlign: TextAlign.center,
+          softWrap: true,
+          overflow: TextOverflow.ellipsis,
+          maxLines: 2,
+          style: const TextStyle(color: Colors.white, fontSize: 15),
+        ),
+      ),
+    ),
+  );
+}