Flutter本地应用数据管理插件app_local的使用

Flutter本地应用数据管理插件app_local的使用

简介

app_local 是一个轻量级且功能强大的 Flutter 包，它允许您轻松实现应用程序本地化，动态语言切换，持久设置，并支持本地设备语言 - 所有这些只需少量配置即可完成。

特性

• 🚀 简单的应用程序本地化
• 🔄 动态区域切换
• 💾 自动区域持久化
• 📱 支持手机默认语言
• 🔌 通过 LocaleText 小部件简单集成
• ⚡ 最小化的配置需求

示例

开始使用

1. 设置资源文件

1. 在项目根目录下创建一个 assets/lang 文件夹。
2. 添加您的区域 JSON 文件（例如 en.json，ar.json）。

示例区域文件：

// en.json
{
  "welcome": "Welcome to the App",
  "change_lang": "Change the language"
}

// ar.json
{
  "welcome": "مرحبا بك في التطبيق",
  "change_lang": "تغيير لغة التطبيق"
}

2. 添加依赖

在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  app_local: ^latest_version

# 添加资源路径
flutter:
  uses-material-design: true
  assets:
    - assets/lang/

3. 初始化

在 main.dart 中添加以下代码：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await Locales.init(
    localeNames: ['en', 'ar'],  // 您支持的语言区域
    localPath: "assets/lang/",   // 您的区域文件路径
    phoneLocale: true,          // 使用手机的默认区域
  );
  
  runApp(MyApp());
}

将 MaterialApp 包裹在 LocaleBuilder 中：

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return LocaleBuilder(
      builder: (locale) => MaterialApp(
        title: 'App Local',
        localizationsDelegates: Locales.delegates,
        supportedLocales: Locales.supportedLocales,
        locale: locale,
        home: HomeScreen(),
      ),
    );
  }
}

使用

显示翻译文本

使用小部件：

LocaleText('welcome');

使用字符串：

// 使用静态方法
Locales.string(context, 'welcome');

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

更改区域

使用静态方法：

Locales.change(context, 'ar');

// 使用扩展方法
context.changeLocale('ar');

// 切换到设备区域
Locales.change(context, 'auto');

获取当前区域

使用静态方法：

Locales.currentLocale(context);

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

iOS

如果您想支持设备默认语言，请在 Info.plist 文件中添加以下内容：

<key>CFBundleLocalizations</key>
<array>
  <!-- 添加您支持的语言区域 -->
  <string>en</string>
  <string>ar</string>
</array>

平台支持

默认本地语言

即将支持 Web, Windows 和 Linux。

完整示例

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Locales.init(
      localeNames: ['en', 'ar'],
      localPath: "assets/a/",
      phoneLocale: true); // 获取上次保存的语言
  // 移除 await async (以获取系统语言作为默认语言)

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/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](/user/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](/user/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, 'ar'),
            title: LocaleText('arabic'),
          ),
          // 使用扩展方法更改语言
          ListTile(
            onTap: () => context.changeLocale('auto'),
            title: LocaleText('auto'),
          ),
          Text('Current Locale: ' +
              Locales.currentLocale(context)!.languageCode),
          // 使用扩展方法
          // Text('Current Locale: ' + context.currentLocale.languageCode),
        ],
      ),
    );
  }
}