lib/presentation/views/main_menu/groups_view.dart

@@ -1,10 +1,86 @@
-import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+//import 'package:game_tracker/data/dto/group.dart';
+//import 'package:game_tracker/data/dto/player.dart';
+import 'package:game_tracker/presentation/widgets/full_width_button.dart';
+import 'package:game_tracker/presentation/widgets/group_tile.dart';
+import 'package:game_tracker/presentation/widgets/top_centered_message.dart';
 
-class GroupsView extends StatelessWidget {
+class Group {
+  final String id;
+  final String name;
+  final List<Player> members;
+
+  Group({required this.id, required this.name, required this.members});
+}
+
+class Player {
+  final String id;
+  final String name;
+
+  Player({required this.id, required this.name});
+}
+
+class GroupsView extends StatefulWidget {
   const GroupsView({super.key});
 
+  @override
+  State<GroupsView> createState() => _GroupsViewState();
+}
+
+class _GroupsViewState extends State<GroupsView> {
+  Future<List<Group>> _getMockGroups() async {
+    await Future.delayed(const Duration(seconds: 1));
+    final player1 = Player(id: 'p1', name: 'Felix');
+    final player2 = Player(id: 'p2', name: 'Yannick');
+    final player3 = Player(id: 'p3', name: 'Mathis');
+    final player4 = Player(id: 'p4', name: 'Petrus');
+
+    return [
+      Group(
+        id: 'g1',
+        name: 'Weekend Warriors',
+        members: [player1, player2, player4],
+      ),
+      Group(id: 'g2', name: 'Strategy Masters', members: [player3, player4]),
+      Group(
+        id: 'g3',
+        name: 'The Cardboard Crew',
+        members: [player1, player2, player3, player4],
+      ),
+      Group(id: 'g4', name: 'The Group', members: [player1, player3, player4]),
+    ];
+  }
+
   @override
   Widget build(BuildContext context) {
-    return const Center(child: Text('Groups View'));
+    return Column(
+      children: [
+        FutureBuilder(
+          future: _getMockGroups(),
+          builder: (BuildContext context, AsyncSnapshot<List<Group>> snapshot) {
+            if (snapshot.connectionState == ConnectionState.waiting) {
+              return Center(
+                child: TopCenteredMessage(
+                  message: "Data not yet available, show sceleton",
+                ),
+              );
+            } else if (snapshot.hasError) {
+              return Center(
+                child: TopCenteredMessage(
+                  message: "Error while loading group data.",
+                ),
+              );
+            } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
+              return Center(
+                child: TopCenteredMessage(message: "No groups created yet."),
+              );
+            }
+            return GroupTile(group: snapshot.data![0]);
+            //return ListView.builder()
+          },
+        ),
+        FullWidthButton(text: "Create Group", onPressed: () {}),
+      ],
+    );
   }
 }

lib/presentation/widgets/full_width_button.dart

@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+import 'package:game_tracker/core/custom_theme.dart';
+
+class FullWidthButton extends StatelessWidget {
+  const FullWidthButton({super.key, required this.text, this.onPressed});
+
+  final String text;
+  final VoidCallback? onPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    return ElevatedButton(
+      onPressed: onPressed,
+      style: ElevatedButton.styleFrom(
+        minimumSize: Size(MediaQuery.of(context).size.width * 0.8, 60),
+        backgroundColor: CustomTheme.primaryColor,
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+      ),
+      child: Text(
+        text,
+        style: const TextStyle(
+          fontWeight: FontWeight.w500,
+          fontSize: 22,
+          color: Colors.white,
+        ),
+      ),
+    );
+  }
+}

lib/presentation/widgets/group_tile.dart

@@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+//import 'package:game_tracker/data/dto/group.dart';
+
+class Group {
+  final String id;
+  final String name;
+  final List<Player> members;
+
+  Group({required this.id, required this.name, required this.members});
+}
+
+class Player {
+  final String id;
+  final String name;
+
+  Player({required this.id, required this.name});
+}
+
+class GroupTile extends StatelessWidget {
+  const GroupTile({super.key, required this.group});
+
+  final Group group;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: Column(
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Text("${group.name}", overflow: TextOverflow.ellipsis),
+              Text("${group.members.length}"),
+              Icon(Icons.group),
+            ],
+          ),
+          Wrap(
+            spacing: 8.0,
+            runSpacing: -4.0,
+            children: <Widget>[
+              for (var member in group.members)
+                Container(
+                  color: Colors.grey,
+                  padding: const EdgeInsets.all(4.0),
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(12),
+                  ),
+                  child: Text(member.name),
+                ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/presentation/widgets/top_centered_message.dart

@@ -1,14 +1,21 @@
 import 'package:flutter/material.dart';
 
-Widget TopCenteredMessage(String message) {
+class TopCenteredMessage extends StatelessWidget {
+  const TopCenteredMessage({super.key, required this.message});
+
+  final String message;
+
+  @override
+  Widget build(BuildContext context) {
     return Container(
-    padding: EdgeInsets.only(top: 100),
+      padding: const EdgeInsets.only(top: 100),
-    margin: EdgeInsets.only(left: 10, right: 10),
+      margin: const EdgeInsets.symmetric(horizontal: 10),
       alignment: Alignment.topCenter,
       child: Text(
-      "$message",
+        message,
-      style: TextStyle(fontSize: 20),
+        style: const TextStyle(fontSize: 20),
         textAlign: TextAlign.center,
       ),
     );
   }
+}