Improve some UI/UX

android/gradle.properties

 org.gradle.jvmargs=-Xmx1536M
 android.useAndroidX=true
 android.enableJetifier=true
-app.versionName=1.2.31
-app.versionCode=37
+app.versionName=1.2.32
+app.versionCode=38

assets/translations/en.json

@@ -7,7 +7,6 @@
 
   "settings_title": "Settings",
   "settings_label_theme":"Theme mode",
-  "settings_label_timer_value":"Game turn allowed time",
 
   "about_title": "Informations",
   "about_content": "Categories",

assets/translations/fr.json

@@ -7,7 +7,6 @@
 
   "settings_title": "Réglages",
   "settings_label_theme":"Thème de couleurs",
-  "settings_label_timer_value":"Durée du tour de jeu",
 
   "about_title": "Informations",
   "about_content": "Petit Bac.",

fastlane/metadata/android/en-US/changelogs/38.txt

+Improve UI, add emojis.

fastlane/metadata/android/fr-FR/changelogs/38.txt

+Améliorations graphiques, ajout d'émojis.

lib/data/fetch_data_helper.dart

@@ -19,10 +19,13 @@ class FetchDataHelper {
     try {
       final List<dynamic> rawCategories = GameData.data['categories'] as List<dynamic>;
       for (var rawElement in rawCategories) {
-        final categoryCode = rawElement.toString();
+        final categoryCode = rawElement['code'].toString();
+        final categoryText = rawElement['text-fr'].toString();
+        final categoryEmoji = rawElement['emoji'].toString();
         _categories.add(Category(
           key: categoryCode,
-          text: categoryCode,
+          text: categoryText,
+          emoji: categoryEmoji,
         ));
       }
     } catch (e) {

lib/data/game_data.dart

 class GameData {
   static const Map<String, dynamic> data = {
     "categories": [
-      "Pays",
-      "Prénom fille",
-      "Prénom garçon",
-      "Animal",
-      "Métier",
-      "Villes",
-      "Dessin animé",
-      "Film",
-      "Auteur de littérature",
-      "Acteur ou actrice",
-      "Chanteur ou chanteuse",
-      "Chose ou objet",
-      "Fruit ou légume",
-      "Couleur",
-      "Marque",
-      "Moyen de transport",
-      "Outil",
-      "Capitale",
-      "Instrument de musique",
-      "Boisson",
-      "Fleur",
-      "Plat",
-      "Personnage historique",
-      "Vêtement",
-      "Minéral ou pierre précieuse",
-      "Étoile, planète ou constellation",
-      "Fleuve, cours d'eau ou océan",
-      "Partie du corps humain",
-      "Oiseau",
-      "Poisson",
-      "Qualité ou défaut",
-      "Arbre",
-      "Bande dessinée",
-      "Département français",
-      "Insecte",
-      "Dessert",
-      "Mammifère",
-      "Épice",
-      "Héros de mythologie",
-      "Héros fictif",
-      "Fromage",
-      "Jeu",
-      "Élément de véhicules",
-      "Site internet",
-      "Mot de plus de 8 lettres",
-      "Cadeau de Noël",
-      "Mot en anglais",
-      "Mot en espagnol",
-      "Métier dont rêvent les enfants",
-      "Chose qui se trouve dans une voiture",
-      "Chose qui se trouve dans un camping",
-      "Chose qui se trouve dans un cartable",
-      "Chose qui se trouve dans une maison",
-      "Chose qui se trouve dans une forêt",
-      "Chose qui se trouve dans la mer",
-      "Ville française",
-      "Qui sent mauvais",
-      "Qui fait plaisir",
-      "Mauvais pour la santé",
-      "Mauvais pour l'environement",
+      {
+        "code": "Pays",
+        "text-fr": "Pays",
+        "emoji": "🗺️",
+      },
+      {
+        "code": "Prénom fille",
+        "text-fr": "Prénom fille",
+        "emoji": "👧🏼",
+      },
+      {
+        "code": "Prénom garçon",
+        "text-fr": "Prénom garçon",
+        "emoji": "👦🏼",
+      },
+      {
+        "code": "Animal",
+        "text-fr": "Animal",
+        "emoji": "🐒",
+      },
+      {
+        "code": "Métier",
+        "text-fr": "Métier",
+        "emoji": "👷",
+      },
+      {
+        "code": "Villes",
+        "text-fr": "Villes",
+        "emoji": "🏙️",
+      },
+      {
+        "code": "Dessin animé",
+        "text-fr": "Dessin animé",
+        "emoji": "",
+      },
+      {
+        "code": "Film",
+        "text-fr": "Film",
+        "emoji": "🎥",
+      },
+      {
+        "code": "Auteur de littérature",
+        "text-fr": "Auteur de littérature",
+        "emoji": "🧑‍🏫",
+      },
+      {
+        "code": "Acteur ou actrice",
+        "text-fr": "Acteur ou actrice",
+        "emoji": "🎭",
+      },
+      {
+        "code": "Chanteur ou chanteuse",
+        "text-fr": "Chanteur ou chanteuse",
+        "emoji": "🎤",
+      },
+      {
+        "code": "Chose ou objet",
+        "text-fr": "Chose ou objet",
+        "emoji": "📦",
+      },
+      {
+        "code": "Fruit ou légume",
+        "text-fr": "Fruit ou légume",
+        "emoji": "🍅",
+      },
+      {
+        "code": "Couleur",
+        "text-fr": "Couleur",
+        "emoji": "🎨",
+      },
+      {
+        "code": "Marque",
+        "text-fr": "Marque",
+        "emoji": "™️",
+      },
+      {
+        "code": "Moyen de transport",
+        "text-fr": "Moyen de transport",
+        "emoji": "🚂",
+      },
+      {
+        "code": "Outil",
+        "text-fr": "Outil",
+        "emoji": "🛠️",
+      },
+      {
+        "code": "Capitale",
+        "text-fr": "Capitale",
+        "emoji": "",
+      },
+      {
+        "code": "Instrument de musique",
+        "text-fr": "Instrument de musique",
+        "emoji": "🎸",
+      },
+      {
+        "code": "Boisson",
+        "text-fr": "Boisson",
+        "emoji": "🥤",
+      },
+      {
+        "code": "Fleur",
+        "text-fr": "Fleur",
+        "emoji": "💐",
+      },
+      {
+        "code": "Plat",
+        "text-fr": "Plat",
+        "emoji": "🍲",
+      },
+      {
+        "code": "Personnage historique",
+        "text-fr": "Personnage historique",
+        "emoji": "🤴",
+      },
+      {
+        "code": "Vêtement",
+        "text-fr": "Vêtement",
+        "emoji": "👖",
+      },
+      {
+        "code": "Minéral ou pierre précieuse",
+        "text-fr": "Minéral ou pierre précieuse",
+        "emoji": "💎",
+      },
+      {
+        "code": "Étoile, planète ou constellation",
+        "text-fr": "Étoile, planète ou constellation",
+        "emoji": "🪐",
+      },
+      {
+        "code": "Fleuve, cours d'eau ou océan",
+        "text-fr": "Fleuve, cours d'eau ou océan",
+        "emoji": "🌊",
+      },
+      {
+        "code": "Partie du corps humain",
+        "text-fr": "Partie du corps humain",
+        "emoji": "🖐️",
+      },
+      {
+        "code": "Oiseau",
+        "text-fr": "Oiseau",
+        "emoji": "🐦",
+      },
+      {
+        "code": "Poisson",
+        "text-fr": "Poisson",
+        "emoji": "🐟",
+      },
+      {
+        "code": "Qualité ou défaut",
+        "text-fr": "Qualité ou défaut",
+        "emoji": "🙃",
+      },
+      {
+        "code": "Arbre",
+        "text-fr": "Arbre",
+        "emoji": "🌳",
+      },
+      {
+        "code": "Bande dessinée",
+        "text-fr": "Bande dessinée",
+        "emoji": "🗯️",
+      },
+      {
+        "code": "Département français",
+        "text-fr": "Département français",
+        "emoji": "",
+      },
+      {
+        "code": "Insecte",
+        "text-fr": "Insecte",
+        "emoji": "🐞",
+      },
+      {
+        "code": "Dessert",
+        "text-fr": "Dessert",
+        "emoji": "🍰",
+      },
+      {
+        "code": "Mammifère",
+        "text-fr": "Mammifère",
+        "emoji": "🐇",
+      },
+      {
+        "code": "Épice",
+        "text-fr": "Épice",
+        "emoji": "🌶️",
+      },
+      {
+        "code": "Héros de mythologie",
+        "text-fr": "Héros de mythologie",
+        "emoji": "🧙",
+      },
+      {
+        "code": "Héros fictif",
+        "text-fr": "Héros fictif",
+        "emoji": "🦸",
+      },
+      {
+        "code": "Fromage",
+        "text-fr": "Fromage",
+        "emoji": "🧀",
+      },
+      {
+        "code": "Jeu",
+        "text-fr": "Jeu",
+        "emoji": "🎲",
+      },
+      {
+        "code": "Élément de véhicules",
+        "text-fr": "Élément de véhicules",
+        "emoji": "🚗",
+      },
+      {
+        "code": "Site internet",
+        "text-fr": "Site internet",
+        "emoji": "💻",
+      },
+      {
+        "code": "Mot de plus de 8 lettres",
+        "text-fr": "Mot de plus de 8 lettres",
+        "emoji": "8️⃣",
+      },
+      {
+        "code": "Cadeau de Noël",
+        "text-fr": "Cadeau de Noël",
+        "emoji": "🎁",
+      },
+      {
+        "code": "Mot en anglais",
+        "text-fr": "Mot en anglais",
+        "emoji": "🇬🇧",
+      },
+      {
+        "code": "Mot en espagnol",
+        "text-fr": "Mot en espagnol",
+        "emoji": "🇪🇸",
+      },
+      {
+        "code": "Métier dont rêvent les enfants",
+        "text-fr": "Métier dont rêvent les enfants",
+        "emoji": "🧑‍⚕️",
+      },
+      {
+        "code": "Chose qui se trouve dans une voiture",
+        "text-fr": "Chose qui se trouve dans une voiture",
+        "emoji": "🚙",
+      },
+      {
+        "code": "Chose qui se trouve dans un camping",
+        "text-fr": "Chose qui se trouve dans un camping",
+        "emoji": "🏕️",
+      },
+      {
+        "code": "Chose qui se trouve dans un cartable",
+        "text-fr": "Chose qui se trouve dans un cartable",
+        "emoji": "🎒",
+      },
+      {
+        "code": "Chose qui se trouve dans une maison",
+        "text-fr": "Chose qui se trouve dans une maison",
+        "emoji": "🏠",
+      },
+      {
+        "code": "Chose qui se trouve dans une forêt",
+        "text-fr": "Chose qui se trouve dans une forêt",
+        "emoji": "🌲",
+      },
+      {
+        "code": "Chose qui se trouve dans la mer",
+        "text-fr": "Chose qui se trouve dans la mer",
+        "emoji": "🌊",
+      },
+      {
+        "code": "Ville française",
+        "text-fr": "Ville française",
+        "emoji": "",
+      },
+      {
+        "code": "Qui sent mauvais",
+        "text-fr": "Qui sent mauvais",
+        "emoji": "💩",
+      },
+      {
+        "code": "Qui fait plaisir",
+        "text-fr": "Qui fait plaisir",
+        "emoji": "🥰",
+      },
+      {
+        "code": "Mauvais pour la santé",
+        "text-fr": "Mauvais pour la santé",
+        "emoji": "☠️",
+      },
+      {
+        "code": "Mauvais pour l'environement",
+        "text-fr": "Mauvais pour l'environement",
+        "emoji": "🏭",
+      },
     ]
   };
 }

lib/models/data/category.dart

 class Category {
   final String key;
   final String text;
+  final String emoji;
 
   const Category({
     required this.key,
     required this.text,
+    required this.emoji,
   });
 
   @override
@@ -16,6 +18,7 @@ class Category {
     return {
       'key': key,
       'text': text,
+      'emoji': emoji,
     };
   }
 }

lib/ui/widgets/game/game_countdown.dart

@@ -39,6 +39,8 @@ class GameButtonNextWithCountdown extends StatelessWidget {
                       width: borderWidth,
                     ),
                   ),
+                  child: SizedBox.square(
+                    dimension: 100,
                     child: TextButton(
                       onPressed: () {
                         final GameCubit gameCubit = BlocProvider.of<GameCubit>(context);
@@ -71,6 +73,7 @@ class GameButtonNextWithCountdown extends StatelessWidget {
                       ),
                     ),
                   ),
+                ),
                 const SizedBox(height: 5),
               ],
             );

