Build a Flutter Translator App Without Google Translate API

This guide shows you how to build a Flutter app that translates text between multiple languages using the free MyMemory Translation API (or any compatible endpoint). You’ll create a simple yet functional translator with a dropdown for language selection, a text input, and a translate button. No API keys are required for basic usage, making this perfect for learning or prototyping. You’ll need Flutter installed and a basic understanding of Dart and async programming.

What You’ll Need

Flutter SDK installed on your machine
A code editor (VS Code, Android Studio, or IntelliJ)
Basic knowledge of Dart syntax and Flutter widgets
An internet connection (to call the translation API)

Step-by-Step

Create a new Flutter project

Open your terminal and run:
```
flutter create translator_app
```
Then navigate into the project folder:
```
cd translator_app
```
Add the HTTP package

Open pubspec.yaml and add http under dependencies:
```
dependencies:
  http: ^1.1.0
```
Run flutter pub get to install it.
Design the UI

Replace the contents of lib/main.dart with a basic MaterialApp and a TranslatorScreen widget. For now, create a simple layout with two dropdowns (source and target language), a TextField for input, a FilledButton for translating, and a Text widget to display the result.
Define language options

Create a list of supported languages. MyMemory uses language codes like en, es, fr, etc. For this example, we’ll include English, Spanish, French, German, Italian, and Portuguese:
```
final Map<String, String> languages = {
  'English': 'en',
  'Spanish': 'es',
  'French': 'fr',
  'German': 'de',
  'Italian': 'it',
  'Portuguese': 'pt',
};
```
Implement the translation function

Add a method that calls the MyMemory API. The endpoint is:
```
https://api.mymemory.translated.net/get?q=YOUR_TEXT&langpair=SOURCE|TARGET
```
In Dart, use the http package to make a GET request and parse the JSON response. Extract the translated text from responseData.translatedText.
Wire up the button

In the onPressed callback of the button, call the translation function. Use setState to update the UI with the result. Show a loading indicator while the request is in progress.
Handle errors gracefully

Wrap the API call in a try-catch block. If the request fails (e.g., no internet), display a friendly error message. Also check if the input text is empty and show a validation message.
Test the app

Run flutter run on an emulator or physical device. Enter some text, select languages, and tap the translate button. You should see the translated text appear.
Polish the UI (optional)

Add a swap button to quickly exchange source and target languages. Use a ListView to make the layout scrollable when the keyboard appears. Add a copy-to-clipboard button for the result.

Common Mistakes

Forgetting to add the http package – The app will fail to compile if you don’t add http to pubspec.yaml.
Incorrect API URL format – The langpair parameter must be in the format source|target with a pipe separator. A common mistake is using a comma or a space.
Not handling async properly – The translation function must be marked async and awaited in the button callback. Otherwise, the result will be a Future that never updates the UI.
Ignoring the response structure – The API returns a JSON object with a responseData field. Accessing responseData.translatedText directly without parsing the JSON will throw an error.
Hardcoding language codes – If you use a language name as the code (e.g., ‘English’ instead of ‘en’), the API will return an error. Always map display names to valid codes.

Tips

Use a state management solution – For a production app, consider using Provider or Riverpod to manage the translation state, especially if you add features like history.
Add a debounce – If you want to translate as the user types, add a debounce (e.g., 500ms) to avoid hitting the API too frequently.
Cache translations – Store recent translations in a local database (like sqflite) to reduce API calls and improve offline experience.
Test with different text lengths – MyMemory has a limit of 500 bytes per request. For longer texts, you may need to split them into chunks.
Use the intl package for localization – If you plan to support multiple UI languages, use the intl package to format dates and numbers.

Troubleshooting

App crashes when pressing translate – Check the console for errors. The most likely cause is a network issue or an incorrect URL. Make sure you have internet permission in AndroidManifest.xml (for Android) or Info.plist (for iOS). For Android, add <uses-permission android:name="android.permission.INTERNET"/>.
Translation returns the same text – This usually means the API didn’t recognize the source language. Verify the language codes are correct (e.g., use ‘en’ for English, not ‘eng’).
Error: “Invalid language pair” – The API expects the source and target codes to be different. If they are the same, the API returns an error. Disable the translate button when source == target.
Slow response – The free MyMemory API can be slow. Show a loading spinner and consider adding a timeout to the HTTP request (e.g., 10 seconds).
Text is truncated – MyMemory has a 500-byte limit. If you exceed it, split the text into sentences or paragraphs and translate them sequentially.

Frequently Asked Questions

Is the MyMemory API free?

Yes, the MyMemory API is free for non-commercial use. It has a daily limit of 5,000 characters per IP address, which is sufficient for most personal projects.

Can I use this offline?

No, the MyMemory API requires an internet connection. For offline translation, you would need to integrate a local model like google_mlkit_translation or deep_translator (which still requires internet for some engines).

How do I add more languages?

Simply add more entries to the languages map with valid MyMemory language codes. You can find the full list on the MyMemory website.

What is the maximum text length I can translate?

The free API accepts up to 500 bytes per request. For longer texts, you’ll need to split them into smaller chunks and translate each separately.

Can I use this in a commercial app?

MyMemory’s free tier is for non-commercial use. For commercial apps, you should either purchase a paid plan or use a different API like Google Cloud Translation (which requires an API key).

How do I handle special characters or emojis?

The API handles Unicode characters, so emojis and special characters should work. However, ensure you encode the URL properly using Uri.encodeComponent for the text parameter.

General steps for current mainstream versions; menus can differ by device and version. See the disclaimer or report an error.

More in this bed

The whole Tech How-To bed →