Flutter国际化管理插件flutter_locales的使用

发布于 1周前 作者 eggper 来自 Flutter

Flutter国际化管理插件flutter_locales的使用

flutter_locales 是一个用于Flutter应用国际化的插件,它可以帮助开发者轻松地将应用程序本地化为多种语言,并且可以在应用程序内部更改语言设置。以下是关于如何使用flutter_locales进行国际化的详细介绍。

为什么选择Flutter Locales?

  • ✅ 轻松实现应用多语言支持
  • ✅ 在应用内切换语言
  • ✅ 应用启动时获取最后更改的语言
  • ✅ 使用LocaleNotifier保存更改后的语言
  • ✅ 使用LocaleText('key') Widget获取翻译文本

示例App

你可以查看一个简单的示例应用GitHub

视频教程

Watch the video

使用步骤

1. 创建locales资源文件

在项目的根目录下创建assets/locales文件夹,并添加你的本地化json文件。例如:

  • 文件名应与语言名称相对应,如en.json代表英语,ps.json代表普什图语等。

2. 包含包和资源

pubspec.yaml中包含最新的flutter_locales依赖项以及assets/locales/文件夹路径:

dependencies:
  flutter:
    sdk: flutter
  flutter_locales:

flutter:
  uses-material-design: true
  assets:
    - assets/locales/

3. 初始化应用

替换main.dart中的主函数以初始化flutter_locales

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Locales.init(['en', 'fa', 'ps']); // 获取上次保存的语言
  runApp(MyApp());
}
  • ['en', 'fa', 'ps']是位于assets/locales文件夹中的.json文件的语言代码。
  • 您可以根据需要替换这些语言。

然后,用LocaleBuilder包裹您的MaterialApp并提供相应的locale:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LocaleBuilder(
      builder: (locale) => MaterialApp(
        title: 'Flutter Locales',
        localizationsDelegates: Locales.delegates,
        supportedLocales: Locales.supportedLocales,
        locale: locale,
        home: HomeScreen(),
      ),
    );
  }
}
  • LocaleBuilder会在您通过Locales.change(context, 'fa')更改应用语言时重建整个应用。

使用LocaleText Widget

LocaleText Widget用于根据键值来显示对应的翻译文本:

LocaleText('welcome');

获取已翻译的字符串

要获取某个键的翻译结果,可以调用:

Locales.string(context, 'welcome')

// 或者使用扩展方法
context.localeString('welcome');

更改应用语言

要更改应用的语言,请执行以下操作:

Locales.change(context, 'fa');

// 或者使用扩展方法
context.changeLocale('fa');
  • 更改后会自动保存新的locale设置。

获取当前的语言设置

可以通过下面的方式获取当前的语言设置:

Locales.currentLocale(context);

// 或者使用扩展方法
context.currentLocale;

完整示例代码

下面是一个完整的示例代码,展示了如何在Flutter项目中集成flutter_locales插件:

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Locales.init(['en', 'fa', 'ps']); // 获取上次保存的语言
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LocaleBuilder(
      builder: (locale) => MaterialApp(
        title: 'Flutter Locales',
        localizationsDelegates: Locales.delegates,
        supportedLocales: Locales.supportedLocales,
        locale: locale,
        theme: ThemeData(primarySwatch: Colors.blue),
        home: HomeScreen(),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: LocaleText('localization')),
      body: Center(
        child: LocaleText('welcome', style: TextStyle(fontSize: 32)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.push(
              context, MaterialPageRoute(builder: (_) => SettingScreen()));
        },
        child: Icon(Icons.settings),
      ),
    );
  }
}

class SettingScreen extends StatelessWidget {
  const SettingScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(Locales.string(context, 'setting'))),
      // 或者使用扩展方法
      // appBar: AppBar(title: Text(context.localeString('setting'))),
      body: Column(
        children: [
          ListTile(
            onTap: () => Locales.change(context, 'en'),
            title: LocaleText('english'),
          ),
          ListTile(
            onTap: () => Locales.change(context, 'ps'),
            title: LocaleText('pashto'),
          ),
          // 使用扩展方法更改语言
          ListTile(
            onTap: () => context.changeLocale('fa'),
            title: LocaleText('farsi'),
          ),
          Text('Current Locale: ' +
              Locales.currentLocale(context)!.languageCode),
          // 或者使用扩展方法
          // Text('Current Locale: ' + context.currentLocale.languageCode),
        ],
      ),
    );
  }
}

