lib/presentation/views/main_menu/groups_view.dart

@@ -2,6 +2,7 @@ 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 Group {
@@ -38,7 +39,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 +55,85 @@ 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],
+      ),
     ];
   }
 
   @override
   Widget build(BuildContext context) {
-    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 Center(child: Text("whatever"));
-            //return GroupTile(group: snapshot.data![0]);
-            //return ListView.builder()
-          },
-        ),
-        FullWidthButton(text: "Create Group", onPressed: () {}),
-      ],
+    return SafeArea(
+      child: Stack(
+        children: [
+          FutureBuilder(
+            future: _getMockGroups(),
+            builder:
+                (BuildContext context, AsyncSnapshot<List<Group>> snapshot) {
+                  if (snapshot.connectionState == ConnectionState.waiting) {
+                    return const Center(
+                      child: TopCenteredMessage(
+                        message: 'Data not yet available, show sceleton',
+                      ),
+                    );
+                  } else if (snapshot.hasError) {
+                    return const Center(
+                      child: TopCenteredMessage(
+                        message: 'Error while loading group data.',
+                      ),
+                    );
+                  } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
+                    return const Center(
+                      child: TopCenteredMessage(
+                        message: 'No groups created yet.',
+                      ),
+                    );
+                  }
+                  //return Center(child: Text('whatever'));
+                  //return GroupTile(group: snapshot.data![0]);
+                  return ListView.builder(
+                    padding: const EdgeInsets.only(bottom: 85),
+                    itemCount: snapshot.data!.length,
+                    itemBuilder: (BuildContext context, int index) {
+                      return GroupTile(group: snapshot.data![index]);
+                    },
+                  );
+                },
+          ),
+          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';
-
-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});
-}
+import 'package:game_tracker/core/custom_theme.dart';
+import 'package:game_tracker/presentation/views/main_menu/groups_view.dart';
 
 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("${group.members.length}"),
-              Icon(Icons.group),
+              Text(
+                group.name,
+                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,
-            runSpacing: -4.0,
+            alignment: WrapAlignment.start,
+            crossAxisAlignment: WrapCrossAlignment.start,
+            spacing: 12.0,
+            runSpacing: 8.0,
             children: <Widget>[
               for (var member in group.members)
                 Container(
-                  color: Colors.grey,
-                  padding: const EdgeInsets.all(4.0),
+                  padding: const EdgeInsets.symmetric(
+                    vertical: 5,
+                    horizontal: 10,
+                  ),
                   decoration: BoxDecoration(
+                    color: Colors.black26,
                     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),
         ],
       ),
     );