How to Internationalizing your Flutter apps ?
First Reading:
Steps:
1. add flutter_localizations dependencies into pubspec.yaml
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
2. add localizationsDelegates and supportedLocales into MaterialApp
Applocalizations.delegate is your app-specific localization delegate.
will be introduced in next step.
Widget build(BuildContext context) {
return MaterialApp(
localizationsDelegates: [
AppLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: [
const Locale.fromSubtags(languageCode: 'zh'), // generic Chinese 'zh'
const Locale.fromSubtags(
languageCode: 'zh',
scriptCode: 'Hans'), // generic simplified Chinese 'zh_Hans'
const Locale.fromSubtags(
languageCode: 'zh',
scriptCode: 'Hant'), // generic traditional Chinese 'zh_Hant'
const Locale.fromSubtags(
languageCode: 'zh',
scriptCode: 'Hans',
countryCode: 'CN'), // 'zh_Hans_CN'
const Locale.fromSubtags(
languageCode: 'zh',
scriptCode: 'Hant',
countryCode: 'TW'), // 'zh_Hant_TW'
const Locale.fromSubtags(
languageCode: 'zh',
scriptCode: 'Hant',
countryCode: 'HK'), // 'zh_Hant_HK'
const Locale('en', ''),
],
3. Defining your own class for the app's localized resources
import 'package:flutter/material.dart';
import 'app_localizations_delegate.dart';
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 = {
'zh': {
'appTitle': '海德堡要理问答',
},
'en': {
'appTitle': 'The Heidelberg Catechism',
},
};
String get appTitle {
return _localizedValues[locale.languageCode]['appTitle'];
}
static const LocalizationsDelegate<AppLocalizations> delegate =
AppLocalizationsDelegate();
}
import 'package:TheHeidelbergCatechism/i18n/app_localizations.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {
const AppLocalizationsDelegate();
@override
bool isSupported(Locale locale) => ['en', 'zh'].contains(locale.languageCode);
@override
Future<AppLocalizations> load(Locale locale) {
print(locale.languageCode);
return SynchronousFuture<AppLocalizations>(AppLocalizations(locale));
}
@override
bool shouldReload(AppLocalizationsDelegate old) => false;
}
4. Use AppLocalizations
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(AppLocalizations.of(context).appTitle),
),
Demo:
Comments
Post a Comment