Merge branch 'development' into feature/48-game-result-view-erstellen

Reviewed-on: #72
Reviewed-by: Felix Kirchner <felix.kirchner.fk@gmail.com>

android/app/src/main/res/drawable/launch_background.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Modify this file to customize your launch splash screen -->
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:drawable="@android:color/white" />
+    <item android:drawable="@color/launch_background" />
 
     <!-- You can insert your own image assets here -->
     <!-- <item>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/values/colors.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="app_icon_background">#E6F1E4</color>
+    <color name="launch_background">#0B0B0B</color>
+</resources>

android/app/src/main/res/values/ic_launcher_background.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- Referenz unbedingt als @color/launch_background (nicht @colors/...) -->
+    <color name="ic_launcher_background">@color/app_icon_background</color>
+</resources>

android/app/src/main/res/values/styles.xml

@@ -4,7 +4,7 @@
     <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
         <!-- Show a splash screen on the activity. Automatically removed when
              the Flutter engine draws its first frame -->
-        <item name="android:windowBackground">@drawable/launch_background</item>
+        <item name="android:windowBackground">@color/launch_background</item>
     </style>
     <!-- Theme applied to the Android Window as soon as the process has started.
          This theme determines the color of the Android Window while your

ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -1,122 +1,14 @@
 {
   "images" : [
     {
-      "size" : "20x20",
-      "idiom" : "iphone",
-      "filename" : "Icon-App-20x20@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "size" : "20x20",
-      "idiom" : "iphone",
-      "filename" : "Icon-App-20x20@3x.png",
-      "scale" : "3x"
-    },
-    {
-      "size" : "29x29",
-      "idiom" : "iphone",
-      "filename" : "Icon-App-29x29@1x.png",
-      "scale" : "1x"
-    },
-    {
-      "size" : "29x29",
-      "idiom" : "iphone",
-      "filename" : "Icon-App-29x29@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "size" : "29x29",
-      "idiom" : "iphone",
-      "filename" : "Icon-App-29x29@3x.png",
-      "scale" : "3x"
-    },
-    {
-      "size" : "40x40",
-      "idiom" : "iphone",
-      "filename" : "Icon-App-40x40@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "size" : "40x40",
-      "idiom" : "iphone",
-      "filename" : "Icon-App-40x40@3x.png",
-      "scale" : "3x"
-    },
-    {
-      "size" : "60x60",
-      "idiom" : "iphone",
-      "filename" : "Icon-App-60x60@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "size" : "60x60",
-      "idiom" : "iphone",
-      "filename" : "Icon-App-60x60@3x.png",
-      "scale" : "3x"
-    },
-    {
-      "size" : "20x20",
-      "idiom" : "ipad",
-      "filename" : "Icon-App-20x20@1x.png",
-      "scale" : "1x"
-    },
-    {
-      "size" : "20x20",
-      "idiom" : "ipad",
-      "filename" : "Icon-App-20x20@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "size" : "29x29",
-      "idiom" : "ipad",
-      "filename" : "Icon-App-29x29@1x.png",
-      "scale" : "1x"
-    },
-    {
-      "size" : "29x29",
-      "idiom" : "ipad",
-      "filename" : "Icon-App-29x29@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "size" : "40x40",
-      "idiom" : "ipad",
-      "filename" : "Icon-App-40x40@1x.png",
-      "scale" : "1x"
-    },
-    {
-      "size" : "40x40",
-      "idiom" : "ipad",
-      "filename" : "Icon-App-40x40@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "size" : "76x76",
-      "idiom" : "ipad",
-      "filename" : "Icon-App-76x76@1x.png",
-      "scale" : "1x"
-    },
-    {
-      "size" : "76x76",
-      "idiom" : "ipad",
-      "filename" : "Icon-App-76x76@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "size" : "83.5x83.5",
-      "idiom" : "ipad",
-      "filename" : "Icon-App-83.5x83.5@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "size" : "1024x1024",
-      "idiom" : "ios-marketing",
-      "filename" : "Icon-App-1024x1024@1x.png",
-      "scale" : "1x"
+      "filename" : "icon_x1024.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "size" : "1024x1024"
     }
   ],
   "info" : {
-    "version" : 1,
-    "author" : "xcode"
+    "author" : "xcode",
+    "version" : 1
   }
 }