以上就是flutter_locales插件的基本使用方法,希望对您有所帮助!如果有任何问题或需要进一步的帮助,请随时提问。


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

1 回复

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


当然,以下是一个关于如何在Flutter项目中使用flutter_locales插件进行国际化管理的代码示例。不过,需要注意的是,flutter_locales这个包名并不常见,通常Flutter社区使用的是flutter_localizations来进行国际化处理。我将基于flutter_localizations来给出示例代码。

1. 添加依赖

首先,在pubspec.yaml文件中添加flutter_localizations依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

2. 创建语言文件

lib/l10n目录下创建语言文件,例如messages_en.arbmessages_zh.arb

messages_en.arb

{
  "greeting": "Hello, World!"
}

messages_zh.arb

{
  "greeting": "你好,世界!"
}

3. 生成本地化文件

使用Flutter的工具生成本地化类。在终端中运行以下命令:

flutter pub run flutter_gen_localization --arb-dir=lib/l10n --output-dir=lib/generated_localizations --template-arb-file=lib/l10n/messages_en.arb --dart-output-localization-file=app_localizations.dart

4. 更新MaterialApp

main.dart中配置MaterialApp以支持本地化:

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'generated_localizations/app_localizations.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      localizationsDelegates: [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        Locale('en', ''), // English
        Locale('zh', ''), // Chinese
      ],
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final AppLocalizations localizations = AppLocalizations.of(context)!;
    return Scaffold(
      appBar: AppBar(
        title: Text(localizations.greeting),
      ),
      body: Center(
        child: Text(localizations.greeting),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Example of switching locales programmatically
          Navigator.push(
            context,
            MaterialPageRoute<void>(
              builder: (BuildContext context) {
                return LocaleSwitcher();
              },
            ),
          );
        },
        tooltip: 'Switch Locale',
        child: Icon(Icons.swap_horiz),
      ),
    );
  }
}

class LocaleSwitcher extends StatefulWidget {
  @override
  _LocaleSwitcherState createState() => _LocaleSwitcherState();
}

class _LocaleSwitcherState extends State<LocaleSwitcher> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Switch Locale'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                setLocale(context, Locale('en', ''));
              },
              child: Text('English'),
            ),
            ElevatedButton(
              onPressed: () {
                setLocale(context, Locale('zh', ''));
              },
              child: Text('中文'),
            ),
          ],
        ),
      ),
    );
  }

  void setLocale(BuildContext context, Locale newLocale) {
    _MyAppState? myAppState =
        ModalRoute.of(context)!.settings.arguments as _MyAppState?;
    myAppState!.setLocale(newLocale);
    Navigator.pop(context);
  }
}

class _MyAppState extends State<MyApp> {
  Locale _locale = Locale('en', '');

  void setLocale(Locale newLocale) {
    setState(() {
      _locale = newLocale;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      locale: _locale,
      localizationsDelegates: [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        Locale('en', ''), // English
        Locale('zh', ''), // Chinese
      ],
      home: MyHomePage(),
    );
  }
}

注意:上面的代码示例中包含了一个LocaleSwitcher页面,用于演示如何程序化地切换语言。然而,示例中的_MyAppStateModalRoute.of(context)!.settings.arguments部分在实际应用中可能需要根据具体需求进行调整,因为这部分代码的目的是为了演示如何在不同页面间传递和更新Locale状态。在实际项目中,你可能需要使用状态管理库(如Provider、Riverpod等)来更优雅地管理应用状态。

此外,由于flutter_gen_localization工具可能不是Flutter SDK的标准部分,你可能需要安装第三方包或工具来生成本地化类。上述示例假定你已经有了一个生成本地化文件的工具或脚本。如果没有,你可能需要查找并安装一个适合的本地化生成工具。

回到顶部