feat: showing game color in choose tile

lib/data/models/game.dart

@@ -14,15 +14,13 @@ class Game {
   Game({
     required this.name,
     required this.ruleset,
-    required this.color,
+    this.color = GameColor.orange,
+    this.description = '',
+    this.icon = '',
     String? id,
     DateTime? createdAt,
-    String? description,
-    String? icon,
   }) : id = id ?? const Uuid().v4(),
-       createdAt = createdAt ?? clock.now(),
+       createdAt = createdAt ?? clock.now();
-       description = description ?? '',
-       icon = icon ?? '';
 
   @override
   String toString() {

lib/presentation/views/main_menu/match_view/create_match/create_game/create_game_view.dart

@@ -56,7 +56,7 @@ class _CreateGameViewState extends State<CreateGameView> {
   late List<(Ruleset, String)> _rulesets;
 
   /// The currently selected color for the game.
-  GameColor? selectedColor;
+  GameColor? selectedColor = GameColor.orange;
 
   /// Controller for the game name input field.
   final _gameNameController = TextEditingController();
@@ -212,9 +212,11 @@ class _CreateGameViewState extends State<CreateGameView> {
               if (!isEditMode())
                 ChooseTile(
                   title: loc.ruleset,
-                  trailingText: selectedRuleset == null
+                  trailing: selectedRuleset == null
-                      ? loc.none
+                      ? Text(loc.none)
-                      : translateRulesetToString(selectedRuleset!, context),
+                      : Text(
+                          translateRulesetToString(selectedRuleset!, context),
+                        ),
                   onPressed: () async {
                     final result = await Navigator.of(context).push<Ruleset?>(
                       adaptivePageRoute(
@@ -238,9 +240,24 @@ class _CreateGameViewState extends State<CreateGameView> {
               // Choose color tile
               ChooseTile(
                 title: loc.color,
-                trailingText: selectedColor == null
+                trailing: selectedColor == null
-                    ? loc.none
+                    ? Text(loc.none)
-                    : translateGameColorToString(selectedColor!, context),
+                    : Row(
+                        children: [
+                          Text(
+                            translateGameColorToString(selectedColor!, context),
+                          ),
+                          Container(
+                            width: 16,
+                            height: 16,
+                            margin: const EdgeInsets.only(left: 12),
+                            decoration: BoxDecoration(
+                              color: getColorFromGameColor(selectedColor!),
+                              shape: BoxShape.circle,
+                            ),
+                          ),
+                        ],
+                      ),
                 onPressed: () async {
                   final result = await Navigator.of(context).push<GameColor?>(
                     adaptivePageRoute(

lib/presentation/views/main_menu/match_view/create_match/create_match_view.dart

@@ -132,9 +132,9 @@ class _CreateMatchViewState extends State<CreateMatchView> {
               if (!isEditMode())
                 ChooseTile(
                   title: loc.game,
-                  trailingText: selectedGame == null
+                  trailing: selectedGame == null
-                      ? loc.none_group
+                      ? Text(loc.none_group)
-                      : selectedGame!.name,
+                      : Text(selectedGame!.name),
                   onPressed: () async {
                     selectedGame = await Navigator.of(context).push(
                       adaptivePageRoute(
@@ -158,9 +158,9 @@ class _CreateMatchViewState extends State<CreateMatchView> {
               // Group selection tile.
               ChooseTile(
                 title: loc.group,
-                trailingText: selectedGroup == null
+                trailing: selectedGroup == null
-                    ? loc.none_group
+                    ? Text(loc.none_group)
-                    : selectedGroup!.name,
+                    : Text(selectedGroup!.name),
                 onPressed: () async {
                   // Remove all players from the previously selected group from
                   // the selected players list, in case the user deselects the

lib/presentation/widgets/tiles/choose_tile.dart

@@ -4,12 +4,12 @@ import 'package:tallee/core/custom_theme.dart';
 class ChooseTile extends StatefulWidget {
   /// A tile widget that allows users to choose an option by tapping on it.
   /// - [title]: The title text displayed on the tile.
-  /// - [trailingText]: Optional trailing text displayed on the tile.
+  /// - [trailing]: Optional trailing text displayed on the tile.
   /// - [onPressed]: The callback invoked when the tile is tapped.
   const ChooseTile({
     super.key,
     required this.title,
-    this.trailingText,
+    this.trailing,
     this.onPressed,
   });
 
@@ -20,7 +20,7 @@ class ChooseTile extends StatefulWidget {
   final VoidCallback? onPressed;
 
   /// Optional trailing text displayed on the tile.
-  final String? trailingText;
+  final Widget? trailing;
 
   @override
   State<ChooseTile> createState() => _ChooseTileState();
@@ -42,7 +42,7 @@ class _ChooseTileState extends State<ChooseTile> {
               style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
             ),
             const Spacer(),
-            if (widget.trailingText != null) Text(widget.trailingText!),
+            if (widget.trailing != null) widget.trailing!,
             const SizedBox(width: 10),
             const Icon(Icons.arrow_forward_ios, size: 16),
           ],