Anuvadak Flutter Integration Guide

Table of Contents

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
  }
);

Libraries

anuvadak_flutter