Merge branch 'development' into feature/2-gamehistoryview-anpassen

# Conflicts:
#	lib/presentation/views/main_menu/game_history_view.dart

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,59 @@
+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;
+  final bool trailingButtonShown;
+  final bool trailingButtonEnabled;
+  final VoidCallback? onTrailingButtonPressed;
+  final IconData trailingButtonicon;
+
+  const CustomSearchBar({
+    super.key,
+    required this.controller,
+    required this.hintText,
+    this.trailingButtonShown = false,
+    this.trailingButtonicon = Icons.clear,
+    this.trailingButtonEnabled = true,
+    this.onTrailingButtonPressed,
+    this.onChanged,
+    this.constraints,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return SearchBar(
+      controller: controller,
+      constraints:
+          constraints ?? const BoxConstraints(maxHeight: 45, minHeight: 45),
+      hintText: hintText,
+      onChanged: trailingButtonEnabled ? onChanged : null,
+      hintStyle: WidgetStateProperty.all(const TextStyle(fontSize: 16)),
+      leading: const Icon(Icons.search),
+      trailing: [
+        Visibility(
+          visible: trailingButtonShown,
+          child: GestureDetector(
+            onTap: trailingButtonEnabled ? onTrailingButtonPressed : null,
+            child: Icon(
+              trailingButtonicon,
+              color: trailingButtonEnabled
+                  ? null
+                  : Colors.grey.withValues(alpha: 0.2),
+            ),
+          ),
+        ),
+        const SizedBox(width: 5),
+      ],
+      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/full_width_button.dart

@@ -1,29 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:game_tracker/core/custom_theme.dart';
-
-class FullWidthButton extends StatelessWidget {
-  const FullWidthButton({super.key, required this.text, this.onPressed});
-
-  final String text;
-  final VoidCallback? onPressed;
-
-  @override
-  Widget build(BuildContext context) {
-    return ElevatedButton(
-      onPressed: onPressed,
-      style: ElevatedButton.styleFrom(
-        minimumSize: Size(MediaQuery.sizeOf(context).width * 0.9, 60),
-        backgroundColor: CustomTheme.primaryColor,
-        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
-      ),
-      child: Text(
-        text,
-        style: const TextStyle(
-          fontWeight: FontWeight.w500,
-          fontSize: 22,
-          color: Colors.white,
-        ),
-      ),
-    );
-  }
-}

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/group_tile.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:game_tracker/core/custom_theme.dart';
 import 'package:game_tracker/data/dto/group.dart';
-import 'package:skeletonizer/skeletonizer.dart';
+import 'package:game_tracker/presentation/widgets/tiles/text_icon_tile.dart';
 
 class GroupTile extends StatelessWidget {
   const GroupTile({super.key, required this.group});
@@ -24,24 +24,29 @@ class GroupTile extends StatelessWidget {
           Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
-              Text(
-                group.name,
-                overflow: TextOverflow.ellipsis,
-                style: const TextStyle(
-                  fontWeight: FontWeight.bold,
-                  fontSize: 18,
+              Flexible(
+                child: Text(
+                  group.name,
+                  overflow: TextOverflow.ellipsis,
+                  style: const TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 18,
+                  ),
                 ),
               ),
-              const Spacer(),
-              Text(
-                '${group.members.length}',
-                style: const TextStyle(
-                  fontWeight: FontWeight.w900,
-                  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(width: 3),
-              const Icon(Icons.group, size: 22),
             ],
           ),
           const SizedBox(height: 5),
@@ -52,25 +57,7 @@ class GroupTile extends StatelessWidget {
             runSpacing: 8.0,
             children: <Widget>[
               for (var member in group.members)
-                Container(
-                  padding: const EdgeInsets.symmetric(
-                    vertical: 5,
-                    horizontal: 10,
-                  ),
-                  decoration: BoxDecoration(
-                    color: CustomTheme.onBoxColor,
-                    borderRadius: BorderRadius.circular(12),
-                  ),
-                  child: Skeleton.ignore(
-                    child: Text(
-                      member.name,
-                      style: const TextStyle(
-                        fontSize: 14,
-                        fontWeight: FontWeight.bold,
-                      ),
-                    ),
-                  ),
-                ),
+                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),
+            ),
+          ],
+        ],
+      ),
+    );
+  }
+}