How to Integrate Real-Time Translation Features in FlutterFlow

In your Firebase Cloud Functions, create a function named translateText. It receives a POST request from FlutterFlow with: sourceText (the text to translate), targetLanguage (a BCP-47 language code like 'es', 'fr', 'ja', 'zh'), and optionally sourceLanguage (if not provided, the API auto-detects). The function calls the Translation API v3 endpoint using your service account credentials. Using Cloud Functions keeps your API key server-side — never put a Translation API key in FlutterFlow's API Manager headers where it can be extracted from the compiled app. The endpoint is https://translation.googleapis.com/v3/projects/{projectId}:translateText with a POST body containing the text and target language. Return the translated text in the response.

1// functions/index.js — Google Cloud Translation proxy
2// Install: cd functions && npm install axios
3const functions = require('firebase-functions');
4const admin = require('firebase-admin');
5const axios = require('axios');
6
7admin.initializeApp();
8
9exports.translateText = functions.https.onRequest(async (req, res) => {
10  res.set('Access-Control-Allow-Origin', '*');
11  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
12
13  const { sourceText, targetLanguage, sourceLanguage, contentId } = req.body;
14
15  if (!sourceText || !targetLanguage) {
16    res.status(400).json({ error: 'sourceText and targetLanguage required' });
17    return;
18  }
19
20  // Check Firestore translation cache first
21  const db = admin.firestore();
22  if (contentId) {
23    const cacheDoc = await db
24      .collection('translation_cache')
25      .doc(`${contentId}_${targetLanguage}`)
26      .get();
27    if (cacheDoc.exists) {
28      res.json({ translatedText: cacheDoc.data().text, fromCache: true });
29      return;
30    }
31  }
32
33  // Call Google Cloud Translation API v3
34  const projectId = process.env.GCLOUD_PROJECT;
35  const apiKey = functions.config().translation.api_key;
36
37  try {
38    const response = await axios.post(
39      `https://translation.googleapis.com/v3/projects/${projectId}:translateText`,
40      {
41        contents: [sourceText],
42        targetLanguageCode: targetLanguage,
43        sourceLanguageCode: sourceLanguage || null,
44        mimeType: 'text/plain',
45      },
46      { params: { key: apiKey } }
47    );
48
49    const translatedText =
50      response.data.translations[0].translatedText;
51    const detectedLanguage =
52      response.data.translations[0].detectedLanguageCode;
53
54    // Cache the translation in Firestore
55    if (contentId) {
56      await db
57        .collection('translation_cache')
58        .doc(`${contentId}_${targetLanguage}`)
59        .set({
60          text: translatedText,
61          sourceLanguage: detectedLanguage || sourceLanguage,
62          targetLanguage,
63          contentId,
64          cachedAt: admin.firestore.FieldValue.serverTimestamp(),
65        });
66    }
67
68    res.json({ translatedText, detectedLanguage });
69  } catch (err) {
70    console.error('Translation API error:', err.response?.data || err.message);
71    res.status(500).json({ error: 'Translation failed', details: err.message });
72  }
73});
74
75// Set config: firebase functions:config:set translation.api_key='YOUR_KEY'
76// Deploy: firebase deploy --only functions

In FlutterFlow, go to API Manager → Add API Group → name it TranslationService. Set the Base URL to your Cloud Function URL. Add an API Call named translate with Method: POST and request body: {"sourceText": "[sourceText]", "targetLanguage": "[targetLanguage]", "contentId": "[contentId]"}. The [variableName] syntax creates dynamic variables you bind to widget values. Click Test and verify the response. For the language selector, add a DropDown widget to your page. Populate it with the most common target languages as static options — label/value pairs: English/en, Spanish/es, French/fr, German/de, Japanese/ja, Portuguese/pt, Chinese Simplified/zh-CN, Arabic/ar, Hindi/hi, Russian/ru. Bind the DropDown's initial value to a Page State variable named selectedLanguage (initial value: your app's default language, e.g., 'en'). On DropDown change, update the selectedLanguage Page State variable to the newly selected language code.

