Merge remote-tracking branch 'origin/development' into feature/118-bearbeiten-und-löschen-von-gruppen

# Conflicts: # lib/l10n/arb/app_de.arb # lib/l10n/arb/app_en.arb # lib/l10n/generated/app_localizations.dart # lib/l10n/generated/app_localizations_de.dart # lib/l10n/generated/app_localizations_en.dart # lib/presentation/views/main_menu/group_view/groups_view.dart # lib/presentation/views/main_menu/match_view/create_match/create_match_view.dart # lib/presentation/widgets/tiles/group_tile.dart # pubspec.yaml
2026-01-18 11:15:04 +01:00
parent f1df067824 9ce2ca0ceb
commit 14d30f55a7
16 changed files with 438 additions and 214 deletions
--- a/lib/presentation/widgets/colored_icon_container.dart
+++ b/lib/presentation/widgets/colored_icon_container.dart
@@ -0,0 +1,57 @@
+import 'package:flutter/cupertino.dart';
+import 'package:game_tracker/core/custom_theme.dart';
+
+class ColoredIconContainer extends StatelessWidget {
+  /// A customizable container widget that displays an icon with a colored background.
+  /// - [icon]: The icon to be displayed inside the container.
+  /// - [containerSize]: The size of the container (width and height).
+  /// - [iconSize]: The size of the icon inside the container.
+  /// - [margin]: Optional margin around the container.
+  /// - [padding]: Optional padding inside the container.
+  const ColoredIconContainer({
+    super.key,
+    required this.icon,
+    this.containerSize = 44,
+    this.iconSize = 28,
+    this.margin,
+    this.padding,
+  });
+
+  /// The icon to be displayed inside the container.
+  final IconData icon;
+
+  /// The size of the container (width and height).
+  final double containerSize;
+
+  /// The size of the icon inside the container.
+  final double iconSize;
+
+  /// Optional margin around the container.
+  final EdgeInsetsGeometry? margin;
+
+  /// Optional padding inside the container.
+  final EdgeInsetsGeometry? padding;
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        Container(
+          width: containerSize,
+          height: containerSize,
+          margin: margin,
+          padding: padding,
+          decoration: BoxDecoration(
+            color: CustomTheme.primaryColor.withAlpha(40),
+            borderRadius: BorderRadius.circular(10),
+          ),
+          child: Icon(
+            icon,
+            size: iconSize,
+            color: CustomTheme.primaryColor.withGreen(40),
+          ),
+        ),
+      ],
+    );
+  }
+}
--- a/lib/presentation/widgets/tiles/group_tile.dart
+++ b/lib/presentation/widgets/tiles/group_tile.dart
@@ -3,12 +3,17 @@ 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 {
+class GroupTile extends StatefulWidget {
  /// A tile widget that displays information about a group, including its name and members.
  /// - [group]: The group data to be displayed.
  /// - [isHighlighted]: Whether the tile should be highlighted.
-  /// - [onTap]: An optional callback function to handle tap events.
-  const GroupTile({super.key, required this.group, this.isHighlighted = false, this.onTap});
+  /// - [onTap]: Callback function to be executed when the tile is tapped.
+  const GroupTile({
+    super.key,
+    required this.group,
+    this.isHighlighted = false,
+    this.onTap,
+  });

  /// The group data to be displayed.
  final Group group;
@@ -16,17 +21,22 @@ class GroupTile extends StatelessWidget {
  /// Whether the tile should be highlighted.
  final bool isHighlighted;

-  /// Callback function to handle tap events.
+  /// Callback function to be executed when the tile is tapped.
  final VoidCallback? onTap;

+  @override
+  State<GroupTile> createState() => _GroupTileState();
+}
+
+class _GroupTileState extends State<GroupTile> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
-      onTap: onTap,
+      onTap: widget.onTap,
      child: AnimatedContainer(
        margin: CustomTheme.standardMargin,
        padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
-        decoration: isHighlighted
+        decoration: widget.isHighlighted
            ? CustomTheme.highlightedBoxDecoration
            : CustomTheme.standardBoxDecoration,
        duration: const Duration(milliseconds: 150),
@@ -38,7 +48,7 @@ class GroupTile extends StatelessWidget {
              children: [
                Flexible(
                  child: Text(
-                    group.name,
+                    widget.group.name,
                    overflow: TextOverflow.ellipsis,
                    style: const TextStyle(
                      fontWeight: FontWeight.bold,
@@ -49,7 +59,7 @@ class GroupTile extends StatelessWidget {
                Row(
                  children: [
                    Text(
-                      '${group.members.length}',
+                      '${widget.group.members.length}',
                      style: const TextStyle(
                        fontWeight: FontWeight.w900,
                        fontSize: 18,
@@ -69,7 +79,7 @@ class GroupTile extends StatelessWidget {
              runSpacing: 8.0,
              children: <Widget>[
                for (var member in [
-                  ...group.members,
+                  ...widget.group.members,
                ]..sort((a, b) => a.name.compareTo(b.name)))
                  TextIconTile(text: member.name, iconEnabled: false),
              ],
--- a/lib/presentation/widgets/tiles/info_tile.dart
+++ b/lib/presentation/widgets/tiles/info_tile.dart
@@ -17,6 +17,7 @@ class InfoTile extends StatefulWidget {
    this.padding,
    this.height,
    this.width,
+    this.horizontalAlignment = CrossAxisAlignment.center,
  });

  /// The title text displayed on the tile.
@@ -37,6 +38,9 @@ class InfoTile extends StatefulWidget {
  /// Optional width for the tile.
  final double? width;

+  /// The main axis alignment for the content.
+  final CrossAxisAlignment horizontalAlignment;
+
  @override
  State<InfoTile> createState() => _InfoTileState();
 }
@@ -51,7 +55,7 @@ class _InfoTileState extends State<InfoTile> {
      decoration: CustomTheme.standardBoxDecoration,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
-        crossAxisAlignment: CrossAxisAlignment.center,
+        crossAxisAlignment: widget.horizontalAlignment,
        children: [
          Row(
            children: [
--- a/lib/presentation/widgets/tiles/license_tile.dart
+++ b/lib/presentation/widgets/tiles/license_tile.dart
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:game_tracker/core/custom_theme.dart';
 import 'package:game_tracker/presentation/views/main_menu/settings_view/licenses/license_detail_view.dart';
 import 'package:game_tracker/presentation/views/main_menu/settings_view/licenses/oss_licenses.dart';
+import 'package:game_tracker/presentation/widgets/colored_icon_container.dart';

 class LicenseTile extends StatelessWidget {
  /// A tile widget that displays information about a software package license.
@@ -29,18 +30,10 @@ class LicenseTile extends StatelessWidget {
        ),
        child: Row(
          children: [
-            Container(
-              width: 50,
-              height: 50,
-              decoration: BoxDecoration(
-                color: CustomTheme.primaryColor.withAlpha(40),
-                borderRadius: BorderRadius.circular(10),
-              ),
-              child: Icon(
-                Icons.description,
-                color: CustomTheme.primaryColor,
-                size: 32,
-              ),
+            const ColoredIconContainer(
+              icon: Icons.description,
+              containerSize: 50,
+              iconSize: 32,
            ),
            const SizedBox(width: 16),
            Expanded(
--- a/lib/presentation/widgets/tiles/match_tile.dart
+++ b/lib/presentation/widgets/tiles/match_tile.dart
@@ -230,7 +230,7 @@ class _MatchTileState extends State<MatchTile> {
    } else if (difference.inDays < 7) {
      return loc.days_ago(difference.inDays);
    } else {
-      return DateFormat('MMM d, yyyy').format(dateTime);
+      return '${loc.created_on} ${DateFormat.yMMMd(Localizations.localeOf(context).toString()).format(dateTime)}';
    }
  }

--- a/lib/presentation/widgets/tiles/settings_list_tile.dart
+++ b/lib/presentation/widgets/tiles/settings_list_tile.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:game_tracker/core/custom_theme.dart';
+import 'package:game_tracker/presentation/widgets/colored_icon_container.dart';

 class SettingsListTile extends StatelessWidget {
  /// A customizable settings list tile widget that displays an icon, title, and an optional suffix widget.
@@ -46,18 +47,10 @@ class SettingsListTile extends StatelessWidget {
                  Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
-                      Container(
-                        width: 44,
-                        height: 44,
-                        decoration: BoxDecoration(
-                          color: CustomTheme.primaryColor.withAlpha(40),
-                          borderRadius: BorderRadius.circular(10),
-                        ),
-                        child: Icon(
-                          icon,
-                          size: 28,
-                          color: CustomTheme.primaryColor.withGreen(40),
-                        ),
+                      ColoredIconContainer(
+                        icon: icon,
+                        containerSize: 44,
+                        iconSize: 28,
                      ),
                      const SizedBox(width: 16),
                      Text(title, style: const TextStyle(fontSize: 18)),
--- a/lib/presentation/widgets/tiles/title_description_list_tile.dart
+++ b/lib/presentation/widgets/tiles/title_description_list_tile.dart
@@ -73,7 +73,6 @@ class TitleDescriptionListTile extends StatelessWidget {
                  const Spacer(),
                  Container(
                    constraints: const BoxConstraints(maxWidth: 115),
-                    margin: const EdgeInsets.only(top: 4),
                    padding: const EdgeInsets.symmetric(
                      vertical: 2,
                      horizontal: 6,