ios/Runner/Assets.xcassets/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md

@@ -1,5 +0,0 @@
-# Launch Screen Assets
-
-You can customize the launch screen with your own desired assets by replacing the image files in this directory.
-
-You can also do it by opening your Flutter project's Xcode project with `open ios/Runner.xcworkspace`, selecting `Runner/Assets.xcassets` in the Project Navigator and dropping in the desired images.

ios/Runner/Assets.xcassets/LauncherBackgroundColor.colorset/Contents.json

@@ -0,0 +1,20 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0.043",
+          "green" : "0.043",
+          "red" : "0.043"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ios/Runner/Assets.xcassets/LauncherIcon.imageset/Contents.json

@@ -1,23 +1,21 @@
 {
   "images" : [
     {
+      "filename" : "icon.png",
       "idiom" : "universal",
-      "filename" : "LaunchImage.png",
       "scale" : "1x"
     },
     {
       "idiom" : "universal",
-      "filename" : "LaunchImage@2x.png",
       "scale" : "2x"
     },
     {
       "idiom" : "universal",
-      "filename" : "LaunchImage@3x.png",
       "scale" : "3x"
     }
   ],
   "info" : {
-    "version" : 1,
-    "author" : "xcode"
+    "author" : "xcode",
+    "version" : 1
   }
 }

ios/Runner/Base.lproj/LaunchScreen.storyboard

@@ -1,8 +1,11 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="12121" systemVersion="16G29" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="24412" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina6_12" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="12089"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="24405"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>
         <!--View Controller-->
@@ -14,24 +17,27 @@
                         <viewControllerLayoutGuide type="bottom" id="xbc-2k-c8Z"/>
                     </layoutGuides>
                     <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
+                        <rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
-                            <imageView opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" image="LaunchImage" translatesAutoresizingMaskIntoConstraints="NO" id="YRO-k0-Ey4">
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" image="LauncherIcon" translatesAutoresizingMaskIntoConstraints="NO" id="ygV-Op-Bu5">
+                                <rect key="frame" x="46" y="334" width="301" height="184"/>
+                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                             </imageView>
                         </subviews>
-                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-                        <constraints>
-                            <constraint firstItem="YRO-k0-Ey4" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="1a2-6s-vTC"/>
-                            <constraint firstItem="YRO-k0-Ey4" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="centerY" id="4X2-HB-R7a"/>
-                        </constraints>
+                        <color key="backgroundColor" name="LauncherBackgroundColor"/>
                     </view>
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="53" y="375"/>
+            <point key="canvasLocation" x="80.152671755725194" y="264.08450704225356"/>
         </scene>
     </scenes>
+    <color key="tintColor" red="0.90196078431372551" green="0.94509803921568625" blue="0.89411764705882346" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
     <resources>
-        <image name="LaunchImage" width="168" height="185"/>
+        <image name="LauncherIcon" width="1000" height="1000"/>
+        <namedColor name="LauncherBackgroundColor">
+            <color red="0.90196078431372551" green="0.94509803921568625" blue="0.89411764705882346" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+        </namedColor>
     </resources>
 </document>

ios/Runner/Base.lproj/Main.storyboard

@@ -1,8 +1,10 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="10117" systemVersion="15F34" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" initialViewController="BYZ-38-t0r">
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="24412" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
+    <device id="retina6_12" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="10085"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="24405"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>
         <!--Flutter View Controller-->
@@ -14,13 +16,14 @@
                         <viewControllerLayoutGuide type="bottom" id="wfy-db-euE"/>
                     </layoutGuides>
                     <view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
-                        <rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
+                        <rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
-                        <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
+                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                     </view>
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
             </objects>
+            <point key="canvasLocation" x="141" y="131"/>
         </scene>
     </scenes>
 </document>

lib/presentation/views/main_menu/create_group_view.dart

@@ -1,17 +1,13 @@
-import 'package:flutter/material.dart' hide ButtonStyle;
+import 'package:flutter/material.dart';
 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/player_selection.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});
@@ -21,53 +17,25 @@ class CreateGroupView extends StatefulWidget {
 }
 
 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();
