Flutter多语言支持插件languages_dart的使用

在Flutter应用中实现多语言支持是一个常见的需求。languages_dart 是一个非常方便的插件，可以帮助你轻松地在Dart和Flutter之间处理语言和地区设置。

使用步骤

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 languages_dart 依赖：

dependencies:
  flutter:
    sdk: flutter
  languages_dart: ^0.1.0

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

2. 初始化插件

在你的 main.dart 文件中初始化插件，并设置默认的语言和地区：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      locale: Languages.of(context).locale, // 设置当前语言和地区
      localizationsDelegates: [
        Languages.delegate, // 添加本地化代理
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: Languages.delegate.supportedLocales(), // 支持的语言和地区列表
    );
  }
}

3. 创建多语言资源文件

在 assets/i18n 目录下创建多语言资源文件，例如：

• en.json
• zh.json

en.json 内容示例：

{
  "welcome_message": "Welcome to our app!",
  "button_label": "Click me"
}

zh.json 内容示例：

{
  "welcome_message": "欢迎使用我们的应用！",
  "button_label": "点击我"
}

4. 配置 pubspec.yaml 文件

在 pubspec.yaml 文件中配置资源文件路径：

flutter:
  assets:
    - assets/i18n/

5. 使用多语言文本

在你的 MyHomePage 中使用多语言文本：

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

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(Languages.of(context).text("welcome_message")), // 使用多语言文本
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: Text(Languages.of(context).text("button_label")), // 使用多语言文本
        ),
      ),
    );
  }
}

6. 切换语言

你可以通过以下方式来切换应用的语言：

Languages.setNewLanguage(context, newLocale: Locale('zh'), saveAsDefault: true);

这样，当你调用 Languages.setNewLanguage 方法时，应用的语言将会被切换为中文，并且会保存为默认语言。

完整示例代码

下面是完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      locale: Languages.of(context).locale,
      localizationsDelegates: [
        Languages.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: Languages.delegate.supportedLocales(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(Languages.of(context).text("welcome_message")),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: Text(Languages.of(context).text("button_label")),
        ),
      ),
    );
  }
}