A Step-by-Step Guide to OTA App Localisation in Flutter

Step 1 : Setting up a project in Flutter

Create a new flutter project using the following command:

flutter create multi_lang_app

Navigate to the project directory using the following command:

cd multi_lang_app

Step 2 : Enabling Anuvadak localisation in Flutter

Open pubspec.yaml and add the following dependencies for localisation.

 dependencies:

flutter:

sdk: flutter

flutter_localizations:

sdk: flutter

intl: ^0.19.0

http: ^1.1.0

sqflite: ^2.0.0+4

path_provider: ^2.0.13

provider: ^6.0.0

shared_preferences: ^2.0.15

package_info_plus: ^4.0.0

args: ^2.3.1

AnuvadakFlutter:

path: “path for Anuvadak Flutter SDK”

assets:

– lib/l10n/en.arb

#this to read en.arb in realtime to maintain translation records

Run Flutter pub get to install dependencies.

Step 3 : Create language specific files

Next we will need to create language specific files for each language. Let’s say we have to create an English, Hindi, and Marathi app. These are the steps to follow.

1. Create a directory for localisation files called l10n (localisation) in the lib (library) folder.
2. Add ARB files (Application Resource Bundle), ARB files contain translated strings for each language. Create two files inside the l10n directory:

en.arb (for English)

Step 4 : Configuring localisation in pubspec.yaml

Add the following command to configure localisation.

flutter:

 generate: true

 assets:

   – lib/l10n/

Run Flutter pub get to sync the asset files.

Step 5 : Generating localisation files

Generate the necessary dart files from the ARB files using the following command:

dart run AnuvadakFlutter:runGenerate.dart

The above command generates a lib/generated directory. Within this directory will be a file anuvadak_localisation.dart that contains localisation logic.

Step 6 : Initialize the Api Key and Notifiers in the Void Main Class

To get the Anuvadak API key click  here.

 void main(){

  await AnuvadakManager.getInstance().initialize(Constants.anuvadakApiKey);

  runApp(

  MultiProvider(

   providers: [

        ChangeNotifierProvider(

       create: (context) => LocaleProvider(languageCode: _selectedLanguage),

     ), // pass the lang code u want to launch the app in start

     // Add other providers here as needed

   ],

   child: MyApp(),

 ),

);

Step 7 : In My App State add the following localisation delegates and set the locale in which localisations will work for

       GlobalMaterialLocalizations.delegate,

       GlobalCupertinoLocalizations.delegate,

       GlobalWidgetsLocalizations.delegate,

       AppLocalizations.delegate

class MyApp extends StatefulWidget {

 const MyApp({super.key});

 @override

 _MyAppState createState() => _MyAppState();

}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {

 @override

 Widget build(BuildContext context) {

   final localeProvider = Provider.of<LocaleProvider>(context, listen: false);

   localeProvider.setLocale(Locale(_selectedLanguage));

   AppLocalizations.isprod = true; //Anuvadak Prod/Dev Switch

   return MaterialApp(

     debugShowCheckedModeBanner: false,

     title: ‘My App’,

     theme: ThemeData(

       primarySwatch: Colors.blue,

     ),

     navigatorKey: navigatorKey,

     home: SplashScreen(sharedId: “”, uri: “”),

     localizationsDelegates: [

       GlobalMaterialLocalizations.delegate,

       GlobalCupertinoLocalizations.delegate,

       GlobalWidgetsLocalizations.delegate,

       FlutterQuillLocalizations.delegate,

       AppLocalizations.delegate

     ],

     supportedLocales: [

       Locale(‘en’, ”), // English

       Locale(‘hi’, ”), // Hindi

       Locale(‘bn’, ”),

       Locale(‘or’, ”),

       Locale(‘mr’, “”),]}

Step 8 : Use the Localized Strings 

You can use the localised string from the generated class like this 

 Text(

 AnuvadakLocalisation(context)

     .blogCategoryOrSubject,

 style: TextStyle(

     fontSize: 16,

     fontWeight: FontWeight.w400),

),

If you have not used generation code you can call the Key from en.arb like this

   AppLocalizations.of(context).translate(‘Join mission’);

Step 9 : Change Language in Runtime 

Make sure you have added the Notifier in the Main Function of the Application 

 final localeProvider = Provider.of<LocaleProvider>(context, listen: false);

 localeProvider.setLocale(Locale(language));

Step 10 : Receive Callbacks (Optional)

You can receive callbacks of translations Calls and animate your UI during the Translation Calls

AnuvadakManager.getInstance().setCallBack(

   onUpdateSuccess: () {

   },

   onError: (error) {

   },

   onUpdateWithError: (error) {

   });