+  late final AppDatabase db;
+  List<Player> selectedPlayers = [];
 
   @override
   void initState() {
     super.initState();
     db = Provider.of<AppDatabase>(context, listen: false);
-    _searchBarController.addListener(() {
-      setState(() {});
-    });
     _groupNameController.addListener(() {
       setState(() {});
     });
-    loadPlayerList();
   }
 
   @override
   void dispose() {
     _groupNameController.dispose();
-    _searchBarController.dispose();
     super.dispose();
   }
 
-  void loadPlayerList() {
-    _allPlayersFuture = Future.delayed(
-      const Duration(milliseconds: 250),
-      () => db.playerDao.getAllPlayers(),
-    );
-    suggestedPlayers = skeletonData;
-    _allPlayersFuture.then((loadedPlayers) {
-      setState(() {
-        loadedPlayers.sort((a, b) => a.name.compareTo(b.name));
-        allPlayers = [...loadedPlayers];
-        suggestedPlayers = [...loadedPlayers];
-      });
-    });
-  }
-
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -96,203 +64,10 @@ class _CreateGroupViewState extends State<CreateGroupView> {
               ),
             ),
             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',
-                      trailingButtonShown: true,
-                      trailingButtonicon: Icons.add_circle,
-                      trailingButtonEnabled: _searchBarController.text
-                          .trim()
-                          .isNotEmpty,
-                      onTrailingButtonPressed: () async {
-                        addNewPlayerFromSearch(context: context);
-                      },
-                      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: Visibility(
-                                  visible:
-                                      (suggestedPlayers.isEmpty &&
-                                      allPlayers.isNotEmpty),
-                                  replacement: 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],
-                                                  );
-                                                }
-                                              });
-                                            },
-                                          );
-                                        },
-                                  ),
-                                  child: TopCenteredMessage(
-                                    icon: Icons.info,
-                                    title: 'Info',
-                                    message:
-                                        (selectedPlayers.length ==
-                                            allPlayers.length)
-                                        ? 'No more players to add.'
-                                        : 'No players found with that name.',
-                                  ),
-                                ),
-                              ),
-                            );
-                          },
-                    ),
-                  ],
-                ),
+              child: PlayerSelection(
+                onChanged: (value) {
+                  selectedPlayers = [...value];
+                },
               ),
             ),
             CustomWidthButton(
@@ -311,9 +86,6 @@ class _CreateGroupViewState extends State<CreateGroupView> {
                       );
                       if (!context.mounted) return;
                       if (success) {
-                        _groupNameController.clear();
-                        _searchBarController.clear();
-                        selectedPlayers.clear();
                         Navigator.pop(context);
                       } else {
                         ScaffoldMessenger.of(context).showSnackBar(
@@ -337,47 +109,4 @@ class _CreateGroupViewState extends State<CreateGroupView> {
       ),
     );
   }
-
-  /// Adds a new player to the database from the search bar input.
-  /// Shows a snackbar indicating success or failure.
-  /// [context] - BuildContext to show the snackbar.
-  void addNewPlayerFromSearch({required BuildContext context}) async {
-    String playerName = _searchBarController.text.trim();
-    Player createdPlayer = Player(name: playerName);
-    bool success = await db.playerDao.addPlayer(player: createdPlayer);
-    if (!context.mounted) return;
-    if (success) {
-      selectedPlayers.add(createdPlayer);
-      allPlayers.add(createdPlayer);
-      setState(() {
-        _searchBarController.clear();
-        suggestedPlayers = allPlayers.where((player) {
-          return !selectedPlayers.contains(player);
-        }).toList();
-      });
-      ScaffoldMessenger.of(context).showSnackBar(
-        SnackBar(
-          backgroundColor: CustomTheme.boxColor,
-          content: Center(
-            child: Text(
-              'Successfully added player $playerName.',
-              style: const TextStyle(color: Colors.white),
-            ),
-          ),
-        ),
-      );
-    } else {
-      ScaffoldMessenger.of(context).showSnackBar(
-        SnackBar(
-          backgroundColor: CustomTheme.boxColor,
-          content: Center(
-            child: Text(
-              'Could not add player $playerName.',
-              style: const TextStyle(color: Colors.white),
-            ),
-          ),
-        ),
-      );
-    }
-  }
 }

