Flutter本地化插件fcm_localization的使用

fcm_localization 是一个用于在 Flutter 应用中实现本地化的插件，特别是结合 Firebase Cloud Messaging (FCM) 进行消息推送时，能够根据用户的语言偏好自动选择推送消息的本地化内容。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 fcm_localization 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  fcm_localization: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装插件。

配置 Firebase

在使用 fcm_localization 之前，你需要确保已经在项目中正确配置了 Firebase。以下是基本的配置步骤：

1. 在 Firebase Console 中创建项目：如果你还没有 Firebase 项目，请先在 Firebase 控制台 中创建一个新项目。

2. 添加 Android 和 iOS 应用：

   • 对于 Android：在 Firebase 控制台中添加 Android 应用，并下载 google-services.json 文件，将其放置在 android/app 目录下。
   • 对于 iOS：在 Firebase 控制台中添加 iOS 应用，并下载 GoogleService-Info.plist 文件，将其添加到 Xcode 项目中。

3. 配置 Flutter 应用：

   • 在 android/app/build.gradle 文件中添加 google-services 插件：

     apply plugin: 'com.google.gms.google-services'
     

   • 在 ios/Runner/AppDelegate.swift 文件中添加 Firebase 初始化代码：

     import UIKit
     import Flutter
     import Firebase
     
     @UIApplicationMain
     @objc class AppDelegate: FlutterAppDelegate {
       override func application(
         _ application: UIApplication,
         didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
       ) -> Bool {
         FirebaseApp.configure()
         GeneratedPluginRegistrant.register(with: self)
         return super.application(application, didFinishLaunchingWithOptions: launchOptions)
       }
     }
     

4. 添加 Firebase 依赖： 在 pubspec.yaml 中添加 Firebase Core 和 Firebase Messaging 插件：

   dependencies:
     flutter:
       sdk: flutter
     firebase_core: latest_version
     firebase_messaging: latest_version
     fcm_localization: ^1.0.0
   

使用 fcm_localization

1. 初始化 fcm_localization： 在 main.dart 文件中初始化 fcm_localization：

   import 'package:flutter/material.dart';
   import 'package:fcm_localization/fcm_localization.dart';
   
   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     await Firebase.initializeApp();
     await FcmLocalization.initialize(
       defaultLanguage: 'en',  // 默认语言
       supportedLanguages: ['en', 'es', 'fr'],  // 支持的语言
     );
     runApp(MyApp());
   }
   

2. 处理 FCM 消息： 使用 FirebaseMessaging 来处理收到的消息，并根据语言显示本地化内容：

   import 'package:firebase_messaging/firebase_messaging.dart';
   import 'package:fcm_localization/fcm_localization.dart';
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: Text('FCM Localization Example'),
           ),
           body: Center(
             child: Text('Hello, World!'),
           ),
         ),
       );
     }
   
     void _initializeFcm() async {
       FirebaseMessaging messaging = FirebaseMessaging.instance;
   
       // 请求通知权限
       NotificationSettings settings = await messaging.requestPermission();
   
       if (settings.authorizationStatus == AuthorizationStatus.authorized) {
         FirebaseMessaging.onMessage.listen((RemoteMessage message) {
           String? localizedTitle = FcmLocalization.getLocalizedString(
             message.data['title'],
             message.data['title_es'],
             message.data['title_fr'],
           );
   
           String? localizedBody = FcmLocalization.getLocalizedString(
             message.data['body'],
             message.data['body_es'],
             message.data['body_fr'],
           );
   
           showDialog(
             context: context,
             builder: (BuildContext context) {
               return AlertDialog(
                 title: Text(localizedTitle ?? 'Notification'),
                 content: Text(localizedBody ?? 'No message body'),
                 actions: [
                   TextButton(
                     child: Text('OK'),
                     onPressed: () {
                       Navigator.of(context).pop();
                     },
                   ),
                 ],
               );
             },
           );
         });
       }
     }
   }
   

3. 发送本地化消息： 在 Firebase 控制台或通过 API 发送 FCM 消息时，确保消息的 data 字段包含不同语言的标题和内容。例如：

   {
     "data": {
       "title": "Hello",
       "title_es": "Hola",
       "title_fr": "Bonjour",
       "body": "This is a message",
       "body_es": "Esto es un mensaje",
       "body_fr": "Ceci est un message"
     }
   }