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

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

安装

在你的 pubspec.yaml 文件中添加 languages_simple 依赖。

dependencies:
  languages_simple: the_latest_version

示例代码

下面是一个完整的示例代码，展示了如何使用 languages_simple 插件来实现多语言支持。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'LanguagesSimple',
        theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true),
        home: const MyHomePage(title: 'LanguagesSimple'));
  }
}

class MyHomePage extends StatefulWidget {
  const 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) {
    return Scaffold(
      appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(widget.title)),
      body: LanguagesSimple(
        onPressedLanguage: (List<String> val) {
          debugPrint('$val');
        },
        decoration: const BoxDecoration(color: Colors.white),
        selectedDecoration: const BoxDecoration(color: Colors.green),
        // 你自己的初始语言代码
        initialLanguageCode: 'en-gb',
      ),
    );
  }
}

更多关于Flutter多语言支持插件languages_simple的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter多语言支持插件languages_simple的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


languages_simple 是一个用于 Flutter 项目实现多语言支持的插件。它简化了多语言资源的管理和加载过程，使开发者更容易地在应用中支持多种语言。以下是使用 languages_simple 插件的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  languages_simple: ^1.0.0  # 请使用最新版本

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

2. 创建语言文件

在 assets 目录下创建语言文件。例如，你可以创建 assets/languages 目录，然后在其中为每种支持的语言创建 JSON 文件：

  • assets/languages/en.json (英语)
  • assets/languages/zh.json (中文)

每个 JSON 文件应包含键值对的翻译内容，例如 en.json 文件内容如下：

{
  "hello": "Hello",
  "welcome": "Welcome to Flutter"
}

zh.json 文件内容如下：

{
  "hello": "你好",
  "welcome": "欢迎使用 Flutter"
}

3. 配置 pubspec.yaml

在 pubspec.yaml 文件中配置语言文件的路径：

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

4. 初始化 languages_simple

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

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

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

  // 初始化语言插件
  await LanguagesSimple.initialize(
    defaultLanguage: 'en', // 默认语言
    languagesPath: 'assets/languages', // 语言文件路径
    supportedLanguages: ['en', 'zh'], // 支持的语言列表
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      locale: LanguagesSimple.currentLocale, // 当前语言
      supportedLocales: LanguagesSimple.supportedLocales,
      localizationsDelegates: LanguagesSimple.localizationsDelegates,
      home: MyHomePage(),
    );
  }
}

5. 使用翻译

在你的应用中，你可以通过 LanguagesSimple.of(context).translate('key') 来获取翻译后的文本：

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(LanguagesSimple.of(context).translate('welcome')),
      ),
      body: Center(
        child: Text(LanguagesSimple.of(context).translate('hello')),
      ),
    );
  }
}

6. 切换语言

你可以在运行时通过 LanguagesSimple.setLanguage 方法来切换语言：

ElevatedButton(
  onPressed: () {
    LanguagesSimple.setLanguage('zh');
  },
  child: Text('切换到中文'),
);
回到顶部