Skip to content

Configuration setup

Roi Peker edited this page Aug 9, 2021 · 2 revisions

Great, you have fts installed and now is time to use it.

Although it can work "independently" from a Flutter project, probably makes sense to run the setup in an existing project.

This section will only show you the basics of the configuration.

So, open your favorite IDE, create a new Flutter project, and let's prepare the ground to make the glorious Counter App more "international".

Now open the Terminal in the project root folder and write:

fts run

step 1

step 1

step 2

step 2

These files were generated:

  • trconfig.yml
  • strings/home.yaml
  • strings/sample.yaml

The strings/ folder contains some sample strings to test the tool.

step 3

The cli is telling us we need to fill some data in trconfig.yaml:

  • credentials_path
  • worksheet
  • spreadsheet_id

Those fields will make the connection with Google Spreadsheet.

So, take the credentials file and copy the file in your project's root, next to your trconfig.yaml ... and just fill path.

credentials_path: credentials.json

Now, is time to create a Spreadsheet. Open Google Sheets, create a New File:

On the bottom right corner and click on it

Give the spreadsheet a name, like fts_sample, and copy the browser's url (it contains the spreadsheet_id we need)

new spreadsheet

Paste the url in spreadsheet_id, and take the sheet id part:

Google sheet id reference

spreadsheet_id: 3qR4HmmBddfB5kpcS--vCz2112omliVf_N5Hn4XOleWs

Unless you renamed the default tab, the worksheet should be Sheet1.

The gsheets: section should looks something like this now:

  ## Use relative or absolute path to your json credentials.
  ## Check the wiki for a step by step tutorial:
  ## https://github.com/roipeker/flutter_translation_sheet/wiki/Google-credentials
  credentials_path: credentials.json

  ## Open your google sheet and copy the SHEET_ID from the url:
  ## https://docs.google.com/spreadsheets/d/{SHEET_ID}/edit#gid=0
  spreadsheet_id: 3qR4HmmBddfB5kpcS--vCz2112omliVf_N5Hn4XOleWs

  ## The spreadsheet "table" where your translation will live.
  worksheet: Sheet1

Step 4

Let's execute fts run again...

step 4

Now we have a descriptive error of what's missing, sharing the sheet with our Service account credentials.

Head back to the browser and click

Now paste the copied email address: Share service account email

Click :

Send the invitation

Make sure the user was added to the list as "Editor": Confirm the user was added

That's it! everything should be connected now.

For a last time, execute:

fts run

If all went well, your should see something like this:

fts run successfully

Congratulations! Take a look at your browser:

fts initial load

It processed the contents of strings/sample.yaml and strings/home.yaml... that's the sample content generated the first time we run the tool in the project dir.

Now, You can make your own yaml (or reuse that one) and change the entry point in trconfig.yaml (entry_file: translations/app.yaml), but we will leave that for later.

If we take a look at the rest of the parameters available in trconfig.yaml we can see that by default is creating json files (output_json_template) and some dart files in lib/i18n/ (based on dart:output_dir:). Those files will be useful when performing i18n integration.

Let's take a final look at trconfig.yaml, as it's the core of the configuration setup:

## output dir for json translations by locale
## (*) represents the locale
output_json_template: assets/i18n/*.json

## output dir for arb translations files by locale
## Useful if you have intl setup or "Intl plugin" in your IDE.
## (*) represents the locale
#output_arb_template: lib/l10n/intl_*

## main entry file to generate the unique translation json.
entry_file: strings/sample.yaml

## pattern to applies final variables in the generated json/dart Strings.
## Enclose * in the pattern you need.
## {*} = {{name}} becomes {name}
## %* = {{name}} becomes %name
## (*) = {{name}} becomes (name)
## - Special case when you need * as prefix or suffix, use *? as splitter
## ***?** = {{name}} becomes **name**
param_output_pattern: "{*}"

dart:
  ## Output dir for dart files
  output_dir: lib/i18n

  ## Translation Key class and filename reference
  keys_id: TKeys

  ## Translations map class an filename reference.
  translations_id: TData

  ## translations as Dart files Maps (available in translations.dart).
  use_maps: false

## see: https://cloud.google.com/translate/docs/languages
## All locales to be supported.
locales:
  - en
  - es
  - ja

## Google Sheets Configuration
## How to get your credentials?
## see: https://github.com/roipeker/flutter_translation_sheet/wiki/Google-credentials
gsheets:

  ## For a performance boost on big datasets, to try to use the GoogleTranslate formula once,
  ## enable "Iterative Calculations" manually in your worksheet to avoid the #VALUE error.
  ## Go to:
  ## File > Spreadsheet Settings > Calculation > set "Iterative calculation" to "On"
  ## Or check:
  ## https://support.google.com/docs/answer/58515?hl=en&co=GENIE.Platform%3DDesktop#zippy=%2Cchoose-how-often-formulas-calculate
  use_iterative_cache: false

  ## Use relative or absolute path to your json credentials.
  ## Check the wiki for a step by step tutorial:
  ## https://github.com/roipeker/flutter_translation_sheet/wiki/Google-credentials
  credentials_path:
  
  ## Open your google sheet and copy the SHEET_ID from the url:
  ## https://docs.google.com/spreadsheets/d/{SHEET_ID}/edit#gid=0
  spreadsheet_id:

  ## The spreadsheet "table" where your translation will live.
  worksheet: Sheet1

Quick clarification:

Flutter Translation Sheet is like a manager tool for your Strings translations. That means, by itself is not a library that you use directly in Flutter that fulfills all your localization needs, but a middle man that totally simplifies the job of using other Flutter packages, hoping to make your development experience much more dynamic.

Check how to integrate with Flutter's Intl generator

Clone this wiki locally