Building a Country Matching Game in Flutter with Tolgee for Localization

Introduction

Localization is essential for building applications that cater to a global audience. Whether you’re building a productivity tool, a game, or an educational app like our Country Matching Game, supporting multiple languages enhances the user experience significantly. In this post, we’ll take a deep dive into creating a Country Matching Game in Flutter and integrating Tolgee for localization, which allows us to effortlessly support different languages.

What is the Country Matching Game?

The Country Matching Game is a simple and educational game where users match countries with their capitals, languages, or cultural symbols. The app provides users with draggable elements that represent countries, and users must match them with corresponding labels.

The app features:

• Interactive drag-and-drop mechanics for matching countries with attributes.

• A score-tracking system.

• Localization support for multiple languages, powered by Tolgee.

Let’s explore how to build the game and implement localization using Tolgee.

Why Tolgee for Localization?

Tolgee is a fantastic localization platform that simplifies the process of translating your app into multiple languages. Unlike other localization solutions, Tolgee offers an intuitive, web-based interface to manage translations, and it integrates seamlessly with Flutter.

Key benefits of Tolgee:

• Easy Translation Management: You can manage translations through a user-friendly interface.

• Real-Time Translation: Changes made to translations are instantly available in your app.

• Out-of-the-box Flutter Support: Tolgee supports Flutter with easy integration.

Now, let’s implement it in our game.

Implementing Tolgee in Flutter

Setting up Tolgee was a breeze. I initialized it in the main.dart of my Flutter app and set up localization like so:

void main() async {
  await Tolgee.init(
    apiKey: 'YOUR_API_KEY',  // Replace with your Tolgee API key
    apiUrl: 'https://app.tolgee.io/v2',
  );
  runApp(const MyApp());
}

After that, I used Tolgee’s TranslationText widget to dynamically update the UI text based on the selected language:

child: const TranslationText('welcome_message'),

This made it easy to support different locales with minimal effort.

Key Takeaways

Using Tolgee in my Country Matching Game allowed me to localize the app efficiently without worrying about manual string management. The app supports switching between languages instantly, offering a localized experience to a global audience.

If you’re interested in trying out the game or contributing, you can check out the project on GitHub.

Thanks to: A huge shoutout to Marketa Cizmar and the Tolgee team for creating such a fantastic localization tool that made this project possible.