Merge branch 'development' into enhancement/18-navbar-alignment

lib/presentation/views/main_menu/create_group_view.dart

@@ -0,0 +1,309 @@
+import 'package:flutter/material.dart' hide ButtonStyle;
+import 'package:game_tracker/core/custom_theme.dart';
+import 'package:game_tracker/core/enums.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/buttons/custom_width_button.dart';
+import 'package:game_tracker/presentation/widgets/custom_search_bar.dart';
+import 'package:game_tracker/presentation/widgets/text_input_field.dart';
+import 'package:game_tracker/presentation/widgets/tiles/text_icon_list_tile.dart';
+import 'package:game_tracker/presentation/widgets/tiles/text_icon_tile.dart';
+import 'package:game_tracker/presentation/widgets/top_centered_message.dart';
+import 'package:provider/provider.dart';
+import 'package:skeletonizer/skeletonizer.dart';
+
+class CreateGroupView extends StatefulWidget {
+  const CreateGroupView({super.key});
+
+  @override
+  State<CreateGroupView> createState() => _CreateGroupViewState();
+}
+
+class _CreateGroupViewState extends State<CreateGroupView> {
+  List<Player> selectedPlayers = [];
+  List<Player> suggestedPlayers = [];
+  List<Player> allPlayers = [];
+  late final AppDatabase db;
+  late Future<List<Player>> _allPlayersFuture;
+  late final List<Player> skeletonData = List.filled(
+    7,
+    Player(name: 'Player 0'),
+  );
+  final _groupNameController = TextEditingController();
+  final _searchBarController = TextEditingController();
+
+  @override
+  void initState() {
+    super.initState();
+    db = Provider.of<AppDatabase>(context, listen: false);
+    _allPlayersFuture = db.playerDao.getAllPlayers();
+    _allPlayersFuture.then((loadedPlayers) {
+      setState(() {
+        loadedPlayers.sort((a, b) => a.name.compareTo(b.name));
+        allPlayers = [...loadedPlayers];
+        suggestedPlayers = [...loadedPlayers];
+      });
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      child: Scaffold(
+        backgroundColor: CustomTheme.backgroundColor,
+        appBar: AppBar(
+          backgroundColor: CustomTheme.backgroundColor,
+          scrolledUnderElevation: 0,
+          title: const Text(
+            'Create new group',
+            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
+          ),
+          centerTitle: true,
+        ),
+        body: Column(
+          mainAxisAlignment: MainAxisAlignment.start,
+          children: [
+            Container(
+              margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+              child: TextInputField(
+                controller: _groupNameController,
+                hintText: 'Group name',
+                onChanged: (value) {
+                  setState(() {});
+                },
+              ),
+            ),
+            Expanded(
+              child: Container(
+                margin: const EdgeInsets.symmetric(
+                  horizontal: 12,
+                  vertical: 10,
+                ),
+                padding: const EdgeInsets.symmetric(
+                  vertical: 10,
+                  horizontal: 10,
+                ),
+                decoration: BoxDecoration(
+                  color: CustomTheme.boxColor,
+                  border: Border.all(color: CustomTheme.boxBorder),
+                  borderRadius: BorderRadius.circular(12),
+                ),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    CustomSearchBar(
+                      controller: _searchBarController,
+                      constraints: const BoxConstraints(
+                        maxHeight: 45,
+                        minHeight: 45,
+                      ),
+                      hintText: 'Search for players',
+                      onChanged: (value) {
+                        setState(() {
+                          if (value.isEmpty) {
+                            suggestedPlayers = allPlayers.where((player) {
+                              return !selectedPlayers.contains(player);
+                            }).toList();
+                          } else {
+                            suggestedPlayers = allPlayers.where((player) {
+                              final bool nameMatches = player.name
+                                  .toLowerCase()
+                                  .contains(value.toLowerCase());
+                              final bool isNotSelected = !selectedPlayers
+                                  .contains(player);
+                              return nameMatches && isNotSelected;
+                            }).toList();
+                          }
+                        });
+                      },
+                    ),
+                    const SizedBox(height: 10),
+                    Text(
+                      'Ausgewählte Spieler: (${selectedPlayers.length})',
+                      style: const TextStyle(
+                        fontSize: 16,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                    const SizedBox(height: 10),
+                    Wrap(
+                      alignment: WrapAlignment.start,
+                      crossAxisAlignment: WrapCrossAlignment.start,
+                      spacing: 8.0,
+                      runSpacing: 8.0,
+                      children: <Widget>[
+                        for (var player in selectedPlayers)
+                          TextIconTile(
+                            text: player.name,
+                            onIconTap: () {
+                              setState(() {
+                                final currentSearch = _searchBarController.text
+                                    .toLowerCase();
+                                selectedPlayers.remove(player);
+                                if (currentSearch.isEmpty ||
+                                    player.name.toLowerCase().contains(
+                                      currentSearch,
+                                    )) {
+                                  suggestedPlayers.add(player);
+                                  suggestedPlayers.sort(
+                                    (a, b) => a.name.compareTo(b.name),
+                                  );
+                                }
+                              });
+                            },
+                          ),
+                      ],
+                    ),
+                    const SizedBox(height: 10),
+                    const Text(
+                      'Alle Spieler:',
+                      style: TextStyle(
+                        fontSize: 16,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                    const SizedBox(height: 10),
+                    FutureBuilder(
+                      future: _allPlayersFuture,
+                      builder:
+                          (
+                            BuildContext context,
+                            AsyncSnapshot<List<Player>> snapshot,
+                          ) {
+                            if (snapshot.hasError) {
+                              return const Center(
+                                child: TopCenteredMessage(
+                                  icon: Icons.report,
+                                  title: 'Error',
+                                  message: 'Player data couldn\'t\nbe loaded.',
+                                ),
+                              );
+                            }
+                            if (snapshot.connectionState ==
+                                    ConnectionState.done &&
+                                (!snapshot.hasData ||
+                                    snapshot.data!.isEmpty ||
+                                    (selectedPlayers.isEmpty &&
+                                        allPlayers.isEmpty))) {
+                              return const Center(
+                                child: TopCenteredMessage(
+                                  icon: Icons.info,
+                                  title: 'Info',
+                                  message: 'No players created yet.',
+                                ),
+                              );
+                            }
+                            final bool isLoading =
+                                snapshot.connectionState ==
+                                ConnectionState.waiting;
+                            return Expanded(
+                              child: 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:
+                                    (suggestedPlayers.isEmpty &&
+                                        allPlayers.isNotEmpty)
+                                    ? TopCenteredMessage(
+                                        icon: Icons.info,
+                                        title: 'Info',
+                                        message:
+                                            (selectedPlayers.length ==
+                                                allPlayers.length)
+                                            ? 'No more players to add.'
+                                            : 'No players found with that name.',
+                                      )
+                                    : ListView.builder(
+                                        itemCount: suggestedPlayers.length,
+                                        itemBuilder:
+                                            (BuildContext context, int index) {
+                                              return TextIconListTile(
+                                                text: suggestedPlayers[index]
+                                                    .name,
+                                                onPressed: () {
+                                                  setState(() {
+                                                    if (!selectedPlayers.contains(
+                                                      suggestedPlayers[index],
+                                                    )) {
+                                                      selectedPlayers.add(
+                                                        suggestedPlayers[index],
+                                                      );
+                                                      selectedPlayers.sort(
+                                                        (a, b) => a.name
+                                                            .compareTo(b.name),
+                                                      );
+                                                      suggestedPlayers.remove(
+                                                        suggestedPlayers[index],
+                                                      );
+                                                    }
+                                                  });
+                                                },
+                                              );
+                                            },
+                                      ),
+                              ),
+                            );
+                          },
+                    ),
+                  ],
+                ),
+              ),
+            ),
+            CustomWidthButton(
+              text: 'Create group',
+              sizeRelativeToWidth: 0.95,
+              buttonType: ButtonType.primary,
+              onPressed:
+                  (_groupNameController.text.isEmpty || selectedPlayers.isEmpty)
+                  ? null
+                  : () async {
+                      bool success = await db.groupDao.addGroup(
+                        group: Group(
+                          name: _groupNameController.text,
+                          members: selectedPlayers,
+                        ),
+                      );
+                      if (!context.mounted) return;
+                      if (success) {
+                        _groupNameController.clear();
+                        _searchBarController.clear();
+                        selectedPlayers.clear();
+                        Navigator.pop(context);
+                      } else {
+                        ScaffoldMessenger.of(context).showSnackBar(
+                          SnackBar(
+                            backgroundColor: CustomTheme.boxColor,
+                            content: const Center(
+                              child: Text(
+                                'Error while creating group, please try again',
+                                style: TextStyle(color: Colors.white),
+                              ),
+                            ),
+                          ),
+                        );
+                      }
+                      setState(() {});
+                    },
+            ),
+            const SizedBox(height: 20),
+          ],
+        ),
+      ),
+    );
+  }
+}

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/tiles/double_row_info_tile.dart';
 import 'package:game_tracker/presentation/widgets/top_centered_message.dart';
-import 'package:game_tracker/presentation/widgets/double_row_info_tile.dart';
 
 class GameHistoryView extends StatefulWidget {
   const GameHistoryView({super.key});
@@ -134,16 +134,16 @@ class _GameHistoryViewState extends State<GameHistoryView> {
         children: [
           Column(
             children: [
-              Container(margin: EdgeInsets.only(bottom: 75)),
+              Container(margin: const EdgeInsets.only(bottom: 75)),
               Expanded(
                 child: gameHistoryListView(allGameData, suggestedGameData),
               ),
             ],
           ),
           Container(
-            margin: EdgeInsets.only(top: 10, bottom: 10, left: 10, right: 10),
+            margin: const EdgeInsets.only(top: 10, bottom: 10, left: 10, right: 10),
             child: SearchBar(
-              leading: Icon(Icons.search),
+              leading: const Icon(Icons.search),
               onChanged: (value) {
                 if (value.isEmpty) {
                   setState(() {
@@ -178,18 +178,26 @@ class _GameHistoryViewState extends State<GameHistoryView> {
 
 Widget gameHistoryListView(allGameData, suggestedGameData) {
   if (suggestedGameData.isEmpty && allGameData.isEmpty) {
-    return TopCenteredMessage("Keine Spiele erstellt");
+    return const TopCenteredMessage(
+      icon: Icons.info,
+      title: 'Info',
+      message: 'Keine Spiele erstellt',
+    );
   } else if (suggestedGameData.isEmpty) {
-    return TopCenteredMessage("Kein Spiel mit den Suchparametern gefunden.");
+    return const TopCenteredMessage(
+      icon: Icons.search,
+      title: 'Info',
+      message: 'Kein Spiel mit den Suchparametern gefunden.',
+    );
   }
   return ListView.builder(
     itemCount: suggestedGameData.length,
     itemBuilder: (context, index) {
       final currentGame = suggestedGameData[index];
       return doubleRowInfoTile(
-        currentGame['game'] + ": ",
+        currentGame['game'] + ': ',
         currentGame['title'],
-        currentGame['players'].toString() + " Spieler",
+        "${currentGame['players']} Spieler",
         currentGame['group'],
         currentGame['date'],
       );

lib/presentation/views/main_menu/groups_view.dart

@@ -1,10 +1,129 @@
-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/views/main_menu/create_group_view.dart';
+import 'package:game_tracker/presentation/widgets/buttons/custom_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;
+  late final AppDatabase db;
+
+  final player = Player(name: 'Skeleton Player');
+  late final List<Group> skeletonData = List.filled(
+    7,
+    Group(
+      name: 'Skeleton Game',
+      members: [player, player, player, player, player, player],
+    ),
+  );
+
+  @override
+  void initState() {
+    super.initState();
+    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: CustomWidthButton(
+              text: 'Create Group',
+              sizeRelativeToWidth: 0.90,
+              onPressed: () async {
+                await Navigator.push(
+                  context,
+                  MaterialPageRoute(
+                    builder: (context) {
+                      return const CreateGroupView();
+                    },
+                  ),
+                );
+                setState(() {
+                  _allGroupsFuture = db.groupDao.getAllGroups();
+                });
+              },
+            ),
+          ),
+        ],
+      ),
+    );
   }
 }

lib/presentation/views/main_menu/home_view.dart

@@ -1,10 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:game_tracker/data/db/database.dart';
-import 'package:game_tracker/presentation/widgets/game_tile.dart';
-import 'package:game_tracker/presentation/widgets/quick_create_button.dart';
+import 'package:game_tracker/presentation/widgets/buttons/quick_create_button.dart';
+import 'package:game_tracker/presentation/widgets/tiles/game_tile.dart';
 import 'package:game_tracker/presentation/widgets/tiles/info_tile.dart';
 import 'package:game_tracker/presentation/widgets/tiles/quick_info_tile.dart';
 import 'package:provider/provider.dart';
+import 'package:skeletonizer/skeletonizer.dart';
 
 class HomeView extends StatefulWidget {
   const HomeView({super.key});
@@ -16,6 +17,7 @@ class HomeView extends StatefulWidget {
 class _HomeViewState extends State<HomeView> {
   late Future<int> _gameCountFuture;
   late Future<int> _groupCountFuture;
+  bool isLoading = true;
 
   @override
   initState() {
@@ -23,120 +25,165 @@ class _HomeViewState extends State<HomeView> {
     final db = Provider.of<AppDatabase>(context, listen: false);
     _gameCountFuture = db.gameDao.getGameCount();
     _groupCountFuture = db.groupDao.getGroupCount();
+
+    Future.wait([_gameCountFuture, _groupCountFuture]).then((_) async {
+      await Future.delayed(const Duration(milliseconds: 50));
+      if (mounted) {
+        setState(() {
+          isLoading = false;
+        });
+      }
+    });
   }
 
   @override
   Widget build(BuildContext context) {
     return LayoutBuilder(
       builder: (BuildContext context, BoxConstraints constraints) {
-        return SingleChildScrollView(
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.center,
-            children: [
-              Row(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  FutureBuilder<int>(
-                    future: _gameCountFuture,
-                    builder: (context, snapshot) {
-                      final int count = (snapshot.hasData) ? snapshot.data! : 0;
-                      return QuickInfoTile(
-                        width: constraints.maxWidth * 0.45,
-                        height: constraints.maxHeight * 0.15,
-                        title: 'Games',
-                        icon: Icons.groups_rounded,
-                        value: count,
-                      );
-                    },
-                  ),
-                  SizedBox(width: constraints.maxWidth * 0.05),
-                  FutureBuilder<int>(
-                    future: _groupCountFuture,
-                    builder: (context, snapshot) {
-                      final int count =
-                          (snapshot.connectionState == ConnectionState.done &&
-                              snapshot.hasData)
-                          ? snapshot.data!
-                          : 0;
-                      return QuickInfoTile(
-                        width: constraints.maxWidth * 0.45,
-                        height: constraints.maxHeight * 0.15,
-                        title: 'Groups',
-                        icon: Icons.groups_rounded,
-                        value: count,
-                      );
-                    },
-                  ),
-                ],
-              ),
-              Padding(
-                padding: const EdgeInsets.symmetric(vertical: 16.0),
-                child: InfoTile(
-                  width: constraints.maxWidth * 0.95,
-                  title: 'Recent Games',
-                  icon: Icons.timer,
-                  content: const Padding(
-                    padding: EdgeInsets.symmetric(horizontal: 40.0),
-                    child: Column(
-                      mainAxisAlignment: MainAxisAlignment.start,
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        GameTile(
-                          gameTitle: 'Gamenight',
-                          gameType: 'Cabo',
-                          ruleset: 'Lowest Points',
-                          players: '5 Players',
-                          winner: 'Leonard',
-                        ),
-                        Padding(
-                          padding: EdgeInsets.symmetric(vertical: 8.0),
-                          child: Divider(),
-                        ),
-                        GameTile(
-                          gameTitle: 'Schoolbreak',
-                          gameType: 'Uno',
-                          ruleset: 'Highest Points',
-                          players: 'The Gang',
-                          winner: 'Lina',
-                        ),
-                        SizedBox(height: 8),
-                      ],
-                    ),
-                  ),
-                ),
-              ),
-              InfoTile(
-                width: constraints.maxWidth * 0.95,
-                title: 'Quick Create',
-                icon: Icons.add_box_rounded,
-                content: Column(
-                  spacing: 8,
+        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: SingleChildScrollView(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.center,
                   children: [
-                    Row(
-                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                      children: [
-                        QuickCreateButton(text: 'Category 1', onPressed: () {}),
-                        QuickCreateButton(text: 'Category 2', onPressed: () {}),
-                      ],
+                    FutureBuilder<int>(
+                      future: _gameCountFuture,
+                      builder: (context, snapshot) {
+                        final int count = (snapshot.hasData)
+                            ? snapshot.data!
+                            : 0;
+                        return QuickInfoTile(
+                          width: constraints.maxWidth * 0.45,
+                          height: constraints.maxHeight * 0.15,
+                          title: 'Games',
+                          icon: Icons.groups_rounded,
+                          value: count,
+                        );
+                      },
                     ),
-                    Row(
-                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                      children: [
-                        QuickCreateButton(text: 'Category 3', onPressed: () {}),
-                        QuickCreateButton(text: 'Category 4', onPressed: () {}),
-                      ],
-                    ),
-                    Row(
-                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                      children: [
-                        QuickCreateButton(text: 'Category 5', onPressed: () {}),
-                        QuickCreateButton(text: 'Category 6', onPressed: () {}),
-                      ],
+                    SizedBox(width: constraints.maxWidth * 0.05),
+                    FutureBuilder<int>(
+                      future: _groupCountFuture,
+                      builder: (context, snapshot) {
+                        final int count =
+                            (snapshot.connectionState == ConnectionState.done &&
+                                snapshot.hasData)
+                            ? snapshot.data!
+                            : 0;
+                        return QuickInfoTile(
+                          width: constraints.maxWidth * 0.45,
+                          height: constraints.maxHeight * 0.15,
+                          title: 'Groups',
+                          icon: Icons.groups_rounded,
+                          value: count,
+                        );
+                      },
                     ),
                   ],
                 ),
-              ),
-            ],
+                Padding(
+                  padding: const EdgeInsets.symmetric(vertical: 16.0),
+                  child: InfoTile(
+                    width: constraints.maxWidth * 0.95,
+                    title: 'Recent Games',
+                    icon: Icons.timer,
+                    content: const Padding(
+                      padding: EdgeInsets.symmetric(horizontal: 40.0),
+                      child: Column(
+                        mainAxisAlignment: MainAxisAlignment.start,
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          GameTile(
+                            gameTitle: 'Gamenight',
+                            gameType: 'Cabo',
+                            ruleset: 'Lowest Points',
+                            players: '5 Players',
+                            winner: 'Leonard',
+                          ),
+                          Padding(
+                            padding: EdgeInsets.symmetric(vertical: 8.0),
+                            child: Divider(),
+                          ),
+                          GameTile(
+                            gameTitle: 'Schoolbreak',
+                            gameType: 'Uno',
+                            ruleset: 'Highest Points',
+                            players: 'The Gang',
+                            winner: 'Lina',
+                          ),
+                          SizedBox(height: 8),
+                        ],
+                      ),
+                    ),
+                  ),
+                ),
+                InfoTile(
+                  width: constraints.maxWidth * 0.95,
+                  title: 'Quick Create',
+                  icon: Icons.add_box_rounded,
+                  content: Column(
+                    spacing: 8,
+                    children: [
+                      Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                        children: [
+                          QuickCreateButton(
+                            text: 'Category 1',
+                            onPressed: () {},
+                          ),
+                          QuickCreateButton(
+                            text: 'Category 2',
+                            onPressed: () {},
+                          ),
+                        ],
+                      ),
+                      Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                        children: [
+                          QuickCreateButton(
+                            text: 'Category 3',
+                            onPressed: () {},
+                          ),
+                          QuickCreateButton(
+                            text: 'Category 4',
+                            onPressed: () {},
+                          ),
+                        ],
+                      ),
+                      Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                        children: [
+                          QuickCreateButton(
+                            text: 'Category 5',
+                            onPressed: () {},
+                          ),
+                          QuickCreateButton(
+                            text: 'Category 6',
+                            onPressed: () {},
+                          ),
+                        ],
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
           ),
         );
       },

lib/presentation/widgets/buttons/custom_width_button.dart

@@ -0,0 +1,120 @@
+import 'package:flutter/material.dart';
+import 'package:game_tracker/core/custom_theme.dart';
+import 'package:game_tracker/core/enums.dart';
+
+class CustomWidthButton extends StatelessWidget {
+  const CustomWidthButton({
+    super.key,
+    required this.text,
+    this.buttonType = ButtonType.primary,
+    required this.sizeRelativeToWidth,
+    this.onPressed,
+  });
+
+  final String text;
+  final double sizeRelativeToWidth;
+  final VoidCallback? onPressed;
+  final ButtonType buttonType;
+
+  @override
+  Widget build(BuildContext context) {
+    final Color buttonBackgroundColor;
+    final Color disabledBackgroundColor;
+    final Color borderSideColor;
+    final Color textcolor;
+    final Color disabledTextColor;
+
+    if (buttonType == ButtonType.primary) {
+      textcolor = Colors.white;
+      disabledTextColor = Color.lerp(textcolor, Colors.black, 0.5)!;
+      buttonBackgroundColor = CustomTheme.primaryColor;
+      disabledBackgroundColor = Color.lerp(
+        buttonBackgroundColor,
+        Colors.black,
+        0.5,
+      )!;
+
+      return ElevatedButton(
+        onPressed: onPressed,
+        style: ElevatedButton.styleFrom(
+          foregroundColor: textcolor,
+          disabledForegroundColor: disabledTextColor,
+          backgroundColor: buttonBackgroundColor,
+          disabledBackgroundColor: disabledBackgroundColor,
+          animationDuration: const Duration(),
+          minimumSize: Size(
+            MediaQuery.sizeOf(context).width * sizeRelativeToWidth,
+            60,
+          ),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(12),
+          ),
+        ),
+        child: Text(
+          text,
+          style: const TextStyle(fontWeight: FontWeight.w500, fontSize: 22),
+        ),
+      );
+    } else if (buttonType == ButtonType.secondary) {
+      textcolor = CustomTheme.primaryColor;
+      disabledTextColor = Color.lerp(textcolor, Colors.black, 0.5)!;
+      buttonBackgroundColor = Colors.transparent;
+      disabledBackgroundColor = Colors.transparent;
+      borderSideColor = onPressed != null
+          ? CustomTheme.primaryColor
+          : Color.lerp(CustomTheme.primaryColor, Colors.black, 0.5)!;
+
+      return OutlinedButton(
+        onPressed: onPressed,
+        style: OutlinedButton.styleFrom(
+          foregroundColor: textcolor,
+          disabledForegroundColor: disabledTextColor,
+          backgroundColor: buttonBackgroundColor,
+          disabledBackgroundColor: disabledBackgroundColor,
+          animationDuration: const Duration(),
+          minimumSize: Size(
+            MediaQuery.sizeOf(context).width * sizeRelativeToWidth,
+            60,
+          ),
+          side: BorderSide(color: borderSideColor, width: 2),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(12),
+          ),
+        ),
+        child: Text(
+          text,
+          style: const TextStyle(fontWeight: FontWeight.w500, fontSize: 22),
+        ),
+      );
+    } else {
+      textcolor = CustomTheme.primaryColor;
+      disabledTextColor = Color.lerp(
+        CustomTheme.primaryColor,
+        Colors.black,
+        0.5,
+      )!;
+      buttonBackgroundColor = Colors.transparent;
+      disabledBackgroundColor = Colors.transparent;
+
+      return TextButton(
+        onPressed: onPressed,
+        style: TextButton.styleFrom(
+          foregroundColor: textcolor,
+          disabledForegroundColor: disabledTextColor,
+          backgroundColor: buttonBackgroundColor,
+          disabledBackgroundColor: disabledBackgroundColor,
+          animationDuration: const Duration(),
+          minimumSize: Size(
+            MediaQuery.sizeOf(context).width * sizeRelativeToWidth,
+            60,
+          ),
+          side: const BorderSide(style: BorderStyle.none),
+        ),
+        child: Text(
+          text,
+          style: const TextStyle(fontWeight: FontWeight.w500, fontSize: 22),
+        ),
+      );
+    }
+  }
+}

lib/presentation/widgets/custom_search_bar.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+import 'package:game_tracker/core/custom_theme.dart';
+
+class CustomSearchBar extends StatelessWidget {
+  final TextEditingController controller;
+  final String hintText;
+  final ValueChanged<String>? onChanged;
+  final BoxConstraints? constraints;
+
+  const CustomSearchBar({
+    super.key,
+    required this.controller,
+    required this.hintText,
+    this.onChanged,
+    this.constraints,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return SearchBar(
+      controller: controller,
+      constraints:
+          constraints ?? const BoxConstraints(maxHeight: 45, minHeight: 45),
+      hintText: hintText,
+      onChanged: onChanged,
+      hintStyle: WidgetStateProperty.all(const TextStyle(fontSize: 16)),
+      leading: const Icon(Icons.search),
+      backgroundColor: WidgetStateProperty.all(CustomTheme.boxColor),
+      side: WidgetStateProperty.all(BorderSide(color: CustomTheme.boxBorder)),
+      shape: WidgetStateProperty.all(
+        RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+      ),
+      elevation: WidgetStateProperty.all(0),
+    );
+  }
+}

lib/presentation/widgets/text_input_field.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:game_tracker/core/custom_theme.dart';
+
+class TextInputField extends StatelessWidget {
+  final TextEditingController controller;
+  final ValueChanged<String>? onChanged;
+  final String hintText;
+
+  const TextInputField({
+    super.key,
+    required this.controller,
+    required this.hintText,
+    this.onChanged,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return TextField(
+      controller: controller,
+      onChanged: onChanged,
+      decoration: InputDecoration(
+        filled: true,
+        fillColor: CustomTheme.boxColor,
+        hintText: hintText,
+        hintStyle: const TextStyle(fontSize: 18),
+        enabledBorder: OutlineInputBorder(
+          borderRadius: const BorderRadius.all(Radius.circular(12)),
+          borderSide: BorderSide(color: CustomTheme.boxBorder),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderRadius: const BorderRadius.all(Radius.circular(12)),
+          borderSide: BorderSide(color: CustomTheme.boxBorder),
+        ),
+        floatingLabelBehavior: FloatingLabelBehavior.never,
+      ),
+    );
+  }
+}

lib/presentation/widgets/tiles/double_row_info_tile.dart

@@ -9,8 +9,8 @@ Widget doubleRowInfoTile(
   String titleLowerRight,
 ) {
   return Container(
-    margin: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
-    padding: EdgeInsets.all(10),
+    margin: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
+    padding: const EdgeInsets.all(10),
     decoration: BoxDecoration(
       borderRadius: BorderRadius.circular(20),
       color: CustomTheme.secondaryColor,
@@ -22,18 +22,18 @@ Widget doubleRowInfoTile(
             Expanded(
               flex: 10,
               child: Text(
-                "$titleOneUpperLeft $titleTwoUpperLeft",
-                style: TextStyle(fontSize: 20),
+                '$titleOneUpperLeft $titleTwoUpperLeft',
+                style: const TextStyle(fontSize: 20),
                 overflow: TextOverflow.ellipsis,
                 maxLines: 1,
               ),
             ),
-            Spacer(),
+            const Spacer(),
             Expanded(
               flex: 3,
               child: Text(
-                "$titleUpperRight",
-                style: TextStyle(fontSize: 20),
+                titleUpperRight,
+                style: const TextStyle(fontSize: 20),
                 overflow: TextOverflow.ellipsis,
                 maxLines: 1,
                 textAlign: TextAlign.end,
@@ -46,18 +46,18 @@ Widget doubleRowInfoTile(
             Expanded(
               flex: 10,
               child: Text(
-                "$titleLowerLeft",
-                style: TextStyle(fontSize: 20),
+                titleLowerLeft,
+                style: const TextStyle(fontSize: 20),
                 overflow: TextOverflow.ellipsis,
                 maxLines: 1,
               ),
             ),
-            Spacer(),
+            const Spacer(),
             Expanded(
               flex: 4,
               child: Text(
-                "$titleLowerRight",
-                style: TextStyle(fontSize: 20),
+                titleLowerRight,
+                style: const TextStyle(fontSize: 20),
                 overflow: TextOverflow.ellipsis,
                 maxLines: 1,
                 textAlign: TextAlign.end,

lib/presentation/widgets/tiles/game_tile.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:game_tracker/core/custom_theme.dart';
+import 'package:skeletonizer/skeletonizer.dart';
 
 class GameTile extends StatefulWidget {
   final String gameTitle;
@@ -48,9 +49,11 @@ class _GameTileState extends State<GameTile> {
             borderRadius: BorderRadius.circular(4),
             color: CustomTheme.primaryColor,
           ),
-          child: Text(
-            widget.ruleset,
-            style: const TextStyle(fontWeight: FontWeight.bold),
+          child: Skeleton.ignore(
+            child: Text(
+              widget.ruleset,
+              style: const TextStyle(fontWeight: FontWeight.bold),
+            ),
           ),
         ),
         Center(
@@ -68,19 +71,21 @@ class _GameTileState extends State<GameTile> {
               borderRadius: BorderRadius.circular(4),
               color: Colors.yellow.shade300,
             ),
-            child: Row(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                const Icon(Icons.emoji_events, color: Colors.black, size: 20),
-                Text(
-                  widget.winner,
-                  textAlign: TextAlign.center,
-                  style: const TextStyle(
-                    fontWeight: FontWeight.bold,
-                    color: Colors.black87,
+            child: Skeleton.ignore(
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  const Icon(Icons.emoji_events, color: Colors.black, size: 20),
+                  Text(
+                    widget.winner,
+                    textAlign: TextAlign.center,
+                    style: const TextStyle(
+                      fontWeight: FontWeight.bold,
+                      color: Colors.black87,
+                    ),
                   ),
-                ),
-              ],
+                ],
+              ),
             ),
           ),
         ),

lib/presentation/widgets/tiles/group_tile.dart

@@ -0,0 +1,68 @@
+import 'package:flutter/material.dart';
+import 'package:game_tracker/core/custom_theme.dart';
+import 'package:game_tracker/data/dto/group.dart';
+import 'package:game_tracker/presentation/widgets/tiles/text_icon_tile.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: [
+              Flexible(
+                child: Text(
+                  group.name,
+                  overflow: TextOverflow.ellipsis,
+                  style: const TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 18,
+                  ),
+                ),
+              ),
+              Row(
+                children: [
+                  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)
+                TextIconTile(text: member.name, iconEnabled: false),
+            ],
+          ),
+          const SizedBox(height: 2.5),
+        ],
+      ),
+    );
+  }
+}

lib/presentation/widgets/tiles/text_icon_list_tile.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+import 'package:game_tracker/core/custom_theme.dart';
+
+class TextIconListTile extends StatelessWidget {
+  final String text;
+  final VoidCallback? onPressed;
+  final bool iconEnabled;
+
+  const TextIconListTile({
+    super.key,
+    required this.text,
+    this.onPressed,
+    this.iconEnabled = true,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: const EdgeInsets.symmetric(horizontal: 5, vertical: 5),
+      padding: const EdgeInsets.symmetric(horizontal: 15),
+      decoration: BoxDecoration(
+        color: CustomTheme.boxColor,
+        border: Border.all(color: CustomTheme.boxBorder),
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        mainAxisSize: MainAxisSize.max,
+        children: [
+          Flexible(
+            child: Container(
+              padding: const EdgeInsets.symmetric(vertical: 12.5),
+              child: Text(
+                text,
+                overflow: TextOverflow.ellipsis,
+                style: const TextStyle(
+                  fontSize: 16,
+                  fontWeight: FontWeight.w500,
+                ),
+              ),
+            ),
+          ),
+          if (iconEnabled)
+            GestureDetector(
+              onTap: onPressed,
+              child: const Icon(Icons.add, size: 20),
+            ),
+        ],
+      ),
+    );
+  }
+}

lib/presentation/widgets/tiles/text_icon_tile.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import 'package:game_tracker/core/custom_theme.dart';
+
+class TextIconTile extends StatelessWidget {
+  final String text;
+  final bool iconEnabled;
+  final VoidCallback? onIconTap;
+
+  const TextIconTile({
+    super.key,
+    required this.text,
+    this.onIconTap,
+    this.iconEnabled = true,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(5),
+      decoration: BoxDecoration(
+        color: CustomTheme.onBoxColor,
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (iconEnabled) const SizedBox(width: 3),
+          Flexible(
+            child: Text(
+              text,
+              overflow: TextOverflow.ellipsis,
+              style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+            ),
+          ),
+          if (iconEnabled) ...<Widget>[
+            const SizedBox(width: 3),
+            GestureDetector(
+              onTap: onIconTap,
+              child: const Icon(Icons.close, size: 20),
+            ),
+          ],
+        ],
+      ),
+    );
+  }
+}

lib/presentation/widgets/top_centered_message.dart

@@ -1,14 +1,39 @@
 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.icon,
+    required this.title,
+    required this.message,
+  });
+
+  final String title;
+  final String message;
+  final IconData icon;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.only(top: 100),
+      margin: const EdgeInsets.symmetric(horizontal: 10),
+      alignment: Alignment.topCenter,
+      child: Column(
+        children: [
+          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,
+          ),
+        ],
+      ),
+    );
+  }
 }