Create a UI layout for a translatable content item — for example, a chat message bubble or a product review. Add a Column widget containing: a Text widget (originalText) displaying the source content from your Backend Query, a Divider, a Text widget (translatedText) initially hidden, a Row with a translate icon button and a language label. Create two Page State variables: translatedText (String, initial: ''), showTranslation (Boolean, initial: false). The translatedText Text widget uses Conditional Value for visibility: show if showTranslation == true. Bind its text to the translatedText Page State variable. On the translate icon button, add an Action Flow: (1) Update Page State showTranslation = true, (2) call translate API with sourceText = the content text, targetLanguage = selectedLanguage Page State, contentId = the document ID, (3) Update Page State translatedText = API response translatedText field. Add a small 'Show original' toggle below the translated text that sets showTranslation = false. This gives users control — translation is on-demand, not automatic.

Google Cloud Translation API charges $20 per million characters. A chat app with 1,000 messages of 100 characters each translated to 5 languages = 500,000 characters = $10 every time your full message history is translated. Cache translations to eliminate this cost for repeated translations. The Cloud Function already implements a translation_cache Firestore collection (from Step 1). For content stored in Firestore (blog posts, product descriptions), add a translations map field to the document: {en: 'original text', es: 'texto traducido', fr: 'texte traduit'}. When the user requests a translation: check if the translations map already has the target language → if yes, display cached translation → if no, call the Cloud Function, then update the document's translations map. In FlutterFlow: modify the translate Action Flow: first check the Backend Query result's translations map for the selected language key. Use a Custom Function translateFromCache(Map translations, String lang) that returns the cached translation if it exists, or an empty String if not. If the result is empty, call the API and update the translations map using Firestore Update Document Action.

For use cases where users might be offline (traveling, poor connectivity) or where privacy matters (translating sensitive content without sending to Google servers), use on-device translation via the google_mlkit_translation Flutter package. In FlutterFlow: Custom Code → Pubspec Dependencies → add google_mlkit_translation with the current version. Create a Custom Action named translateOnDevice with parameters: sourceText (String), targetLanguageCode (String). The action downloads the language model if not already downloaded (one-time download per language, about 20-30MB), then translates locally without an internet connection. Add a Toggle widget to your translation UI: 'Use offline translation'. Bind a Page State useOfflineTranslation: Boolean to the toggle. In the translate Action Flow, use a Conditional Action: if useOfflineTranslation == true → call translateOnDevice Custom Action, else → call the TranslationService API Call. Language model downloads happen on first use — show a CircularProgressIndicator with text 'Downloading language model...' during the first offline translation for a new language.

1// Custom Action: translateOnDevice
2// Add to Pubspec: google_mlkit_translation: ^0.9.0
3// Parameters:
4//   sourceText (String)
5//   targetLanguageCode (String)  e.g. 'es', 'fr', 'de'
6// Returns: String (translated text)
7
8import 'package:google_mlkit_translation/google_mlkit_translation.dart';
9
10Future<String> translateOnDevice(
11  String sourceText,
12  String targetLanguageCode,
13) async {
14  // Map BCP-47 code to MLKit TranslateLanguage
15  final languageMap = {
16    'es': TranslateLanguage.spanish,
17    'fr': TranslateLanguage.french,
18    'de': TranslateLanguage.german,
19    'ja': TranslateLanguage.japanese,
20    'zh': TranslateLanguage.chinese,
21    'pt': TranslateLanguage.portuguese,
22    'ar': TranslateLanguage.arabic,
23    'hi': TranslateLanguage.hindi,
24    'ru': TranslateLanguage.russian,
25    'ko': TranslateLanguage.korean,
26  };
27
28  final targetLanguage =
29      languageMap[targetLanguageCode] ?? TranslateLanguage.spanish;
30
31  // Download model if needed (first time per language)
32  final modelManager = OnDeviceTranslatorModelManager();
33  final isDownloaded = await modelManager.isModelDownloaded(
34    targetLanguage.bcpCode,
35  );
36  if (!isDownloaded) {
37    await modelManager.downloadModel(
38      targetLanguage.bcpCode,
39      isWifiRequired: false,
40    );
41  }
42
43  final translator = OnDeviceTranslator(
44    sourceLanguage: TranslateLanguage.english,
45    targetLanguage: targetLanguage,
46  );
47
48  final result = await translator.translateText(sourceText);
49  translator.close();
50  return result;
51}