anuvadak_flutter 0.0.2 copy "anuvadak_flutter: ^0.0.2" to clipboard
anuvadak_flutter: ^0.0.2 copied to clipboard

Anuvadak OTA Localisation SDK

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.1

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

Step 2: Extract the Hardcoded Strings from the Application (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 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: Set isProduction true to Enable Production Environment #

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

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