Internationalization

Add new locale

Look for app_locale.dart file and add the new locale (e.g. Spanish)

final class SpanishLocale extends AppLocale {
  const SpanishLocale() : super('es'); // make sure to provide the right country code
}

Add your language to the AppLanguage enum

Look for app_language.dart file and add your language of choice to AppLanguage enum.

• code: the country code

• name: the name you want to show in the UI (e.g. like the dropdown to switch the app language, etc.)

• The code editor should also yell at you to handle toLocale(), so proceed

  enum AppLanguage {
    /// Spanish language.
    spanish('es', 'Español'), // new language
  
    /// English language.
    english('en', 'English'),
  
    /// French language.
    french('fr', 'Français'),
  
    /// System language.
    system('system', 'System');
  
    const AppLanguage(this.code, this.name);
  
    // ...existing code
  
    Locale? toLocale() {
      return switch (this) {
        AppLanguage.english => const EnglishLocale(),
        AppLanguage.french => const FrenchLocale(),
        AppLanguage.spanish => const SpanishLocale(), // new locale
        AppLanguage.system => null,
      };
    }
  }

Update the appLocale getter

In build_context_x.dart, update the appLocale getter. This getter determines the current app locale based on the user's language settings and returns an AppLocale instance (such as EnglishLocale, FrenchLocale, etc.). Using specific subclasses ensures only supported locales are used and helps prevent errors from unsupported or mistyped locale codes.

extension BuildContextX on BuildContext {
  AppLocale get appLocale {
  final locale = Localizations.localeOf(this);

  return switch (AppLanguage.fromString(locale.languageCode)) {
    AppLanguage.english => const EnglishLocale(),
    AppLanguage.french => const FrenchLocale(),
    AppLanguage.spanish => const SpanishLocale(), // new locale
    AppLanguage.system => const EnglishLocale(),
  };
  }

  // ...existing code
}

Duplicate the ARB file

Locate the app_fr.arb (lib/core/presentation/l10n/app_fr.arb) file and duplicate it as app_<your_country_code>.arb (for example, app_es.arb for Spanish).

Update the locale and translations

Update the @@locale field to match the new language code (e.g., es), and replace the values with the appropriate translations.

{
  "@@locale": "es",
  "aboutToQuitPage": "Estás a punto de salir de la página.",
  "account": "Cuenta"
  // ...other translations
}

Generate the new translations

Run this command in the terminal to generate the new translations.

flutter gen-l10n

Add the new language to your Supabase types

Look for the l10n.ts file and add the language you supported in your front-end.

export type Language = "en" | "fr" | "es"; // "es" added

Translate email subjects

In l10n.ts, update the subjects object to include translations for your new language.

export const subjects: Record<Language, Record<EmailActionType, string>> = {
  en: {
    signup: "Confirm Your Email",
    recovery: "Reset Your Password",
    magiclink: "Your Magic Link",
  },
  fr: {
    signup: "Confirmez votre adresse email",
    recovery: "Réinitialisez votre mot de passe",
    magiclink: "Votre Code Magique",
  },
  // new spanish translations
  es: {
    signup: "Confirma tu correo electrónico",
    recovery: "Restablece tu contraseña",
    magiclink: "Tu enlace mágico",
  },
} as const;

Translate email content

In each email template file, add translations for your new language by following the same principles as for email subjects.

• In confirm-email.tsx:

  const translations: Record<Language, EmailContent> = {
    // ...existing code
    es: {
      // spanish translations...
    },
  } as const;

• In supabase/functions/send-email/_templates/magic-link/magic-link.tsx and supabase/functions/send-email/_templates/password-reset/password-reset-email.tsx, add translations for your new language following the same pattern.