Flutter国际化插件fiona_i18n的使用

Flutter国际化插件fiona_i18n的使用

本包允许你管理不同语言的文本。

特性

使用Fionai18n来根据用户语言显示消息。你可以为每种你想管理的语言定义一个消息文件。

开始使用

此包实现了一个想法,该想法早前在本文中提出: Flutter国际化和本地化:一种简单的方法来国际化你的应用

使用方法

你可以在示例目录中找到一个完整的示例。

你需要为每种语言创建一个文件。 文件名应该像这样:messages_en.json

ISO语言代码应该包含在文件名的末尾。

因此,如果你想管理西班牙语、英语和德语,你将需要创建以下三个文件:

  1. messages_es.json
  2. messages_en.json
  3. messages_de.json

假设你想定义两个文本:“title” 和 “example”,那么这些文件应该包含以下内容:

西班牙语

{
  "title": "Ejemplo de i18n",
  "example": "Este es un texto de ejemplo"
}

英语

{
  "title": "i18n Example",
  "example": "This is an example text"
}

德语

{
  "title": "i18n-Beispiel",
  "example": "Dies ist ein Beispieltext"
}

初始化代码如下:

import 'package:fiona_i18n/fiona_i18n.dart';

void initialize() async {
  await Fionai18n().initialize(locale: "es");
}

然后你可以使用它:

String msgTitle = Fionai18n.message("title");

完整示例代码

以下是完整的示例代码:

import 'package:flutter/material.dart';
import 'package:fiona_i18n/fiona_i18n.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Fionai18n().initialize(locale: "es");

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'i18n 示例',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyHomePage(title: 'i18n 示例页面'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    List<Widget> children = List.empty(growable: true);

    String msgTitle = Fionai18n.message("title");
    String msgExample = Fionai18n.message("example");

    children.add(Center(
        child: Text(
      msgTitle,
      style: const TextStyle(fontSize: 20),
    )));
    children.add(Center(child: Text(msgExample)));

    children.add(Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Expanded(
            flex: 5,
            child: ElevatedButton(
              onPressed: () async {
                await Fionai18n().initialize(locale: "es");
                setState(() {});
              },
              child: const Text("ES"),
            )),
        Expanded(
            flex: 5,
            child: ElevatedButton(
              onPressed: () async {
                await Fionai18n().initialize(locale: "en");
                setState(() {});
              },
              child: const Text("EN"),
            )),
      ],
    ));

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: ListView(
        children: [
          Padding(
            padding: const EdgeInsets.all(10),
            child: Column(
              children: children,
            ),
          )
        ],
      ),
    );
  }
}

更多关于Flutter国际化插件fiona_i18n的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter国际化插件fiona_i18n的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter项目中使用fiona_i18n插件进行国际化的代码示例。fiona_i18n是一个用于Flutter的国际化插件,它允许你轻松地在应用中支持多种语言。

1. 添加依赖

首先,你需要在你的pubspec.yaml文件中添加fiona_i18n的依赖:

dependencies:
  flutter:
    sdk: flutter
  fiona_i18n: ^x.y.z  # 请替换为最新版本号

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

2. 配置语言资源文件

在你的项目根目录下创建一个assets/locales文件夹,并在其中为每个支持的语言创建JSON文件。例如,创建en.jsonzh.json文件:

assets/locales/en.json

{
  "welcome": "Welcome",
  "goodbye": "Goodbye"
}

assets/locales/zh.json

{
  "welcome": "欢迎",
  "goodbye": "再见"
}

3. 配置pubspec.yaml中的assets

pubspec.yaml文件中,添加这些JSON文件到assets部分:

flutter:
  assets:
    - assets/locales/en.json
    - assets/locales/zh.json

4. 初始化FionaI18n

在你的main.dart文件中,初始化FionaI18n插件:

import 'package:flutter/material.dart';
import 'package:fiona_i18n/fiona_i18n.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 初始化FionaI18n
    FionaI18n.instance
      ..loadLocaleFromAssets('locales', 'en')  // 默认语言
      ..init(context);

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      locale: FionaI18n.instance.currentLocale,  // 设置当前语言
      supportedLocales: FionaI18n.instance.supportedLocales,  // 设置支持的语言
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        FionaI18n.delegate,  // 添加FionaI18n的delegate
      ],
      localeResolutionCallback: (locale, supportedLocales) {
        // 回调函数,用于处理语言切换逻辑
        for (var supportedLocale in supportedLocales) {
          if (supportedLocale.languageCode == locale?.languageCode ||
              supportedLocale.countryCode == locale?.countryCode) {
            return supportedLocale;
          }
        }
        return supportedLocales.first;
      },
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void changeLanguage(Locale locale) {
    setState(() {
      FionaI18n.instance.changeLocale(locale).then((_) {
        // 刷新界面
        // 通常Flutter会自动处理,但在这里显式调用以确保
        // 如果需要,可以在这里添加额外的逻辑
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(FionaI18n.instance.translate('welcome')),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              FionaI18n.instance.translate('welcome'),
              style: TextStyle(fontSize: 20),
            ),
            Text(
              FionaI18n.instance.translate('goodbye'),
              style: TextStyle(fontSize: 20),
            ),
            ElevatedButton(
              onPressed: () => changeLanguage(Locale('zh')),
              child: Text('切换到中文'),
            ),
            ElevatedButton(
              onPressed: () => changeLanguage(Locale('en')),
              child: Text('切换到英文'),
            ),
          ],
        ),
      ),
    );
  }
}

5. 运行应用

现在你可以运行你的Flutter应用,并看到应用已经支持语言切换。点击按钮可以切换到不同的语言,并且UI文本会相应地更新。

这个示例展示了如何使用fiona_i18n插件进行基本的国际化设置和语言切换。根据你的需求,你可以进一步扩展这个示例,例如添加更多的语言支持,或者根据用户的设备语言自动选择默认语言。

回到顶部