Table of Contents
  1. Text Balancer
  2. Flutter Translator
    1. ARB Translation
    2. ARB Translation Exclusion
    3. ARB Update & Delete
    4. ARB Translation Check
    5. Xcode Strings Translation
    6. Metadata creation
    7. Metadata Translation
    8. Metadata Check
    9. Changelog Translation
    10. Changelog Translation
  3. Figma Translator
    1. Create Store Templates
    2. Translate Templates
  4. Finish

I have created tools that can efficiently complete Flutter multilingual support.
πŸ‘‰ ν•œκ΅­μ–΄ 버전

Part 1. Flutter Multilingual Support - Ready
βœ”οΈŽ Part 2. Flutter Multilingual Support - Tool Making


The following tools were created to solve the problems encountered when supporting multilingual languages introduced in Part 1.

  • Text Balancer : Balanced text wrapping Flutter Package.
  • Flutter Translator : Flutter multi-language support VSCode Extension.
  • Figma Translator : Create and translate store templates Figma Plugin.

Text Balancer

Text Balancer is a Flutter package that automatically supports balanced line breaks.
flutter

The Text Balancer package eliminates the need to use the line break symbol, so you can solve the text line break problem.

쀄 λ°”κΏˆ μ•Œκ³ λ¦¬μ¦˜μ€ <a href=https://xxyxyz.org/line-breaking#:~:text=j%0A%20%20%20%20return%20lines-,Dynamic%20programming,-The%20deficiency%20of>링크</a>λ₯Ό μ°Έκ³ ν•˜μ˜€μŠ΅λ‹ˆλ‹€.쀄 λ°”κΏˆ μ•Œκ³ λ¦¬μ¦˜μ€ 링크λ₯Ό μ°Έκ³ ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

It supports variable width fonts, allows you to specify the number of lines you want, and is implemented to Word Break based on words.


Flutter Translator

Flutter Translator is a VSCode extension with the ability to translate and inspect ARB, Metadata, Changelog, and Xcode Strings files on Flutter projects.
VSCode Badge

There is no Android Studio Plugin yet..πŸ˜…There is no Android Studio Plugin yet..πŸ˜…

The Flutter Translator extension makes it easy to support multiple languages ​​while maintaining developer productivity.

ARB Translation

You can translate the source ARB file into another language by running the ARB - Translate command.

ARB translation has become easier.

Because it is implemented in batches, translation can continue even if it is interrupted.

Translated a large amount of text into Korean and Japanese.

Caching functionality is implemented to avoid re-invoking the same request.

Cache On/Off instructions are implemented.

Tracks changes to source ARB files so that only changed items are translated.

ARB Translation Exclusion

Basically, parameter names enclosed in curly braces in the ARB file are implemented as translation exclusion. Otherwise, you can add exclusion text by executing the Translation - Exclude command.

You can add any exclusion text you want, such as a company name or email address.

In the v3 version of Google Translate, you can handle translation exceptions by creating a stopwords, but since the v2 translation API was used, items requiring translation exclusion were encoded as emoticons or pronouns, then translated and decoded.

Since the text that survives encoding is different for each language, I translated it in several ways, then quantified the results and selected the translation with the highest score. (The number of parameters, number of parentheses, number of line breaks, and number of translation exclusion keywords were used to quantify the translation results.)

Translation ends when a perfect score is obtained on the test items.

ARB Update & Delete

You may want to change the key of the ARB file. You can easily change the keys using the ARB - Change Keys command. You can also delete unused keys using the ARB - Delete Keys command.

You can work as if you only support one language.

ARB Translation Check

You can quickly check the following items using the ARB - Check command.

  • Whether the number of parentheses matches
  • Whether the number of parameters matches
  • Whether the number of line breaks matches
  • Whether the parameter names matches
  • Whether the untranslated item exists
  • Whether the translation exclusion is applied
  • Whether the HTML entities are decoded : &lt; Likewise, it checks for the presence of undecoded HTML entities.
Checking parameter names and translation exclusion keywords

When you select a detected item, the source ARB file is displayed on the left and the target ARB file is displayed on the right. Some problems can be solved by turning off the cache and retranslating, but in some cases, manual work is required, so I’ve implemented a feature that takes you to the Google Translate website.

Xcode Strings Translation

Using the Xcode Strings - Translate command, you can translate the InfoPlist.strings file containing the iOS permission request text into your desired language.

Translating the InfoPlist.strings file

Metadata creation

You can use the Metadata - Create command to create Metadata folders for languages ​​supported by each platform. LTR and RTL languages ​​are marked so you can easily select the language of the desired category.

Android & iOS LTR language metadata creation

