展示

安装

✔️ 添加包和声明目录 (pubspec.yaml)

dependencies:
  easy_localization: ^3.0.0 # 현지화
  flutter_phoenix: ^1.0.0  # 앱 재시작

flutter:
  assets:
   - assets/langs/
  

✔️ 添加文件夹和翻译文件

assets
└── langs
    ├── ko.json                  
    └── en.json
  • 虽然可以像国家代码一样使用,但有时设备无法识别设备的locale信息,因此本示例仅使用语言代码
    • ko : 韩语
    • en : 英语
    • locale : 语言代码 + 国家代码
      • 例如) 如果设备的语言是英语,地区是韩国 → en_KR
        • 如果将翻译文件添加为ko_KR,由于语言代码不匹配,将设置为默认值

✔️ iOS

  • ios/Runner/Info.plist文件中添加支持的locale信息

<key>CFBundleLocalizations</key>
<array>
   <string>en</string>
   <string>ko</string>
</array>

?  示例

import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter_phoenix/flutter_phoenix.dart';
import 'package:localization_example/screens/home_screen.dart';
import 'package:localization_example/widgets/language_button.dart';

import 'constants.dart';

void main() async {
  // main 메서드에서 비동기 메서드 사용시 반드시 추가
  WidgetsFlutterBinding.ensureInitialized();
  // 패키지 초기화
  await EasyLocalization.ensureInitialized();
  runApp(
    Phoenix(
      child: EasyLocalization(
        supportedLocales: const [en, ko], // 지원하는 언어 리스트
        path: 'assets/langs', // 언어 파일이 있는 경로
        fallbackLocale: en, // 기본값 
        child: const MyApp(), 
      ),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    // 기기의 언어 설정이 한국어일경우 ko, 영어일 경우 en, 그 외일경우 기본값인 en 출력
    debugPrint('Locale : ${context.locale}');
    return Scaffold(
      appBar: AppBar(
        title: const Text('appBar').tr(),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            LanguageButton(
              text: '한국어',
              locale: ko,
            ),
            SizedBox(height: 12),
            LanguageButton(
              text: 'English',
              locale: en,
            ),
          ],
        ),
      ),
    );
  }
}

class LanguageButton extends StatelessWidget {
  const LanguageButton({
    Key? key,
    required this.text,
    required this.locale,
  }) : super(key: key);

  final String text;
  final Locale locale;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () async{
        await context.setLocale(locale);
        await EasyLocalization.ensureInitialized();
        Phoenix.rebirth(context);
      },
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey),
          borderRadius: const BorderRadius.all(Radius.circular(4)),
        ),
        child: Text(text),
      ),
    );
  }
}

✔️ 更改locale

await context.setLocale(locale);

✔️ 翻译 (tr())

  • ../en.json

{
  "appBar" : "Localization Example"
}
  • ../ko.json

{
  "appBar" : "Localization 예제"
}

// en : Localization Example
// ko : Localization 예제
const Text('appBar').tr(),

✔️ 重启应用

Phoenix.rebirth(context);

GitHub

查看 Github