From 2ee4d8e6fa3dd36de8810703c6d09c44d0fdf427 Mon Sep 17 00:00:00 2001 From: mathiskirchner Date: Fri, 14 Nov 2025 20:58:01 +0100 Subject: [PATCH] implemented basic layout & functionality for add group button & group tiles --- .../views/main_menu/groups_view.dart | 82 ++++++++++++++++++- .../widgets/full_width_button.dart | 29 +++++++ lib/presentation/widgets/group_tile.dart | 56 +++++++++++++ .../widgets/top_centered_message.dart | 29 ++++--- 4 files changed, 182 insertions(+), 14 deletions(-) create mode 100644 lib/presentation/widgets/full_width_button.dart create mode 100644 lib/presentation/widgets/group_tile.dart diff --git a/lib/presentation/views/main_menu/groups_view.dart b/lib/presentation/views/main_menu/groups_view.dart index 485d516..a3e66d3 100644 --- a/lib/presentation/views/main_menu/groups_view.dart +++ b/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 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 createState() => _GroupsViewState(); +} + +class _GroupsViewState extends State { + Future> _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> 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: () {}), + ], + ); } } diff --git a/lib/presentation/widgets/full_width_button.dart b/lib/presentation/widgets/full_width_button.dart new file mode 100644 index 0000000..6df700b --- /dev/null +++ b/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, + ), + ), + ); + } +} diff --git a/lib/presentation/widgets/group_tile.dart b/lib/presentation/widgets/group_tile.dart new file mode 100644 index 0000000..5959f04 --- /dev/null +++ b/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 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: [ + 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), + ), + ], + ), + ], + ), + ); + } +} diff --git a/lib/presentation/widgets/top_centered_message.dart b/lib/presentation/widgets/top_centered_message.dart index 6fe34ff..df8dcb1 100644 --- a/lib/presentation/widgets/top_centered_message.dart +++ b/lib/presentation/widgets/top_centered_message.dart @@ -1,14 +1,21 @@ import 'package:flutter/material.dart'; -Widget TopCenteredMessage(String message) { - return Container( - padding: EdgeInsets.only(top: 100), - margin: EdgeInsets.only(left: 10, right: 10), - alignment: Alignment.topCenter, - child: Text( - "$message", - style: TextStyle(fontSize: 20), - textAlign: TextAlign.center, - ), - ); +class TopCenteredMessage extends StatelessWidget { + const TopCenteredMessage({super.key, required this.message}); + + final String message; + + @override + Widget build(BuildContext context) { + return Container( + padding: const EdgeInsets.only(top: 100), + margin: const EdgeInsets.symmetric(horizontal: 10), + alignment: Alignment.topCenter, + child: Text( + message, + style: const TextStyle(fontSize: 20), + textAlign: TextAlign.center, + ), + ); + } }