Preliminary knowledge

Global status management – Provider

Persistence Layer – NSUserDefaults (on iOS) and SharedPreferences (on Android)

Chapter 13: Internationalization

The main points of

Dark mode, color theme, font switch can be easily seen from the code logic and how to achieve

In Chapter 13, Internationalization, we have described how to implement local Localizations, using intl packages, and using intl_translation commands.Command self search) generate arB files (Documents translated for translators), etc. In the process of writing code, I found that every change of ARB file requires various commands to generate and modify the corresponding DART file, which is very tedious. Is there a more comfortable operation? Of course there is one here!

Complete the following steps

Add the following dependencies directly to the project’s package dependencies file (pubspec.yaml) :

dependencies: ... Omit unnecessary contentInternationalization configuration 1
  flutter_localizations:
    sdk: flutter

# Internationalization configuration 2
flutter_intl:
  enabled: true
Copy the code

Run the flutter packages get command to generate directories generated and l10n in the lib directory of the project

In this way, you only need to maintain arB files later

  1. Modify arB file contents
//intl_en.arb file addedtestField {... Ellipsis does not require content"test":"Test"} // the i10n. dart file automatically generates the correspondingtestField String gettest {
    return Intl.message(
      'Test',
      name: 'test',
      desc: ' ', args: [], ); } // Layout is usedtestField Text (S.o f (context). Test)Copy the code

Dart file does not automatically generate the test field on Android Studio. You can run the intl_translation command to generate the test field

Arb file generated in the intl directory and generated in the messages_en. dart file Dart = messages_all.dart = intl; generated = messages_all.dart = intl; generated = intl;

Map<String, LibraryLoader> _deferredLibraries = {
  'zh': () => new future. value(null),// Add Chinese support'en': () => new Future.value(null),
};

MessageLookupByLibrary _findExact(String localeName) {
  switch (localeName) {
    case 'zh':// Added Chinese supportreturn messages_zh.messages;
    case 'en':
      return messages_en.messages;
    default:
      returnnull; }}Copy the code

Dart: i10n.dart generated: messages_zh.dart: i10n.dart generated: messages_zh.dart: i10n.dart generated: messages_zh.dart

class AppLocalizationDelegate extends LocalizationsDelegate<S> { ... List<Locale> get supportedLocales {returnConst <Locale>[// The type of language supported Locale('zh'.' '), Locale('en'.' ')]; }... Omit unnecessary content}Copy the code

The above operations are automatically generated on vscode. On android studio, you can run intl_translation on arb files by yourself, and the dart file will not be automatically generated

Of course, the layout of the display language must be added in their own code oh, as follows

static String localeName(index, context) {
    switch (index) {
      caseZero:return S.of(context).autoBySystem;
      case 1:
        return 'Chinese';
      case 2:
        return 'English';
      default:
        return ' '; }}Copy the code

Dart: Dart: dart: dart: dart: dart: dart: dart: dart: dart: dart

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    returnOKToast( child: MultiProvider( providers: <SingleChildWidget>[ ChangeNotifierProvider.value(value: ThemeModel ()), / / theme provider ChangeNotifierProvider. Value (value: LocaleModel ()), the provider] / / local languages, child: Consumer2<ThemeModel, LocaleModel>( builder: (BuildContext context, themeModel, localeModel, Widget child) {return MaterialApp(
              debugShowCheckedModeBanner: false,
              theme: themeModel.themeData(),
              darkTheme: themeModel.themeData(platformDarkMode: true), locale: localeModel.locale, localizationsDelegates: [s.d. elegate, / / support GlobalCupertinoLocalizations languages, the corresponding field. The delegate, GlobalMaterialLocalizations. Delegate, GlobalWidgetsLocalizations.delegate ], supportedLocales: Spyware doctor elegate supportedLocales, languages / / / / support route configure flutter with or fluro onGenerateRoute: null, home: home (),); },),),); }}Copy the code

The source code

I’m here

rendering