lib/ui/widgets/game/game_position_indicator.dart

@@ -34,7 +34,7 @@ class GamePositionIndicator extends StatelessWidget {
               color: baseColor,
               backgroundColor: baseColor.darken(),
               minHeight: barHeight,
-              borderRadius: const BorderRadius.all(Radius.circular(15)),
+              borderRadius: const BorderRadius.all(Radius.circular(10)),
             ),
             OutlinedText(
               text: '$currentPosition/$maxPosition',

lib/ui/widgets/game/widget_category.dart

@@ -20,6 +20,7 @@ class WidgetCategory extends StatelessWidget {
         final Color borderColor = backgroundColor.darken();
 
         return Container(
+          width: double.maxFinite,
           margin: const EdgeInsets.all(borderWidth),
           padding: const EdgeInsets.all(borderWidth),
           decoration: BoxDecoration(
@@ -30,6 +31,10 @@ class WidgetCategory extends StatelessWidget {
               width: borderWidth,
             ),
           ),
+          child: Column(
+            children: [
+              SizedBox(
+                height: 100,
                 child: TextButton(
                   onPressed: () {
                     final GameCubit gameCubit = BlocProvider.of<GameCubit>(context);
@@ -45,6 +50,19 @@ class WidgetCategory extends StatelessWidget {
                     ),
                   ),
                 ),
+              ),
+              SizedBox.square(
+                dimension: 80,
+                child: Text(
+                  currentGame.category.emoji,
+                  textAlign: TextAlign.center,
+                  style: const TextStyle(
+                    fontSize: 50,
+                  ),
+                ),
+              ),
+            ],
+          ),
         );
       },
     );

