feat(i18n): add FR/EN internationalization with in-app language selector

- gen-l10n setup (flutter_localizations, intl, l10n.yaml, ARB en/fr) - localeProvider (persisted) wired into MaterialApp - language selector in the System page (alongside the color palette) - all user-facing strings across screens moved to AppLocalizations Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-23 12:13:51 +02:00
parent 409ab9c1dd
commit a2a7ffd79f
26 changed files with 1012 additions and 70 deletions
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import '../../../domain/entities/pokemon.dart';
+import '../../../l10n/app_localizations.dart';

 /// Écran inférieur du détail : stats de base, description et éléments décoratifs.
 class PokemonStatsPanel extends StatelessWidget {
@@ -8,6 +9,7 @@ class PokemonStatsPanel extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
+    final l = AppLocalizations.of(context)!;
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16),
      padding: const EdgeInsets.all(8),
@@ -21,7 +23,7 @@ class PokemonStatsPanel extends StatelessWidget {
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
-                const Text("BASE STATS", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, letterSpacing: 2)),
+                Text(l.baseStats, style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold, letterSpacing: 2)),
                Text("MODEL: DS-01", style: TextStyle(fontSize: 12, color: Colors.grey[700], fontWeight: FontWeight.bold)),
              ],
            ),
@@ -38,7 +40,7 @@ class PokemonStatsPanel extends StatelessWidget {
              child: Text(
                pokemon.description != null && pokemon.description!.isNotEmpty
                    ? '"${pokemon.description!}"'
-                    : '"No description available for this Pokémon."',
+                    : '"${l.noDescription}"',
                style: const TextStyle(fontSize: 16, height: 1.5),
              ),
            ),
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import '../../../l10n/app_localizations.dart';

 /// Boutons d'action de l'écran game over : rejouer ou retourner au Pokédex.
 class GameOverActions extends StatelessWidget {
@@ -9,11 +10,12 @@ class GameOverActions extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
+    final l = AppLocalizations.of(context)!;
    return Column(
      children: [
-        _button(label: "TRY AGAIN", icon: Icons.refresh, color: const Color(0xFF2962FF), onPressed: onTryAgain),
+        _button(label: l.tryAgain, icon: Icons.refresh, color: const Color(0xFF2962FF), onPressed: onTryAgain),
        const SizedBox(height: 16),
-        _button(label: "BACK TO POKEDEX", icon: Icons.menu_book, color: const Color(0xFFA66A00), onPressed: onBack),
+        _button(label: l.backToPokedex, icon: Icons.menu_book, color: const Color(0xFFA66A00), onPressed: onBack),
      ],
    );
  }
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import '../../../l10n/app_localizations.dart';
 import '../pokemon_image.dart';

 /// Bloc supérieur de l'écran game over : bannière "GAME OVER", image et nom du Pokémon.
