Anuvadak Flutter Integration Guide #

Table of Contents #

• Step 1: Enabling Localisation in Flutter (Mandatory)
• Step 2: Create arb file for English or Extract the Hardcoded Strings from the Application (Optional)
• Step 3: Run the Generation Code to generate the anuvadak_localisation.dart
• Step 4: Initialize the Api Key and Notifiers in the Void Main Class
• Step 5: In My App State add the Following Localisation Delegates
• Step 6: Use the Localized Strings
• Step 7: Change Language in Runtime
• Step 8: Set isProduction true to Enable Production Environment
• Step 9: Receive Callbacks (Optional)

Step 1: Enabling Localisation in Flutter (Mandatory) #

You need to add following dependencies in pubspec.yaml:

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
  anuvadak_flutter: ^0.0.3

assets:
  - lib/l10n/en.arb  # this to read en.arb in realtime to maintain translation records

Step 2: Create arb file for English or Extract the Hardcoded Strings from the Application to en.arb #

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.

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

If you want to automatically retrieve all the hard coded string you can use the following (Optional)

To Run the Following command activate the package ()

dart pub global activate anuvadak_flutter  

You can extract almost all the hardcoded strings from the app to en.arb by running this command:

generateArb

Step 3: Run the Generation Code to generate the anuvadak_localisation.dart (Only if you want to use generation keys) #

dart pub global activate anuvadak_flutter  

generate10n

After running the Generation Code, this will create a generated class. (Note: Don't alter this class)

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

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 5: In My App State add the Following Localisation Delegates and Set the Locale in which localisations will work for #

Add these delegates:

• 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 6: 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 7: Change Language in Runtime #

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

Future<void> _saveSelectedLanguage(String language) async {
  final localeProvider = Provider.of<LocaleProvider>(context, listen: false);
  localeProvider.setLocale(Locale(language));
}

Step 8: Enable the Production Environment #

Set isProduction to true to switch to the production environment.

@override
Widget build(BuildContext context) {
  AppLocalizations.isprod = true; //Anuvadak Prod/Dev Switch


}

Step 9: Receive Callbacks (Optional) #

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

AnuvadakManager.getInstance().setCallBack(
  onUpdateSuccess: () {
    // Handle success
  },
  onError: (error) {
    // Handle error
  },
  onUpdateWithError: (error) {
    // Handle update with error
  }
);