lib/ui/widgets/game/widget_letter.dart

@@ -3,6 +3,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 
 import 'package:petitbac/cubit/game_cubit.dart';
 import 'package:petitbac/models/game.dart';
+import 'package:petitbac/ui/widgets/helpers/outlined_text_widget.dart';
 import 'package:petitbac/utils/color_extensions.dart';
 
 class WidgetLetter extends StatelessWidget {
@@ -20,6 +21,7 @@ class WidgetLetter extends StatelessWidget {
         final Color borderColor = backgroundColor.darken();
 
         return Container(
+          width: double.maxFinite,
           margin: const EdgeInsets.all(borderWidth),
           padding: const EdgeInsets.all(borderWidth),
           decoration: BoxDecoration(
@@ -30,17 +32,18 @@ class WidgetLetter extends StatelessWidget {
               width: borderWidth,
             ),
           ),
+          child: SizedBox(
+            height: 100,
             child: TextButton(
               onPressed: () {
                 final GameCubit gameCubit = BlocProvider.of<GameCubit>(context);
                 gameCubit.pickNewLetter();
               },
-            child: Text(
-              currentGame.letter.text,
-              style: const TextStyle(
-                fontSize: 40,
-                fontWeight: FontWeight.w600,
-                color: Colors.black,
+              child: OutlinedText(
+                text: currentGame.letter.text,
+                fontSize: 60,
+                textColor: Colors.black,
+                outlineColor: Colors.orange.darken(),
               ),
             ),
           ),

pubspec.yaml

@@ -3,7 +3,7 @@ description: A PetitBac game application.
 
 publish_to: "none"
 
-version: 1.2.31+37
+version: 1.2.32+38
 
 environment:
   sdk: "^3.0.0"