Flutter国际化翻译插件flutter_translation的使用

Flutter国际化翻译插件flutter_translation的使用

一个帮助在Flutter中实现翻译时消除样板代码的包。

开始使用

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

dependencies:
  flutter_translation: ^0.0.5
  flutter_localizations:  
      sdk: flutter

接下来，创建翻译类：

// app_translator.dart
abstract class AppTranslator extends ITranslator {
  const AppTranslator();

  String get title;
}

class PtTranslator extends AppTranslator {
  String get title => 'Título'; // 葡萄牙语
}

class EnTranslator extends AppTranslator {
  String get title => 'Title'; // 英语
}

然后，创建语言类：

// app_languages.dart
class AppLanguages extends ILanguages {
  AppLanguages.singleton();

  [@override](/user/override)
  LanguageEntity get defaultLanguage =>
      languages.firstWhere((lang) => lang.code == 'en');

  [@override](/user/override)
  List<LanguageEntity> createLanguages() {
    return [
      LanguageEntity(
        code: 'pt',
        name: 'Português', // 葡萄牙语
        translator: PtTranslator(),
      ),
      LanguageEntity(
        code: 'en',
        name: 'English', // 英语
        translator: EnTranslator(),
      ),
    ];
  }
}

你需要从AppLanguages创建一个单例。这里我使用getIt来完成这个操作。如果你还没有设置getIt，可以参考以下步骤：

// getIt配置
getIt.registerSingleton<AppLanguages>(AppLanguages.singleton());

接下来，创建本地化类和委托类：

// app_localizations.dart
class AppLocalizations extends ILocalizations<AppTranslator> {
  AppLocalizations.singleton(Locale locale) : super(locale);

  [@override](/user/override)
  AppTranslator getTranslator(String languageCode) {
    throw UnimplementedError();
    // something like: getIt<AppLanguages>().findByCode(languageCode).translator
  }
}

class AppLocalizationsDelegate extends ILocalizationsDelegate<AppLocalizations> {
  const AppLocalizationsDelegate();

  [@override](/user/override)
  List<LanguageEntity> getLanguages() => throw UnimplementedError(); // something like: getIt<AppLanguages>().languages;

  [@override](/user/override)
  Future<AppLocalizations> load(Locale locale) async {
    return AppLocalizations.singleton(locale); // 创建AppLocalizations实例
  }
}

现在你的设置完成了！你可以开始使用它了：

// 主应用文件
import 'package:flutter_translation/flutter_translation.dart';

return MaterialApp(
  supportedLocales: getIt<AppLanguages>()
                  .languages
                  .map((lang) => lang.toLocale()),
  locale: getIt<AppLanguages>().defaultLanguage.toLocale(),
  localizationsDelegates: [
    AppLocalizationsDelegate(),
    GlobalMaterialLocalizations.delegate, 
    GlobalWidgetsLocalizations.delegate, 
  ],
);

然后就可以使用翻译功能了：

// 在某个widget中使用
final translator = getIt.get<AppTranslator>(param1: context);
return Scaffold(
  body: Center(
    child: Text(translator.title),
  ),
);

注意：我使用getIt来进行依赖注入，但你也可以使用其他你喜欢的方式来完成这个操作。如果你想像我一样使用getIt，请将以下代码添加到你的getIt配置函数中：

getIt.registerFactoryParam<AppTranslator, BuildContext, Object>(
  (context, nullParam) => Localizations.of(context, AppLocalizations).translator,
);

或者简单地使用：

void findTranslator(BuildContext context){
  return Localizations.of(context, AppLocalizations).translator;
}

恭喜！你已经为你的应用添加了翻译支持。你可以根据需要扩展语言和字符串。你还可以管理当前语言状态以在不同语言之间切换。

如果你觉得这个实现有点复杂，记住不使用这个包的话会更复杂哦😄。如果喜欢，请不要忘记点赞😉。

完整示例Demo

以下是完整的示例代码：

// main.dart
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_translation/flutter_translation.dart';

import './translation/app_languages.dart';
import './translation/app_localizations.dart';
import './dependency_injection/getIt.dart';
import './translation/app_translator.dart';

void main() {
  AppGetIt.init();
  runApp(TranslationExampleApp());
}

class TranslationExampleApp extends StatefulWidget {
  const TranslationExampleApp({Key key}) : super(key: key);

  [@override](/user/override)
  _TranslationExampleAppState createState() => _TranslationExampleAppState();
}

class _TranslationExampleAppState extends State<TranslationExampleApp> {
  LanguageBloc _languageBloc;

  [@override](/user/override)
  void initState() {
    super.initState();
    _languageBloc = getIt<LanguageBloc>();
  }

  [@override](/user/override)
  void dispose() {
    _languageBloc.close();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return BlocProvider.value(
      value: _languageBloc,
      child: BlocBuilder<LanguageBloc, LanguageState>(
        builder: (context, state) {
          return MaterialApp(
            supportedLocales: getIt<AppLanguages>().languages.map((lang) => lang.toLocale()),
            locale: state.locale,
            localizationsDelegates: [
              AppLocalizationsDelegate(),
              GlobalWidgetsLocalizations.delegate,
              GlobalMaterialLocalizations.delegate,
            ],
            home: Home(),
          );
        },
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Text(getIt.get<AppTranslator>(param1: context).title),
            SizedBox(
              width: 200,
              child: ExpansionTile(
                title: Text('Languages'),
                children: getIt<AppLanguages>().languages.map((lang) {
                  return Container(
                    height: 50,
                    child: InkWell(
                      onTap: () => BlocProvider.of<LanguageBloc>(context).add(LanguageChangeEvent(lang.code)),
                      child: Center(child: Text(lang.name)),
                    ),
                  );
                }).toList(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}