lib/presentation/views/main_menu/groups_view.dart

@@ -4,11 +4,11 @@ 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/app_skeleton.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 StatefulWidget {
   const GroupsView({super.key});
@@ -75,22 +75,8 @@ class _GroupsViewState extends State<GroupsView> {
                   final List<Group> groups =
                       isLoading ? skeletonData : (snapshot.data ?? [])
                         ..sort((a, b) => b.createdAt.compareTo(a.createdAt));
-                  return Skeletonizer(
-                    effect: PulseEffect(
-                      from: Colors.grey[800]!,
-                      to: Colors.grey[600]!,
-                      duration: const Duration(milliseconds: 800),
-                    ),
+                  return AppSkeleton(
                     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,

lib/presentation/views/main_menu/home_view.dart

@@ -3,12 +3,12 @@ import 'package:game_tracker/data/db/database.dart';
 import 'package:game_tracker/data/dto/game.dart';
 import 'package:game_tracker/data/dto/group.dart';
 import 'package:game_tracker/data/dto/player.dart';
+import 'package:game_tracker/presentation/widgets/app_skeleton.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});
@@ -62,30 +62,8 @@ class _HomeViewState extends State<HomeView> {
   Widget build(BuildContext context) {
     return LayoutBuilder(
       builder: (BuildContext context, BoxConstraints constraints) {
-        return Skeletonizer(
-          effect: PulseEffect(
-            from: Colors.grey[800]!,
-            to: Colors.grey[600]!,
-            duration: const Duration(milliseconds: 800),
-          ),
+        return AppSkeleton(
           enabled: isLoading,
-          enableSwitchAnimation: true,
-          switchAnimationConfig: SwitchAnimationConfig(
-            duration: const Duration(milliseconds: 200),
-            switchInCurve: Curves.linear,
-            switchOutCurve: Curves.linear,
-            transitionBuilder: AnimatedSwitcher.defaultTransitionBuilder,
-            layoutBuilder:
-                (Widget? currentChild, List<Widget> previousChildren) {
-                  return Stack(
-                    alignment: Alignment.topCenter,
-                    children: [
-                      ...previousChildren,
-                      if (currentChild != null) currentChild,
-                    ],
-                  );
-                },
-          ),
           child: SingleChildScrollView(
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.center,
@@ -151,15 +129,6 @@ class _HomeViewState extends State<HomeView> {
                                   ),
                                 );
                               }
-                              if (snapshot.connectionState ==
-                                      ConnectionState.done &&
-                                  (!snapshot.hasData ||
-                                      snapshot.data!.isEmpty)) {
-                                return const Center(
-                                  heightFactor: 4,
-                                  child: Text('No recent games available.'),
-                                );
-                              }
                               final List<Game> games =
                                   (isLoading
                                             ? skeletonData
@@ -214,7 +183,7 @@ class _HomeViewState extends State<HomeView> {
                                 );
                               } else {
                                 return const Center(
-                                  heightFactor: 4,
+                                  heightFactor: 12,
                                   child: Text('No recent games available.'),
                                 );
                               }

lib/presentation/views/main_menu/statistics_view.dart

@@ -2,9 +2,9 @@ import 'package:flutter/material.dart';
 import 'package:game_tracker/data/db/database.dart';
 import 'package:game_tracker/data/dto/game.dart';
 import 'package:game_tracker/data/dto/player.dart';
+import 'package:game_tracker/presentation/widgets/app_skeleton.dart';
 import 'package:game_tracker/presentation/widgets/tiles/statistics_tile.dart';
 import 'package:provider/provider.dart';
-import 'package:skeletonizer/skeletonizer.dart';
 
 class StatisticsView extends StatefulWidget {
   const StatisticsView({super.key});
@@ -48,30 +48,9 @@ class _StatisticsViewState extends State<StatisticsView> {
     return LayoutBuilder(
       builder: (BuildContext context, BoxConstraints constraints) {
         return SingleChildScrollView(
-          child: Skeletonizer(
-            effect: PulseEffect(
-              from: Colors.grey[800]!,
-              to: Colors.grey[600]!,
-              duration: const Duration(milliseconds: 800),
-            ),
+          child: AppSkeleton(
             enabled: isLoading,
-            enableSwitchAnimation: true,
-            switchAnimationConfig: SwitchAnimationConfig(
-              duration: const Duration(milliseconds: 200),
-              switchInCurve: Curves.linear,
-              switchOutCurve: Curves.linear,
-              transitionBuilder: AnimatedSwitcher.defaultTransitionBuilder,
-              layoutBuilder:
-                  (Widget? currentChild, List<Widget> previousChildren) {
-                    return Stack(
-                      alignment: Alignment.topCenter,
-                      children: [
-                        ...previousChildren,
-                        if (currentChild != null) currentChild,
-                      ],
-                    );
-                  },
-            ),
+            fixLayoutBuilder: true,
             child: ConstrainedBox(
               constraints: BoxConstraints(minWidth: constraints.maxWidth),
               child: Column(

lib/presentation/widgets/app_skeleton.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+import 'package:skeletonizer/skeletonizer.dart';
+
+class AppSkeleton extends StatefulWidget {
+  final Widget child;
+  final bool enabled;
+  final bool fixLayoutBuilder;
+
+  const AppSkeleton({
+    super.key,
+    required this.child,
+    this.enabled = true,
+    this.fixLayoutBuilder = false,
+  });
+
+  @override
+  State<AppSkeleton> createState() => _AppSkeletonState();
+}
+
+class _AppSkeletonState extends State<AppSkeleton> {
+  @override
+  Widget build(BuildContext context) {
+    return Skeletonizer(
+      effect: PulseEffect(
+        from: Colors.grey[800]!,
+        to: Colors.grey[600]!,
+        duration: const Duration(milliseconds: 800),
+      ),
+      enabled: widget.enabled,
+      enableSwitchAnimation: true,
+      switchAnimationConfig: SwitchAnimationConfig(
+        duration: const Duration(milliseconds: 200),
+        switchInCurve: Curves.linear,
+        switchOutCurve: Curves.linear,
+        transitionBuilder: AnimatedSwitcher.defaultTransitionBuilder,
+        layoutBuilder: !widget.fixLayoutBuilder
+            ? AnimatedSwitcher.defaultLayoutBuilder
+            : (Widget? currentChild, List<Widget> previousChildren) {
+                return Stack(
+                  alignment: Alignment.topCenter,
+                  children: [
+                    ...previousChildren,
+                    if (currentChild != null) currentChild,
+                  ],
+                );
+              },
+      ),
+      child: widget.child,
+    );
+  }
+}

lib/presentation/widgets/player_selection.dart

@@ -0,0 +1,261 @@
+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/player.dart';
+import 'package:game_tracker/presentation/widgets/app_skeleton.dart';
+import 'package:game_tracker/presentation/widgets/custom_search_bar.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';
+
+class PlayerSelection extends StatefulWidget {
+  final Function(List<Player> value) onChanged;
+
+  const PlayerSelection({super.key, required this.onChanged});
+
+  @override
+  State<PlayerSelection> createState() => _PlayerSelectionState();
+}
+
+class _PlayerSelectionState extends State<PlayerSelection> {
+  List<Player> selectedPlayers = [];
+  List<Player> suggestedPlayers = [];
+  List<Player> allPlayers = [];
+  late final TextEditingController _searchBarController =
+      TextEditingController();
+  late final AppDatabase db;
+  late Future<List<Player>> _allPlayersFuture;
+  late final List<Player> skeletonData = List.filled(
+    7,
+    Player(name: 'Player 0'),
+  );
+
+  @override
+  void initState() {
+    super.initState();
+    db = Provider.of<AppDatabase>(context, listen: false);
+    loadPlayerList();
+  }
+
+  void loadPlayerList() {
+    _allPlayersFuture = Future.delayed(
+      const Duration(milliseconds: 250),
+      () => db.playerDao.getAllPlayers(),
+    );
+    suggestedPlayers = skeletonData;
+    _allPlayersFuture.then((loadedPlayers) {
+      setState(() {
+        loadedPlayers.sort((a, b) => a.name.compareTo(b.name));
+        allPlayers = [...loadedPlayers];
+        suggestedPlayers = [...loadedPlayers];
+      });
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return 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',
+            trailingButtonShown: true,
+            trailingButtonicon: Icons.add_circle,
+            trailingButtonEnabled: _searchBarController.text.trim().isNotEmpty,
+            onTrailingButtonPressed: () async {
+              addNewPlayerFromSearch(context: context);
+            },
+            onChanged: (value) {
+              setState(() {
+                // Filters the list of suggested players based on the search input.
+                if (value.isEmpty) {
+                  // If the search is empty, it shows all unselected players.
+                  suggestedPlayers = allPlayers.where((player) {
+                    return !selectedPlayers.contains(player);
+                  }).toList();
+                } else {
+                  // If there is input, it filters by name match (case-insensitive) and ensures
+                  // that already selected players are excluded from the results.
+                  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(
+            'Selected players: (${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>[
+              // Generates a TextIconTile for each selected player.
+              for (var player in selectedPlayers)
+                TextIconTile(
+                  text: player.name,
+                  onIconTap: () {
+                    setState(() {
+                      // Removes the player from the selection and notifies the parent.
+                      final currentSearch = _searchBarController.text
+                          .toLowerCase();
+                      selectedPlayers.remove(player);
+                      widget.onChanged([...selectedPlayers]);
+                      // If the player matches the current search query (or search is empty),
+                      // they are added back to the suggestions and the list is re-sorted.
+                      if (currentSearch.isEmpty ||
+                          player.name.toLowerCase().contains(currentSearch)) {
+                        suggestedPlayers.add(player);
+                      }
+                    });
+                  },
+                ),
+            ],
+          ),
+          const SizedBox(height: 10),
+          const Text(
+            'All players:',
+            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.',
+                      ),
+                    );
+                  }
+                  bool doneLoading =
+                      snapshot.connectionState == ConnectionState.done;
+                  bool snapshotDataEmpty =
+                      !snapshot.hasData || snapshot.data!.isEmpty;
+                  if (doneLoading &&
+                      (snapshotDataEmpty && 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: AppSkeleton(
+                      enabled: isLoading,
+                      child: Visibility(
+                        visible:
+                            (suggestedPlayers.isEmpty && allPlayers.isNotEmpty),
+                        replacement: 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],
+                                    );
+                                    widget.onChanged([...selectedPlayers]);
+                                    suggestedPlayers.remove(
+                                      suggestedPlayers[index],
+                                    );
+                                  }
+                                });
+                              },
+                            );
+                          },
+                        ),
+                        child: TopCenteredMessage(
+                          icon: Icons.info,
+                          title: 'Info',
+                          message: (selectedPlayers.length == allPlayers.length)
+                              ? 'No more players to add.'
+                              : 'No players found with that name.',
+                        ),
+                      ),
+                    ),
+                  );
+                },
+          ),
+        ],
+      ),
+    );
+  }
+
+  /// Adds a new player to the database from the search bar input.
+  /// Shows a snackbar indicating success or failure.
+  /// [context] - BuildContext to show the snackbar.
+  void addNewPlayerFromSearch({required BuildContext context}) async {
+    String playerName = _searchBarController.text.trim();
+    Player createdPlayer = Player(name: playerName);
+    bool success = await db.playerDao.addPlayer(player: createdPlayer);
+    if (!context.mounted) return;
+    if (success) {
+      selectedPlayers.add(createdPlayer);
+      widget.onChanged([...selectedPlayers]);
+      allPlayers.add(createdPlayer);
+      setState(() {
+        _searchBarController.clear();
+        suggestedPlayers = allPlayers.where((player) {
+          return !selectedPlayers.contains(player);
+        }).toList();
+      });
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(
+          backgroundColor: CustomTheme.boxColor,
+          content: Center(
+            child: Text(
+              'Successfully added player $playerName.',
+              style: const TextStyle(color: Colors.white),
+            ),
+          ),
+        ),
+      );
+    } else {
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(
+          backgroundColor: CustomTheme.boxColor,
+          content: Center(
+            child: Text(
+              'Could not add player $playerName.',
+              style: const TextStyle(color: Colors.white),
+            ),
+          ),
+        ),
+      );
+    }
+  }
+}