added skeletonizer package requirement

lib/presentation/views/main_menu/groups_view.dart

@@ -2,7 +2,9 @@ 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';
+import 'package:skeletonizer/skeletonizer.dart';
 
 class Group {
   final String id;
@@ -28,7 +30,7 @@ class GroupsView extends StatefulWidget {
 
 class _GroupsViewState extends State<GroupsView> {
   Future<List<Group>> _getMockGroups() async {
-    await Future.delayed(const Duration(seconds: 1));
+    await Future.delayed(const Duration(seconds: 4));
     final player1 = Player(id: 'p1', name: 'Felix');
     final player2 = Player(id: 'p2', name: 'Yannick');
     final player3 = Player(id: 'p3', name: 'Mathis');
@@ -38,7 +40,15 @@ class _GroupsViewState extends State<GroupsView> {
       Group(
         id: 'g1',
         name: 'Weekend Warriors',
-        members: [player1, player2, player4],
+        members: [
+          player1,
+          player2,
+          player4,
+          player3,
+          player1,
+          player4,
+          player2,
+        ],
       ),
       Group(id: 'g2', name: 'Strategy Masters', members: [player3, player4]),
       Group(
@@ -46,41 +56,113 @@ class _GroupsViewState extends State<GroupsView> {
         name: 'The Cardboard Crew',
         members: [player1, player2, player3, player4],
       ),
-      Group(id: 'g4', name: 'The Group', members: [player1, player3, player4]),
+      Group(
+        id: 'g4',
+        name: 'Gamers',
+        members: [player1, player3, player1, player4],
+      ),
+      Group(
+        id: 'g4',
+        name: 'The Group',
+        members: [player4, player1, player3, player4, player3],
+      ),
+      Group(
+        id: 'g4',
+        name: 'Friends',
+        members: [player4, player1, player3, player4],
+      ),
+      Group(
+        id: 'g4',
+        name: 'Sample Group',
+        members: [player1, player1, player4, player3],
+      ),
+      Group(
+        id: 'g4',
+        name: 'The Group',
+        members: [player1, player1, player3, player4],
+      ),
+      Group(
+        id: 'g4',
+        name: 'The Best',
+        members: [player1, player3, player1, player4, player1],
+      ),
     ];
   }
 
+  final player = Player(id: 'p1', name: 'Felix');
+  late final List<Group> skeletonData = List.filled(
+    7,
+    Group(
+      id: 'g1',
+      name: 'Weekend Warriors',
+      members: [player, player, player, player],
+    ),
+  );
+
   @override
   Widget build(BuildContext context) {
-    return Column(
+    return SafeArea(
+      child: Stack(
         children: [
-        FutureBuilder(
+          FutureBuilder<List<Group>>(
             future: _getMockGroups(),
-          builder: (BuildContext context, AsyncSnapshot<List<Group>> snapshot) {
+            builder:
-            if (snapshot.connectionState == ConnectionState.waiting) {
+                (BuildContext context, AsyncSnapshot<List<Group>> snapshot) {
-              return Center(
+                  if (snapshot.hasError) {
+                    return const Center(
                       child: TopCenteredMessage(
-                  message: "Data not yet available, show sceleton",
+                        message: 'Error while loading group data.',
                       ),
                     );
-            } 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 Center(child: Text("whatever"));
+                  if (snapshot.connectionState == ConnectionState.done &&
-            //return GroupTile(group: snapshot.data![0]);
+                      (!snapshot.hasData || snapshot.data!.isEmpty)) {
-            //return ListView.builder()
+                    return const Center(
+                      child: TopCenteredMessage(
+                        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[100]!,
+                      to: Colors.grey[400]!,
+                      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,
+                      itemBuilder: (BuildContext context, int index) {
+                        return GroupTile(group: groups[index]);
                       },
                     ),
-        FullWidthButton(text: "Create Group", onPressed: () {}),
+                  );
+                },
+          ),
+
+          // Dein Button bleibt wie gehabt
+          Positioned(
+            bottom: 16,
+            right: 16,
+            child: FullWidthButton(text: 'Create Group', onPressed: () {}),
+          ),
         ],
+      ),
     );
   }
 }

lib/presentation/widgets/full_width_button.dart

@@ -12,7 +12,7 @@ class FullWidthButton extends StatelessWidget {
     return ElevatedButton(
       onPressed: onPressed,
       style: ElevatedButton.styleFrom(
-        minimumSize: Size(MediaQuery.of(context).size.width * 0.8, 60),
+        minimumSize: Size(MediaQuery.of(context).size.width * 0.90, 60),
         backgroundColor: CustomTheme.primaryColor,
         shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
       ),

lib/presentation/widgets/group_tile.dart

@@ -1,20 +1,6 @@
 import 'package:flutter/material.dart';
-//import 'package:game_tracker/data/dto/group.dart';
+import 'package:game_tracker/core/custom_theme.dart';
-
+import 'package:game_tracker/presentation/views/main_menu/groups_view.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});
@@ -24,31 +10,70 @@ class GroupTile extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
+      width: MediaQuery.of(context).size.width * 0.90,
+      margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
+      padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
+      decoration: BoxDecoration(
+        color: CustomTheme.secondaryColor,
+        borderRadius: BorderRadius.circular(12),
+      ),
       child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
-              Text("${group.name}", overflow: TextOverflow.ellipsis),
+              Text(
-              Text("${group.members.length}"),
+                group.name,
-              Icon(Icons.group),
+                overflow: TextOverflow.ellipsis,
+                style: const TextStyle(
+                  fontWeight: FontWeight.bold,
+                  fontSize: 20,
+                  color: Colors.white,
+                ),
+              ),
+              const Spacer(),
+              Text(
+                '${group.members.length}',
+                style: const TextStyle(
+                  fontWeight: FontWeight.w900,
+                  fontSize: 20,
+                  color: Colors.white,
+                ),
+              ),
+              SizedBox(width: 3),
+              const Icon(Icons.group),
             ],
           ),
+          SizedBox(height: 5),
           Wrap(
-            spacing: 8.0,
+            alignment: WrapAlignment.start,
-            runSpacing: -4.0,
+            crossAxisAlignment: WrapCrossAlignment.start,
+            spacing: 12.0,
+            runSpacing: 8.0,
             children: <Widget>[
               for (var member in group.members)
                 Container(
-                  color: Colors.grey,
+                  padding: const EdgeInsets.symmetric(
-                  padding: const EdgeInsets.all(4.0),
+                    vertical: 5,
+                    horizontal: 10,
+                  ),
                   decoration: BoxDecoration(
+                    color: Colors.black38,
                     borderRadius: BorderRadius.circular(12),
                   ),
-                  child: Text(member.name),
+                  child: Text(
+                    member.name,
+                    style: TextStyle(
+                      fontSize: 17,
+                      fontWeight: FontWeight.bold,
+                      color: Colors.white,
+                    ),
+                  ),
                 ),
             ],
           ),
+          SizedBox(height: 2.5),
         ],
       ),
     );

pubspec.yaml

@@ -18,6 +18,7 @@ dependencies:
   drift_flutter: ^0.2.4
   path_provider: ^2.1.5
   provider: ^6.1.5
+  skeletonizer: ^2.1.0+1
 
 dev_dependencies:
   flutter_test: