• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

Flutter 中的应用内本地化

Flutter cps12345 1年前 (2020-06-24) 272次浏览 0个评论
Flutter 中的应用内本地化2019年1月3日

Flutter 中的应用内本地化

如果要在使用不同语言的国家/地区使用您的应用,则需要进行应用内本地化。

同样,如果您想增加用户群,那么结合用户的本地语言是非常重要的。Flutter支持本地化,并使用Locale 类来识别用户的语言,在此帮助下,您可以自由编写包含本地语言的应用程序。

以下是基本的逐步教程,介绍了实现过程。

要在我们的项目中使用本地化,我们需要使用flutter_localizations 在依赖项下面添加到 pubspec.yaml 文件,该文件允许您的项目进行本地化和翻译。

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
        sdk: flutter

实现

导入 dart 文件。

import 'package:flutter_localization_app/localization/localizations.dart';

添加本地化委托和支持的语言环境

localizationsDelegates: [
 AppLocalizationsDelegate(),
 GlobalMaterialLocalizations.delegate,
 GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [
 const Locale('en', ''), // English
 const Locale('hi', ''), // Hindi
],
locale: locale,

通过从共享的首选项中获取语言和国家/地区代码来获取语言环境。

_fetchLocale() async {
    var prefs = await SharedPreferences.getInstance();
    if (prefs.getString('languageCode') == null) {
      return null;
    }

    print('_fetchLocale():' +
        (prefs.getString('languageCode') +':' + prefs.getString('countryCode')));

return Locale(
        prefs.getString('languageCode'), prefs.getString('countryCode'));
  }

 

设置地区。

static void setLocale(BuildContext context, Locale newLocale) async {
 _MyAppState state = context.ancestorStateOfType(TypeMatcher<_MyAppState>());
 state.setState(() {
   state.locale = newLocale;
 });
}

更改语言时更新语言环境,并将其保存为共享的首选项。

void _updateLocale(String lang, String country) async {
                var prefs = await SharedPreferences.getInstance();
                prefs.setString('languageCode', lang);
                prefs.setString('countryCode', country);
                MyApp.setLocale(context, Locale(lang, country));
}

创建本地化和相应的Delegate类。委托类在flutter应用程序上使用  本地化 类。可以使用抽象的  LocalizationsDelegate 类来声明您的委托类。

import 'dart:async';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart' show SynchronousFuture;

class AppLocalizations {

  AppLocalizations(this.locale);

  final Locale locale;

  static AppLocalizations of(BuildContext context) {
    return Localizations.of<AppLocalizations>(context, AppLocalizations);
  }

  static Map<String, Map<String, String>> _localizedValues = {

    'en': {

      'appName': 'Localization Demo',

      'appNameShort': 'Localization',

      'title': 'FlutterDevs',

      'desc': 'FlutterDevs intent to deliver Flutter apps with '

          'high quality. We’ve adopted Design First attitude '

          'which helps us deliver applications of highest quality.',

    },

    'hi': {

      'appName': 'लोकलाइजेशन डेमो',

      'appNameShort': 'लोकलाइजेशन',

      'title': 'फ्लूटेरडेव्स',

      'desc': 'FlutterDevs उच्च गुणवत्ता वाले Flutter ऐप्स वितरित करने '

          'का इरादा रखता है। हमने डिजाइन फर्स्ट रवैया अपनाया है जो हमें '

          'उच्चतम गुणवत्ता के अनुप्रयोगों को वितरित करने में मदद करता है।',

    },

  };

  String get appName {
    return _localizedValues[locale.languageCode]['appName'];
  }

  String get appNameShort {
    return _localizedValues[locale.languageCode]['appNameShort'];
  }

  String get title {
    return _localizedValues[locale.languageCode]['title'];
  }

  String get desc {
    return _localizedValues[locale.languageCode]['desc'];
  }

}

class AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {

  const AppLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) => ['en', 'hi'].contains(locale.languageCode);

  @override
  Future<AppLocalizations> load(Locale locale) {
    return SynchronousFuture<AppLocalizations>(AppLocalizations(locale));
  }

  @override
  bool shouldReload(AppLocalizationsDelegate old) => false;
}

用法

 

Text(
AppLocalizations.of(context).appNameShort,
style: TextStyle(
color: Colors.black,
),
textAlign: TextAlign.center,
),

这里AppLocalizations.of(context).appNameShort从当前选定的语言环境获取值。

 

就是这样!

通过使用上述步骤,您可以创建使用本地语言的应用。

屏幕截图

Flutter 中的应用内本地化Flutter 中的应用内本地化

 

资源

您可以从Github存储库中获得该演示的完整源代码。别忘了给星标和分享仓库,这可能会帮助别人!

喜欢 (0)

您必须 登录 才能发表评论!