Building A Simple Text Translation App With Flutter And Firebase

Firebase category image

Introduction

With Firebase Extensions you can build a simple text translation app that does most of the work for you.

There are many ways to build a translation app. In this article, I am going to show you how to use Firebase for that task. A Flutter app will transmit the text to be translated to Firebase and display the final result. We will use Firebase Cloud Firestore and a Firebase Extension called Translate Text for this purpose.

🔔 Hint

Be aware that you might run into some costs. An installed extension costs around 1 cent per month and it normally uses other services in the background which can increase these costs. You will also need to activate the Blaze plan.

Firebase setup

First, we need to install the required extension. Go to BuildExtensions.

Screenshot of Firebase Extensions menu entry by author
Screenshot of Firebase Extensions menu entry by author

Afterward, find the extension Translate Text and install it.

Screenshot of Firebase Extension Translate Text by author
Screenshot of Firebase Extension Translate Text by author

Follow the wizard. During the process, you might encounter hints for additional services that need to be enabled for the extension to work.

Screenshot of missing additional services to be enabled in Firebase by author
Screenshot of missing additional services to be enabled in Firebase by author

Configure the extension to your needs or use the default values. A guide on how to select the best location can be found here.

Screenshot of extension configuration in Firebase by author
Screenshot of extension configuration in Firebase by author

The process will take some minutes to complete.

Screenshot of extension installing process in Firebase by author
Screenshot of extension installing process in Firebase by author

You can see the details of the extension in the Extensions dashboard in Firebase. There is also an explanation of how to set up Cloud Firestore.

Screenshot of installed extension in Firebase by author
Screenshot of installed extension in Firebase by author

Now, we switch to the Cloud Firestore database. According to the instructions we create a new collection called translations and a document with a field called input. The value of the input field will be translated to the configured languages and stored in the translated field.

🔔 Hint

What happens behind the scenes? When the field value changes, a cloud function is triggered (you can see it in the Cloud Functions Dashboard of Firebase). It uses the Cloud Translation API to translate the text and writes the result back to the Cloud Firestore document.

The Firebase setup is completed. Let’s write a simple Flutter app to make use of our workflow.

Want More Flutter Content?

Join my bi-weekly newsletter that delivers small Flutter portions right in your inbox. A title, an abstract, a link, and you decide if you want to dive in!

App setup

We need to create an app that writes text to Cloud Firestore and listens to changes which it will then display to the user.

Step 1: Create a Flutter project.
Use the command flutter create my_sample_project or your IDE of choice for it.

Step 2: Link it with your Firebase project.
Run flutterfire configure from the project root folder and follow the wizard.

Step 3: Install Firebase packages.
We need the Core package and since we want to use Cloud Firestore, we need that package, too.

Step 4: Add Firebase initialization code.
Add

Dart
await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform); 

to main function and make it asynchronous.

Step 5: Build a simple UI.
I’ll go with one TextField widget, one ElevatedButton widget, and 4 Text widgets inside of a StreamBuilder for the translations.

Step 6: Connect UI to Cloud Firestore.
The button sends the text to Firestore and the UI listens for changes. Here’s some code:

And this is what the final example can look like:

Video of the demo translation app by author
Video of the demo translation app by author

It will take you an hour at most to get to this result. A translation feature that can be integrated in any app.

How much is it?

As mentioned earlier, this workflow is not for free. You will be charged for the following reasons:

▶ Firebase resources of the extension (around 1 cent per month)
▶ Cloud Firestore
▶ Cloud Functions
Cloud Translation API
▶ Additional Firebase and Google Cloud Platform services

Some of these services have free quotas (Cloud Firestore for example) but not all of them. The final price is always connected to the number of users your app will have. Monitoring your expenses is highly recommended.

If you are just experimenting with Firebase, you won’t get charged more than some cents per month.

Level up your Firebase skills!

Check out my free email course on Firebase fundamentals, and grab your copy of my Firebase ebooks. Start building amazing apps with Firebase today!

Additional resources

Here are some additional resources about Firebase in case you want to dive deeper into the topic.

Firebase Cloud Functions

Your all-in-one toolbox to building serverless infrastructures in the cloud. Write once and scale to infinity!

Firebase Cloud Storage

Upload and download user-generated content like on a file system. Firebase Cloud Storage makes file handling simple!

Firebase Remote Config

Real-time feature toggles or A/B testing are typical use cases of Firebase Remote Config. Learn how to implement them now!

Firebase Console

Learn how to manage projects, apps, users, billing plans, and costs with step-by-step guides in the Firebase Console.

Firebase Cloud Firestore

Learn about Firebase Firestore and write mobile apps with the power of a modern and fast NoSQL database.

Firebase Authentication

Implement email/password authentication or use social providers like Google, Microsoft, and Facebook for your apps!

Firebase Hosting

Host your web apps, microservices, dynamic, and static content with this powerful yet simple solution from Firebase!

Conclusion

This is a small example of what you can build with Firebase and its features. The source code of the Flutter app is available on GitHub.


Want More Flutter Content?

Join my bi-weekly newsletter that delivers small Flutter portions right in your inbox. A title, an abstract, a link, and you decide if you want to dive in!

Become A Firebase Expert!

Take a deep dive into Firebase and learn how to really handle their services. This ebook makes you an instant Firebase professional!

Flutter โค๏ธ Firebase

Get started with Firebase and learn how to use it in your Flutter apps. My detailed ebook delivers you everything you need to know! Flutter and Firebase are a perfect match!