How to Internationalizing your Flutter apps ?

First Reading:

https://flutter.dev/docs/development/accessibility-and-localization/internationalization

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:

❤️ Support This Blog

---

If this post helped you, you can support my writing with a small donation. Thank you for reading.

---

Coffee ☕ Thanks 🙏 Extra Support ❤️