Firebase UI Auth登录页面（SignInScreen）的法语文本自定义与本地化实现指引

嗨，我来帮你搞定Firebase UI Auth的法语本地化和文本自定义问题！其实官方已经提供了现成的本地化支持，同时也允许我们灵活修改特定文本，下面分两种场景给你一步步说明：

一、使用官方内置的法语本地化（快速实现全页面翻译） #

如果想要整个SignInScreen的文本都自动切换为法语，直接用官方的本地化支持就可以，步骤如下：

1. 添加本地化依赖
   首先在你的pubspec.yaml里添加flutter_localizations依赖：

   dependencies:
     flutter:
       sdk: flutter
     flutter_localizations:
       sdk: flutter
     firebase_ui_auth: ^latest_version # 替换成你正在使用的版本
   

   然后运行flutter pub get安装依赖。

2. 在MaterialApp中配置本地化
   打开你的main.dart，在MaterialApp里配置本地化委托和支持的语言，记得加入Firebase UI的本地化委托：

   import 'package:flutter/material.dart';
   import 'package:flutter_localizations/flutter_localizations.dart';
   import 'package:firebase_ui_auth/firebase_ui_auth.dart';
   
   void main() {
     runApp(const MyApp());
   }
   
   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Mon Application',
         localizationsDelegates: const [
           // Firebase UI的本地化委托
           FirebaseUIAuthLocalizations.delegate,
           // Flutter默认的本地化委托
           GlobalMaterialLocalizations.delegate,
           GlobalWidgetsLocalizations.delegate,
           GlobalCupertinoLocalizations.delegate,
         ],
         // 支持的语言列表，加入法语
         supportedLocales: const [
           Locale('en'), // 英语（默认）
           Locale('fr', 'FR'), // 法语
         ],
         home: const SignInScreen(
           providers: [
             EmailAuthProvider(),
             GoogleAuthProvider(),
           ],
         ),
       );
     }
   }
   

   这样当用户的系统语言设置为法语时，SignInScreen的所有文本（比如“Sign in”变成“Se connecter”，“Email”变成“Courriel”等）都会自动切换为法语。

二、自定义特定文本（比如修改Google登录按钮的文字） #

如果只想修改个别文本（比如把“Sign in with Google”改成“Se connecter avec Google”，而其他文本保持默认），有两种简单的方法：

方法1：直接在AuthProvider里设置按钮文本 #

这种方法最直接，适合只修改单个按钮的场景：

SignInScreen(
  providers: [
    EmailAuthProvider(),
    GoogleAuthProvider(
      // 直接自定义Google登录按钮的文本
      buttonText: 'Se connecter avec Google',
    ),
  ],
)

方法2：自定义本地化委托（适合批量修改多个文本） #

如果你需要修改多个文本，比如同时改登录标题、按钮文字等，可以自定义一个本地化委托，覆盖官方的文本：

1. 创建一个自定义的本地化类：

   import 'package:firebase_ui_auth/firebase_ui_auth.dart';
   import 'package:flutter/widgets.dart';
   
   class CustomFrenchFirebaseLocalizations extends FirebaseUIAuthLocalizations {
     const CustomFrenchFirebaseLocalizations();
   
     @override
     String get signInWithGoogleButtonText => 'Se connecter avec Google';
     @override
     String get signInButtonText => 'Se connecter';
     @override
     String get signInTitle => 'Bienvenue !';
     // 你可以覆盖更多需要自定义的文本，比如忘记密码、注册等
     @override
     String get forgotPasswordButtonText => 'Mot de passe oublié ?';
   }
   
   // 创建对应的本地化委托
   class CustomFrenchLocalizationsDelegate extends LocalizationsDelegate<FirebaseUIAuthLocalizations> {
     const CustomFrenchLocalizationsDelegate();
   
     @override
     bool isSupported(Locale locale) {
       // 只支持法语
       return locale.languageCode == 'fr';
     }
   
     @override
     Future<FirebaseUIAuthLocalizations> load(Locale locale) async {
       return const CustomFrenchFirebaseLocalizations();
     }
   
     @override
     bool shouldReload(covariant LocalizationsDelegate<FirebaseUIAuthLocalizations> old) {
       return false;
     }
   }
   

2. 在MaterialApp里添加这个自定义委托（注意要放在官方委托的前面，这样优先使用自定义的）：

   MaterialApp(
     localizationsDelegates: const [
       // 自定义的法语本地化委托（放在前面）
       CustomFrenchLocalizationsDelegate(),
       // 官方的Firebase UI本地化委托
       FirebaseUIAuthLocalizations.delegate,
       GlobalMaterialLocalizations.delegate,
       GlobalWidgetsLocalizations.delegate,
       GlobalCupertinoLocalizations.delegate,
     ],
     supportedLocales: const [
       Locale('en'),
       Locale('fr', 'FR'),
     ],
     home: const SignInScreen(
       providers: [EmailAuthProvider(), GoogleAuthProvider()],
     ),
   )
   

这样当系统语言是法语时，就会使用你自定义的文本内容啦！

总结 #

• 如果想要全页面自动法语化，用官方内置的本地化配置即可；
• 如果只需要修改个别文本，直接在AuthProvider里设置buttonText最快捷；
• 批量修改多个文本的话，自定义本地化委托是更灵活的选择。

备注：内容来源于stack exchange，提问作者Mohamed lemine