@@ -13,6 +14,7 @@ class GameOverHeader extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
+    final l = AppLocalizations.of(context)!;
    return Container(
      decoration: BoxDecoration(color: _darkRed, border: Border.all(color: _darkRed, width: 4)),
      child: Container(
@@ -24,9 +26,9 @@ class GameOverHeader extends StatelessWidget {
            Container(
              color: _darkRed,
              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
-              child: const Text(
-                "GAME OVER",
-                style: TextStyle(
+              child: Text(
+                l.gameOver,
+                style: const TextStyle(
                  fontSize: 26,
                  color: Colors.yellow,
                  fontWeight: FontWeight.bold,
@@ -40,7 +42,7 @@ class GameOverHeader extends StatelessWidget {
              SizedBox(height: 140, child: PokemonImage(imageUrl: pokemonImage, fit: BoxFit.contain)),
            const SizedBox(height: 12),
            Text(
-              "It was $pokemonName!",
+              l.itWas(pokemonName),
              textAlign: TextAlign.center,
              style: const TextStyle(
                fontSize: 22,
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import '../../../l10n/app_localizations.dart';

 /// Rangée de statistiques de fin de partie (STREAK / SEEN / SCORE).
 class GameOverStats extends StatelessWidget {
@@ -10,13 +11,14 @@ class GameOverStats extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
+    final l = AppLocalizations.of(context)!;
    return Row(
      children: [
-        Expanded(child: _StatBox(label: "STREAK", value: streak)),
+        Expanded(child: _StatBox(label: l.statStreak, value: streak)),
        const SizedBox(width: 16),
-        Expanded(child: _StatBox(label: "SEEN", value: seen)),
+        Expanded(child: _StatBox(label: l.statSeen, value: seen)),
        const SizedBox(width: 16),
-        Expanded(child: _StatBox(label: "SCORE", value: score)),
+        Expanded(child: _StatBox(label: l.statScore, value: score)),
      ],
    );
  }
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import '../../../core/config/app_constants.dart';
+import '../../../l10n/app_localizations.dart';

 /// Bouton "GEN FILTER" et son panneau dépliable de sélection des générations.
 class GenFilterSection extends StatelessWidget {
@@ -30,9 +31,9 @@ class GenFilterSection extends StatelessWidget {
                isOpen ? Icons.expand_less : Icons.filter_list,
                color: const Color(0xFF1B2333),
              ),
-              label: const Text(
-                'GEN FILTER',
-                style: TextStyle(
+              label: Text(
+                AppLocalizations.of(context)!.genFilter,
+                style: const TextStyle(
                  color: Color(0xFF1B2333),
                  fontWeight: FontWeight.bold,
                  fontSize: 16,
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import '../../../l10n/app_localizations.dart';

 /// Section de saisie : indice optionnel, champ de réponse et boutons d'action
 /// (Guess / Continue / Hint / Skip). Purement présentationnelle : tout passe par les callbacks.
@@ -36,14 +37,15 @@ class GuessInputSection extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
+    final l = AppLocalizations.of(context)!;
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
-          const Text(
-            "IDENTIFICATION INPUT",
-            style: TextStyle(color: Colors.black54, fontSize: 12, fontWeight: FontWeight.bold),
+          Text(
+            l.identificationInput,
+            style: const TextStyle(color: Colors.black54, fontSize: 12, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 4),
          if (isHintUsed)
@@ -57,7 +59,7 @@ class GuessInputSection extends StatelessWidget {
                borderRadius: BorderRadius.circular(8),
              ),
              child: Text(
-                "HINT: ${_maskedName(pokemonName)}",
+                "${l.hintPrefix}: ${_maskedName(pokemonName)}",
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: Colors.amber[900], letterSpacing: 4),
              ),
@@ -67,28 +69,28 @@ class GuessInputSection extends StatelessWidget {
            child: TextField(
              controller: controller,
              style: const TextStyle(fontSize: 24, letterSpacing: 1.5),
-              decoration: const InputDecoration(
-                contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+              decoration: InputDecoration(
+                contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                border: InputBorder.none,
-                hintText: 'Enter Pokémon name...',
+                hintText: l.enterPokemonName,
              ),
              onSubmitted: (_) => onGuess(),
            ),
          ),
          const SizedBox(height: 16),
          if (isGuessed)
-            _bigButton(label: "CONTINUE", color: Colors.green, onPressed: onContinue)
+            _bigButton(label: l.continueButton, color: Colors.green, onPressed: onContinue)
          else ...[
-            _bigButton(label: "GUESS!", color: const Color(0xFF3B6EE3), onPressed: onGuess),
+            _bigButton(label: l.guessButton, color: const Color(0xFF3B6EE3), onPressed: onGuess),
            const SizedBox(height: 16),
            Row(
              children: [
                Expanded(
-                  child: _actionButton(icon: Icons.lightbulb, label: "HINT ($hints)", color: Colors.amber, onPressed: onHint),
+                  child: _actionButton(icon: Icons.lightbulb, label: l.hintButton(hints), color: Colors.amber, onPressed: onHint),
                ),
                const SizedBox(width: 8),
                Expanded(
-                  child: _actionButton(icon: Icons.skip_next, label: "SKIP ($skips)", color: Colors.grey[400]!, onPressed: onSkip),
+                  child: _actionButton(icon: Icons.skip_next, label: l.skipButton(skips), color: Colors.grey[400]!, onPressed: onSkip),
                ),
              ],
            ),
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import '../../../domain/entities/pokemon.dart';
+import '../../../l10n/app_localizations.dart';
 import '../pokemon_image.dart';

 /// Écran bleu affichant la silhouette (jeu en cours) ou l'image révélée (manche gagnée).
@@ -17,6 +18,7 @@ class GuessSilhouette extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
+    final l = AppLocalizations.of(context)!;
    final imageUrl = isShiny ? pokemon.shinyImageUrl : pokemon.imageUrl;
    return Container(
      height: 250,
@@ -53,7 +55,7 @@ class GuessSilhouette extends StatelessWidget {
            width: double.infinity,
            padding: const EdgeInsets.symmetric(vertical: 8),
            child: Text(
-              isShiny ? "✨ SHINY POKÉMON DETECTED! ✨" : "WHO'S THAT POKÉMON?",
+              isShiny ? l.shinyDetected : l.whosThatPokemon,
              textAlign: TextAlign.center,
              style: TextStyle(
                color: isShiny ? Colors.yellow[400] : Colors.white,
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import '../../../l10n/app_localizations.dart';

 /// Encart affichant le score courant et le meilleur score personnel.
 class ScoreBoard extends StatelessWidget {
@@ -9,6 +10,7 @@ class ScoreBoard extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
+    final l = AppLocalizations.of(context)!;
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(16),
@@ -19,9 +21,9 @@ class ScoreBoard extends StatelessWidget {
      ),
      child: Column(
        children: [
-          const Text(
-            "CURRENT SCORE",
-            style: TextStyle(color: Colors.black54, fontSize: 14, fontWeight: FontWeight.bold),
+          Text(
+            l.currentScore,
+            style: const TextStyle(color: Colors.black54, fontSize: 14, fontWeight: FontWeight.bold),
          ),
          Text(
            "$currentScore",
@@ -29,7 +31,7 @@ class ScoreBoard extends StatelessWidget {
          ),
          const Divider(height: 24),
          Text(
-            "PERSONAL BEST: $bestScore",
+            l.personalBest(bestScore),
            style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.black87),
          ),
        ],
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import '../../../l10n/app_localizations.dart';

 /// Bandeau affichant le nombre de Pokémon découverts sur le total.
 class PokedexCountBar extends StatelessWidget {
@@ -20,8 +21,8 @@ class PokedexCountBar extends StatelessWidget {
            '${caught.toString().padLeft(3, '0')} / $total',
            style: const TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
          ),
-          const Text('POKEMON DISCOVERED',
-              style: TextStyle(fontSize: 14, color: Colors.black54, letterSpacing: 1)),
+          Text(AppLocalizations.of(context)!.pokemonDiscovered,
+              style: const TextStyle(fontSize: 14, color: Colors.black54, letterSpacing: 1)),
        ],
      ),
    );
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import '../../../l10n/app_localizations.dart';

 /// Barre de titre de la liste du Pokédex.
 class PokedexListHeader extends StatelessWidget {
@@ -9,13 +10,13 @@ class PokedexListHeader extends StatelessWidget {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
      color: const Color(0xFF90A4AE),
-      child: const Row(
+      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
-          Icon(Icons.menu, color: Colors.black87),
-          Text('LIST - NATIONAL',
-              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, letterSpacing: 2)),
-          Icon(Icons.search, color: Colors.black87),
+          const Icon(Icons.menu, color: Colors.black87),
+          Text(AppLocalizations.of(context)!.listNational,
+              style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold, letterSpacing: 2)),
+          const Icon(Icons.search, color: Colors.black87),
        ],
      ),
    );
@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import '../../providers/locale_provider.dart';
+
+/// Sélecteur de langue de l'application (parmi [supportedLocales]).
+class LanguagePicker extends StatelessWidget {
+  final Locale selected;
+  final Color primaryColor;
+  final void Function(Locale) onSelect;
+
+  const LanguagePicker({
+    super.key,
+    required this.selected,
+    required this.primaryColor,
+    required this.onSelect,
+  });
+
+  static const _names = {'en': 'English', 'fr': 'Français'};
+  static const _flags = {'en': '🇬🇧', 'fr': '🇫🇷'};
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: supportedLocales.map((locale) {
+        final isSelected = locale.languageCode == selected.languageCode;
+        return GestureDetector(
+          onTap: () => onSelect(locale),
+          child: AnimatedContainer(
+            duration: const Duration(milliseconds: 200),
+            margin: const EdgeInsets.only(bottom: 10),
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
+            decoration: BoxDecoration(
+              color: isSelected ? primaryColor : Colors.white,
+              borderRadius: BorderRadius.circular(12),
+              border: Border.all(
+                color: isSelected ? primaryColor : Colors.grey.shade300,
+                width: isSelected ? 3 : 1.5,
+              ),
+            ),
+            child: Row(
+              children: [
+                Text(_flags[locale.languageCode] ?? '', style: const TextStyle(fontSize: 22)),
+                const SizedBox(width: 16),
+                Text(
+                  _names[locale.languageCode] ?? locale.languageCode,
+                  style: TextStyle(
+                    fontSize: 16,
+                    fontWeight: FontWeight.w600,
+                    color: isSelected ? Colors.white : Colors.black87,
+                  ),
+                ),
+                const Spacer(),
+                if (isSelected) const Icon(Icons.check_circle, color: Colors.white, size: 22),
+              ],
+            ),
+          ),
+        );
+      }).toList(),
+    );
+  }
+}
@@ -3,7 +3,8 @@ import 'package:flutter/material.dart';
 /// En-tête de la page Système.
 class SystemHeader extends StatelessWidget {
  final Color primaryColor;
-  const SystemHeader({super.key, required this.primaryColor});
+  final String title;
+  const SystemHeader({super.key, required this.primaryColor, required this.title});

  @override
  Widget build(BuildContext context) {
@@ -14,10 +15,10 @@ class SystemHeader extends StatelessWidget {
        color: primaryColor,
        border: Border(bottom: BorderSide(color: primaryColor.withAlpha(180), width: 3)),
      ),
-      child: const Text(
-        'SYSTÈME',
+      child: Text(
+        title,
        textAlign: TextAlign.center,
-        style: TextStyle(color: Colors.white, fontSize: 28, fontWeight: FontWeight.bold, letterSpacing: 4),
+        style: const TextStyle(color: Colors.white, fontSize: 28, fontWeight: FontWeight.bold, letterSpacing: 4),
      ),
    );
  }