Localization/Multi-Language in flutter

您好，让我们了解如何制作为您的用户提供本地化的应用程序。

Don’t get it, me too 😜, think about your user who installs your app and uninstall it right after because they don’t understand your app language. Don’t worry flutter let us develop apps that our users understand.

Refers to Flutter official docs or follow our 7 simple steps tutorial.
https://flutter.dev/docs/development/accessibility-and-localization/internationalization

Step 1: Start by adding these dependencies(flutter_localizations, provider, intl) in pubspec.yaml and add generate: true

dependencies:
 flutter_localizations:
 sdk: flutter
 provider:
 intl: ^0.17.0
 ….
 ….
flutter:
 uses-material-design: true
 generate: true

Step 2: Now create l10n.yaml ([its small L]10n) file and paste these code

arb-dir: lib/l10n
template_arb-file: app_en.arb
output_localization-files: app_localizations.dart

in the above code arb-dir is the input for all the localization file and app_en.arb is the template and output_localization-files will be the output file that flutter will generate for us (that’s why we use generate:true in pubspec.yaml file).

Step 3: As we define in l10n.yaml file the input files will be available under lib/l10n folder. We need to develop l10n folder under the lib folder and will put the files we create at step 4 and step 5.

Folder Structure for l10n folder

Step 4: create all_locales.dart file under l10 folder

import ‘package:flutter/material.dart’;
class AllLocale{
 AllLocale();
static final all = [
 const Locale(“en”, “US”),  // en is language Code and US
                            // is the country code
 const Locale(“hi”, “In”),
 ];
 }

Language Codes - Sorted by

Step 5: Now we will create language-specific files. We are using English and Hindi language only in our app but you can use as many 78 languages in your application following the same code structure.

Now we will make .arb files for every language we want to include in our application.

Notes:

* Make sure that these files are under l10n folder.
* Make sure the extension of these files is .arb,
* Keys name should start with small letters and should not starts with any special characters.
* Don't put a comma at the end of the last key-value pair.
* If it is required to accept parameters then you can do the same as we do with gst that takes rate as a parameter.

-> app_en.arb

{
 “frieghtInRs”: “Freight (Rs)”,
 “gst” : “GST ({rate}%) (Rs)”,
 “@gst”:{
 “description”: “Enter % for gst”,
 “placeholders”: {
 “rate”: {
         “type”:”String”
         }
       }
    }, 
 “language”: “English”
}

-> app_hi.arb

{ 
 “frieghtInRs”: “किराया (रु.)”,
 “gst” : “GST ({rate}%) (रु.)”,
 “language”: “Hindi”
}
you don't need placeholders in files other than template arb file that is app_en.arb in our case.

Step 6: Now set all the location delegates and locales in MaterialApp in main.dart file.

import ‘package:flutter_localizations/flutter_localizations.dart’;

MaterialApp(
           title: 'Parcel',
           debugShowCheckedModeBanner: false,
           theme: ThemeData(
                      primarySwatch: Colors.orange,
                 ),
           supportedLocales: AllLocale.all,
           locale: Provider.of<LocaleProvider>(context).locale, 
           localizationsDelegates: [
                  AppLocalizations.delegate,
                  GlobalMaterialLocalizations.delegate,
                  GlobalCupertinoLocalizations.delegate,
                  GlobalWidgetsLocalizations.delegate,
                  ],
           initialRoute: "/",
           onGenerateRoute: Routes.generateRoutes,
          )

We used Locale Provider to set locale value in the above code let’s create that file too.

import 'l10n/all_locales.dart';
class LocaleProvider with ChangeNotifier {
Locale _locale;
Locale get locale => _locale;
void setLocale(Locale locale) {
if (!AllLocales.all.contains(locale)) return;
_locale = locale;
notifyListeners();
   }
}

Step 7: Now run flutter pub get it will generate localization files under dart_tools/flutter_gen. Congratulations🎉🎉, now you are ready to impress your employer or/and colleague.

It’s time to use the multi-language in the app’s UI.

To change the app language either use the below code or change the device language through the device setting.

Provider.of<LocaleProvider>(context,listen: false)
  .setLocale(AllLocale.all[1]);

To use the localization:

Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              AppLocalizations.of(context).frieghtInRs + "50",
              style: Theme.of(context).textTheme.headline4,
            ),
            Text(
              AppLocalizations.of(context).gst("5") + "10",
              style: Theme.of(context).textTheme.headline4,
            ),
            Text(
              "${AppLocalizations.of(context).total}: 60",
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),

Hooray! You have created an app that supports multi-language.

Thank you for being with us to this point, Don’t forget to like. Here is your reward 😊.

GitHub - NishadAvnish/localizations_flutter