From d08c79fc262b9298442962285072813a8d145a89 Mon Sep 17 00:00:00 2001 From: mathiskirchner Date: Sat, 15 Nov 2025 20:22:09 +0100 Subject: [PATCH] implemented groups view with create group button --- .../views/main_menu/groups_view.dart | 115 +++++++++++++----- .../widgets/full_width_button.dart | 2 +- lib/presentation/widgets/group_tile.dart | 73 +++++++---- 3 files changed, 134 insertions(+), 56 deletions(-) diff --git a/lib/presentation/views/main_menu/groups_view.dart b/lib/presentation/views/main_menu/groups_view.dart index 70f70dc..76034a6 100644 --- a/lib/presentation/views/main_menu/groups_view.dart +++ b/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 { 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 { 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> 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> 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: () {}), + ), + ], + ), ); } } diff --git a/lib/presentation/widgets/full_width_button.dart b/lib/presentation/widgets/full_width_button.dart index 6df700b..2af6abe 100644 --- a/lib/presentation/widgets/full_width_button.dart +++ b/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)), ), diff --git a/lib/presentation/widgets/group_tile.dart b/lib/presentation/widgets/group_tile.dart index 5959f04..783abcd 100644 --- a/lib/presentation/widgets/group_tile.dart +++ b/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 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: [ 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), ], ), );