The created folder is in a format supported by fastlane’s upload_to_play_store and deliver is created.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
β”œβ”€β”€ android
β”‚ └── fastlane
β”‚ └── metadata
β”‚ └── android
β”‚ β”œβ”€β”€ en-US
β”‚ β”‚ └── changelogs
β”‚ β”‚ β”œβ”€β”€ full_description.txt
β”‚ β”‚ β”œβ”€β”€ short_description.txt
β”‚ β”‚ β”œβ”€β”€ title.txt
β”‚ β”‚ └── video.txt
β”‚ └── ko-KR
β”‚ └── ...
└── ios
└── fastlane
└── metadata
β”œβ”€β”€ en-US
β”‚ β”œβ”€β”€ description.txt
β”‚ β”œβ”€β”€ keywords.txt
β”‚ β”œβ”€β”€ marketing_url.txt
β”‚ β”œβ”€β”€ name.txt
β”‚ β”œβ”€β”€ privacy_url.txt
β”‚ β”œβ”€β”€ subtitle.txt
β”‚ └── support_url.txt
└── ko
└── ...

Metadata Translation

You can translate metadata into another language by running the Metadata - Translate command.

Metadata Check

You can check whether the maximum number of characters for each metadata is exceeded using the Metadata - Check command.

Play Store App Store
Metadata title (30 letters)
short_description (80 letters)
full_description (4,000 letters)
name (30 letters)
subtitle (30 letters)
keywords (100 letters)
description (4,000 letters)
promotional_text (170 letters)
Metadata character count check

Changelog Translation

When distributing your app, you can make changes to the Store in any supported language. For fastlane’s upload_to_play_store and deliver, you can write a changelog in the following format.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
β”œβ”€β”€ android
β”‚ └── fastlane
β”‚ └── metadata
β”‚ └── android
β”‚ β”œβ”€β”€ en-US
β”‚ β”‚ └── changelogs
β”‚ β”‚ β”œβ”€β”€ default.txt
β”‚ β”‚ β”œβ”€β”€ 1.txt
β”‚ β”‚ └── 2.txt
β”‚ └── ko-KR
β”‚ └── changelogs
β”‚ β”œβ”€β”€ default.txt
β”‚ β”œβ”€β”€ 1.txt
β”‚ └── 2.txt
└── ios
└── fastlane
└── metadata
β”œβ”€β”€ en-US
β”‚ └── release_notes.txt
└── ko
└── release_notes.txt

When you run the Changelog - Create command, Android creates a <buildNumber>.txt file with the build number specified in the version of the pubspec.yaml file, and iOS creates a release_notes.txt file.

Create changelog

Changelog Translation

You can translate the Changelog into another language by running the Changelog - Translate command.

Changelog translation and inspection

Figma Translator

Figma Translator is a Figma Plugin that creates and translates store templates.
Figma

With the Figma Translator Plugin, you can quickly create screenshots for your store in multiple languages.

Create Store Templates

You can create store templates for your desired platform by running the Create Templates command. You can specify the desired device, language, and template scale, and since the UI varies greatly depending on the text direction of the language, I have implemented creation of templates for each text direction.

Create templates for Android LTR languages(79)

Templates are created in the form of instances corresponding to the number of components and selected languages, so when you put a design into a component, it is reflected in the instances for each language.

I like Figma πŸ‘

The generated frame name is created as a path for each platform used when distributing Fastlane.

1
2
3
4
5
6
7
8
9
Android/ko-KR/images/featureGraphic
Android/ko-KR/images/phoneScreenshots/01_ko-KR
Android/ko-KR/images/sevenInchScreenshots/01_ko-KR
Android/ko-KR/images/tenInchScreenshots/01_ko-KR

iOS/ko/01_APP_IPHONE_55_01
iOS/ko/01_APP_IPHONE_65_01
iOS/ko/01_APP_IPAD_PRO_129_01
iOS/ko/01_APP_IPAD_PRO_3GEN_129_01

After extracting the entire screenshot, you can easily add it to your Flutter project using the rsync command.

  • Android : rsync -a <PATH>/Android/ ./android/fastlane/metadata/android/
  • iOS : rsync -a <PATH>/iOS/ ./ios/fastlane/screenshots/

Translate Templates

If you select a frame and run the Translate command, translation will be performed in the language specified in the frame name. Items that require translation exclusion can be managed by adding them to the Exclude Keywords setting, and once translated content is cached locally.

Translate to 79 languages ​​with one click πŸ‘

Even if a single text uses multiple text styles, it will be translated while maintaining the existing styles.

A feature that was more difficult to implement than expected..🫠

If the text becomes long during translation, there may be issues with line breaks or deviating from the layout. Using the Auto Size option, you can reduce the font size while maintaining the number of lines. However, it will work only if the text constraints are set to Auto Height.

Behavior may vary depending on layout constraints.

Finish

It was difficult to meet various problems while supporting the Flutter app in multiple languages, but I was able to experience the VSCode extension and Figma Plugin development that I wanted to make for a long time, so I was able to proceed with it happily.

All of the tools are open source, so ask for your interest and use. 😁

  • Text Balancer : Balanced text wrapping Flutter Package.
  • Flutter Translator : Flutter multi-language support VSCode Extension.
  • Figma Translator : Create and translate store templates Figma Plugin.
Added 72 languages for VoCat and 10 languages for Draw My Today πŸ‘Added 72 languages for VoCat and 10 languages for Draw My Today πŸ‘

If I get a chance in the future, I will try RTL language too :)

Part 1. Flutter Multilingual Support - Ready
βœ”οΈŽ Part 2. Flutter Multilingual Support - Tool Making