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. 템플릿 번역
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

Text Balancer

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

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

줄 바꿈 알고리즘은 링크를 참고하였습니다.

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.

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.

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

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

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.

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.)

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.

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 : < Likewise, it checks for the presence of undecoded HTML entities.

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.

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.

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.

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.

Changelog Translation

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

Figma Translator

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

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.

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.

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

템플릿 번역

프레임을 선택한 뒤 Translate 명령어를 실행하면 프레임 이름에 명시된 언어로 번역을 진행합니다. 번역 예외가 필요한 항목들은 Exclude Keywords 설정에 추가하여 관리할 수 있으며, 한 번 번역한 내용은 로컬에 캐싱됩니다.

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.

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

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.

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.

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