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
- Mobile Integration - Native iOS/Android
- Web Integration - Web frameworks
- CI/CD - Automated workflows