Get Started

Cross-Platform Integration

LangCTL supports Flutter ARB files and React Native i18next integration for cross-platform mobile development.

Flutter Integration

Export ARB Files

langctl export my-app -l en -f flutter-arb -o lib/l10n/app_en.arb
langctl export my-app -l es -f flutter-arb -o lib/l10n/app_es.arb
langctl export my-app -l fr -f flutter-arb -o lib/l10n/app_fr.arb
flutter:
generate: true

dependencies:
flutter_localizations:
  sdk: flutter
intl: any

arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
nullable-getter: false
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return MaterialApp(
    localizationsDelegates: AppLocalizations.localizationsDelegates,
    supportedLocales: AppLocalizations.supportedLocales,
    home: HomePage(),
  );
}
}

class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
  final l10n = AppLocalizations.of(context)!;

  return Scaffold(
    appBar: AppBar(title: Text(l10n.homeWelcome)),
    body: Text(l10n.homeSubtitle),
  );
}
}
npm install i18next react-i18next

langctl export my-app -l en,es,fr -f i18next -o ./locales
// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from './locales/en.json';
import es from './locales/es.json';

i18n
.use(initReactI18next)
.init({
  resources: {
    en: { translation: en },
    es: { translation: es }
  },
  lng: 'en',
  fallbackLng: 'en',
  compatibilityJSON: 'v3'
});

export default i18n;

// App.tsx
import { useTranslation } from 'react-i18next';
import './i18n';

export default function App() {
const { t, i18n } = useTranslation();

return (
  <View>
    <Text>{t('home.welcome', { username: 'John' })}</Text>
    <Button title="Español" onPress={() => i18n.changeLanguage('es')} />
  </View>
);
}
name: Flutter Build

on: [push]

jobs:
build:
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v3
    - uses: subosito/flutter-action@v2

    - name: Install LangCTL
      run: npm install -g @langctl/cli

    - name: Export Translations
      env:
        LANGCTL_API_KEY: ${{ secrets.LANGCTL_API_KEY }}
      run: |
        langctl export my-app -l en -f flutter-arb -o lib/l10n/app_en.arb
        langctl export my-app -l es -f flutter-arb -o lib/l10n/app_es.arb

    - name: Build
      run: flutter build apk
💡
Tip

Flutter automatically generates type-safe localization code from ARB files. Run `flutter gen-l10n` to regenerate after updating translations.

Next Steps