lib/core/custom_theme.dart

@@ -5,6 +5,7 @@ class CustomTheme {
   static Color secondaryColor = const Color(0xFFAFA2FF);
   static Color backgroundColor = const Color(0xFF0B0B0B);
   static Color boxColor = const Color(0xFF101010);
+  static Color onBoxColor = const Color(0xFF181818);
   static Color boxBorder = const Color(0xFF272727);
 
   static AppBarTheme appBarTheme = AppBarTheme(

lib/data/dao/group_dao.dart

@@ -14,9 +14,14 @@ class GroupDao extends DatabaseAccessor<AppDatabase> with _$GroupDaoMixin {
   Future<List<Group>> getAllGroups() async {
     final query = select(groupTable);
     final result = await query.get();
-    return result
+    return Future.wait(
-        .map((row) => Group(id: row.id, name: row.name, members: []))
+      result.map((groupData) async {
-        .toList();
+        final members = await db.playerGroupDao.getPlayersOfGroupById(
+          groupId: groupData.id,
+        );
+        return Group(id: groupData.id, name: groupData.name, members: members);
+      }),
+    );
   }
 
   /// Retrieves a [Group] by its [groupId], including its members.
@@ -33,7 +38,8 @@ class GroupDao extends DatabaseAccessor<AppDatabase> with _$GroupDaoMixin {
 
   /// Adds a new group with the given [id] and [name] to the database.
   /// This method also adds the group's members to the [PlayerGroupTable].
-  Future<void> addGroup({required Group group}) async {
+  Future<bool> addGroup({required Group group}) async {
+    if (!await groupExists(groupId: group.id)) {
       await db.transaction(() async {
         await into(
           groupTable,
@@ -54,8 +60,11 @@ class GroupDao extends DatabaseAccessor<AppDatabase> with _$GroupDaoMixin {
         await Future.wait(
           group.members.map((player) => db.playerDao.addPlayer(player: player)),
         );
+        return true;
       });
     }
+    return false;
+  }
 
   /// Deletes the group with the given [id] from the database.
   /// Returns `true` if more than 0 rows were affected, otherwise `false`.

lib/data/dao/player_dao.dart

@@ -26,14 +26,14 @@ class PlayerDao extends DatabaseAccessor<AppDatabase> with _$PlayerDaoMixin {
   /// Adds a new [player] to the database.
   /// If a player with the same ID already exists, updates their name to
   /// the new one.
-  Future<void> addPlayer({required Player player}) async {
+  Future<bool> addPlayer({required Player player}) async {
     if (!await playerExists(playerId: player.id)) {
       await into(
         playerTable,
       ).insert(PlayerTableCompanion.insert(id: player.id, name: player.name));
-    } else {
+      return true;
-      await updatePlayername(playerId: player.id, newName: player.name);
     }
+    return false;
   }
 
   /// Deletes the player with the given [id] from the database.

lib/presentation/views/main_menu/game_history_view.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:game_tracker/core/custom_theme.dart';
-import 'package:game_tracker/presentation/widgets/top_centered_message.dart';
 import 'package:game_tracker/presentation/widgets/double_row_info_tile.dart';
+import 'package:game_tracker/presentation/widgets/top_centered_message.dart';
 
 class GameHistoryView extends StatefulWidget {
   const GameHistoryView({super.key});
@@ -178,9 +178,17 @@ class _GameHistoryViewState extends State<GameHistoryView> {
 
 Widget gameHistoryListView(allGameData, suggestedGameData) {
   if (suggestedGameData.isEmpty && allGameData.isEmpty) {
-    return TopCenteredMessage("Keine Spiele erstellt");
+    return TopCenteredMessage(
+      icon: Icons.info,
+      title: "Info",
+      message: "Keine Spiele erstellt",
+    );
   } else if (suggestedGameData.isEmpty) {
-    return TopCenteredMessage("Kein Spiel mit den Suchparametern gefunden.");
+    return TopCenteredMessage(
+      icon: Icons.search,
+      title: "Info",
+      message: "Kein Spiel mit den Suchparametern gefunden.",
+    );
   }
   return ListView.builder(
     itemCount: suggestedGameData.length,

lib/presentation/views/main_menu/groups_view.dart

@@ -1,10 +1,112 @@
-import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:game_tracker/core/custom_theme.dart';
+import 'package:game_tracker/data/db/database.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/tiles/group_tile.dart';
+import 'package:game_tracker/presentation/widgets/top_centered_message.dart';
+import 'package:provider/provider.dart';
+import 'package:skeletonizer/skeletonizer.dart';
 
-class GroupsView extends StatelessWidget {
+class GroupsView extends StatefulWidget {
   const GroupsView({super.key});
 
+  @override
+  State<GroupsView> createState() => _GroupsViewState();
+}
+
+class _GroupsViewState extends State<GroupsView> {
+  late Future<List<Group>> _allGroupsFuture;
+
+  final player = Player(id: 'p1', name: 'Sample');
+  late final List<Group> skeletonData = List.filled(
+    7,
+    Group(
+      id: '0',
+      name: 'Sample Game',
+      members: [player, player, player, player, player, player],
+    ),
+  );
+
+  @override
+  void initState() {
+    super.initState();
+    final db = Provider.of<AppDatabase>(context, listen: false);
+    _allGroupsFuture = db.groupDao.getAllGroups();
+  }
+
   @override
   Widget build(BuildContext context) {
-    return const Center(child: Text('Groups View'));
+    return Scaffold(
+      backgroundColor: CustomTheme.backgroundColor,
+      body: Stack(
+        alignment: Alignment.center,
+        children: [
+          FutureBuilder<List<Group>>(
+            future: _allGroupsFuture,
+            builder:
+                (BuildContext context, AsyncSnapshot<List<Group>> snapshot) {
+                  if (snapshot.hasError) {
+                    return const Center(
+                      child: TopCenteredMessage(
+                        icon: Icons.report,
+                        title: 'Error',
+                        message: 'Group data couldn\'t\nbe loaded.',
+                      ),
+                    );
+                  }
+                  if (snapshot.connectionState == ConnectionState.done &&
+                      (!snapshot.hasData || snapshot.data!.isEmpty)) {
+                    return const Center(
+                      child: TopCenteredMessage(
+                        icon: Icons.info,
+                        title: 'Info',
+                        message: 'No groups created yet.',
+                      ),
+                    );
+                  }
+                  final bool isLoading =
+                      snapshot.connectionState == ConnectionState.waiting;
+                  final List<Group> groups = isLoading
+                      ? skeletonData
+                      : (snapshot.data ?? []);
+                  return Skeletonizer(
+                    effect: PulseEffect(
+                      from: Colors.grey[800]!,
+                      to: Colors.grey[600]!,
+                      duration: const Duration(milliseconds: 800),
+                    ),
+                    enabled: isLoading,
+                    enableSwitchAnimation: true,
+                    switchAnimationConfig: const SwitchAnimationConfig(
+                      duration: Duration(milliseconds: 200),
+                      switchInCurve: Curves.linear,
+                      switchOutCurve: Curves.linear,
+                      transitionBuilder:
+                          AnimatedSwitcher.defaultTransitionBuilder,
+                      layoutBuilder: AnimatedSwitcher.defaultLayoutBuilder,
+                    ),
+                    child: ListView.builder(
+                      padding: const EdgeInsets.only(bottom: 85),
+                      itemCount: groups.length + 1,
+                      itemBuilder: (BuildContext context, int index) {
+                        if (index == groups.length) {
+                          return const SizedBox(height: 60);
+                        }
+                        return GroupTile(group: groups[index]);
+                      },
+                    ),
+                  );
+                },
+          ),
+
+          Positioned(
+            bottom: 80,
+            child: 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.sizeOf(context).width * 0.9, 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/tiles/group_tile.dart

@@ -0,0 +1,81 @@
+import 'package:flutter/material.dart';
+import 'package:game_tracker/core/custom_theme.dart';
+import 'package:game_tracker/data/dto/group.dart';
+import 'package:skeletonizer/skeletonizer.dart';
+
+class GroupTile extends StatelessWidget {
+  const GroupTile({super.key, required this.group});
+
+  final Group group;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+      padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
+      decoration: BoxDecoration(
+        color: CustomTheme.boxColor,
+        border: Border.all(color: CustomTheme.boxBorder),
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Text(
+                group.name,
+                overflow: TextOverflow.ellipsis,
+                style: const TextStyle(
+                  fontWeight: FontWeight.bold,
+                  fontSize: 18,
+                ),
+              ),
+              const Spacer(),
+              Text(
+                '${group.members.length}',
+                style: const TextStyle(
+                  fontWeight: FontWeight.w900,
+                  fontSize: 18,
+                ),
+              ),
+              const SizedBox(width: 3),
+              const Icon(Icons.group, size: 22),
+            ],
+          ),
+          const SizedBox(height: 5),
+          Wrap(
+            alignment: WrapAlignment.start,
+            crossAxisAlignment: WrapCrossAlignment.start,
+            spacing: 12.0,
+            runSpacing: 8.0,
+            children: <Widget>[
+              for (var member in group.members)
+                Container(
+                  padding: const EdgeInsets.symmetric(
+                    vertical: 5,
+                    horizontal: 10,
+                  ),
+                  decoration: BoxDecoration(
+                    color: CustomTheme.onBoxColor,
+                    borderRadius: BorderRadius.circular(12),
+                  ),
+                  child: Skeleton.ignore(
+                    child: Text(
+                      member.name,
+                      style: const TextStyle(
+                        fontSize: 14,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                  ),
+                ),
+            ],
+          ),
+          const SizedBox(height: 2.5),
+        ],
+      ),
+    );
+  }
+}

lib/presentation/widgets/top_centered_message.dart

@@ -1,14 +1,39 @@
 import 'package:flutter/material.dart';
 
-Widget TopCenteredMessage(String message) {
+class TopCenteredMessage extends StatelessWidget {
+  const TopCenteredMessage({
+    super.key,
+    required this.icon,
+    required this.title,
+    required this.message,
+  });
+
+  final String title;
+  final String message;
+  final IconData icon;
+
+  @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(
+      child: Column(
-      "$message",
+        children: [
-      style: TextStyle(fontSize: 20),
+          Icon(icon, size: 45),
+          const SizedBox(height: 10),
+          Text(
+            title,
+            style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
             textAlign: TextAlign.center,
           ),
+          Text(
+            message,
+            style: const TextStyle(fontSize: 16),
+            textAlign: TextAlign.center,
+          ),
+        ],
+      ),
     );
   }
+}

test/db_tests/group_test.dart

@@ -35,11 +35,36 @@ void main() {
   tearDown(() async {
     await database.close();
   });
+  group('group tests', () {
+    test('all groups get fetched correctly', () async {
+      final testgroup2 = Group(
+        id: 'gr2',
+        name: 'Second Group',
+        members: [player2, player3, player4],
+      );
+      await database.groupDao.addGroup(group: testgroup);
+      await database.groupDao.addGroup(group: testgroup2);
+
+      final allGroups = await database.groupDao.getAllGroups();
+      expect(allGroups.length, 2);
+
+      final fetchedGroup1 = allGroups.firstWhere((g) => g.id == testgroup.id);
+      expect(fetchedGroup1.name, testgroup.name);
+      expect(fetchedGroup1.members.length, testgroup.members.length);
+      expect(fetchedGroup1.members.elementAt(0).id, player1.id);
+
+      final fetchedGroup2 = allGroups.firstWhere((g) => g.id == testgroup2.id);
+      expect(fetchedGroup2.name, testgroup2.name);
+      expect(fetchedGroup2.members.length, testgroup2.members.length);
+      expect(fetchedGroup2.members.elementAt(0).id, player2.id);
+    });
 
     test('group and group members gets added correctly', () async {
       await database.groupDao.addGroup(group: testgroup);
 
-    final result = await database.groupDao.getGroupById(groupId: testgroup.id);
+      final result = await database.groupDao.getGroupById(
+        groupId: testgroup.id,
+      );
 
       expect(result.id, testgroup.id);
       expect(result.name, testgroup.name);
@@ -75,7 +100,9 @@ void main() {
         newName: newGroupName,
       );
 
-    final result = await database.groupDao.getGroupById(groupId: testgroup.id);
+      final result = await database.groupDao.getGroupById(
+        groupId: testgroup.id,
+      );
       expect(result.name, newGroupName);
     });
 
@@ -103,7 +130,9 @@ void main() {
 
       expect(playerAdded, true);
 
-    final result = await database.groupDao.getGroupById(groupId: testgroup.id);
+      final result = await database.groupDao.getGroupById(
+        groupId: testgroup.id,
+      );
       expect(result.members.length, testgroup.members.length + 1);
 
       final addedPlayer = result.members.firstWhere((p) => p.id == player4.id);
@@ -121,7 +150,9 @@ void main() {
       );
       expect(removed, true);
 
-    final result = await database.groupDao.getGroupById(groupId: testgroup.id);
+      final result = await database.groupDao.getGroupById(
+        groupId: testgroup.id,
+      );
       expect(result.members.length, testgroup.members.length - 1);
 
       final playerExists = result.members.any((p) => p.id == playerToRemove.id);
@@ -145,4 +176,5 @@ void main() {
       final finalCount = await database.groupDao.getGroupCount();
       expect(finalCount, 0);
     });
+  });
 }

test/db_tests/player_test.dart

@@ -24,6 +24,25 @@ void main() {
   });
 
   group('player tests', () {
+    test('all players get fetched correctly', () async {
+      final testPlayer2 = Player(id: 'gr2', name: 'Second Group');
+      await database.playerDao.addPlayer(player: testPlayer);
+      await database.playerDao.addPlayer(player: testPlayer2);
+
+      final allPlayers = await database.playerDao.getAllPlayers();
+      expect(allPlayers.length, 2);
+
+      final fetchedPlayer1 = allPlayers.firstWhere(
+        (g) => g.id == testPlayer.id,
+      );
+      expect(fetchedPlayer1.name, testPlayer.name);
+
+      final fetchedPlayer2 = allPlayers.firstWhere(
+        (g) => g.id == testPlayer2.id,
+      );
+      expect(fetchedPlayer2.name, testPlayer2.name);
+    });
+
     test('players get inserted correcly ', () async {
       await database.playerDao.addPlayer(player: testPlayer);
       final result = await database.playerDao.getPlayerById(