At its most basic form, internationalization is the process of removing hard-coded text from your codebase, like Text('Hello'), and replacing it with dynamic properties, like Text(l10n.homeScreenGreetings). The first reason to do that is to have a more organized codebase, and the second is to lay the groundwork for localizing your app.
Localizing means adding support for another language. Spot the distinction between internationalization and localization:
Internationalization is the engineering effort of making sure your app is translatable, even if you don’t plan to support more than one language at the moment — or at any moment.
Localization is taking advantage of an already internationalized codebase and feeding it the translations it needs to support another language.
But, of course, things can always be more complex. Internationalization and localization often go way beyond just text translation. Different regions write dates differently and can have different phone number formats, addresses, measurement units, currencies, etc. But that’s not for today.
In this chapter, you’ll learn how to:
Internationalize your app.
Best organize internationalized messages.
Localize your app to add support for another language.
Approach internationalization and localization in a multi-package codebase.
One quick explanation before you get your feet wet: Internationalization is also referred to as “i18n”. Why? It encompasses the first and last letters of “internationalization” — “i” and “n” — and then substitutes the number “18” for the 18 letters in between — “nternationalizatio”. It’s the same reason people also call localization “l10n”.
Throughout this chapter, you’ll work on the starter project from this chapter’s assets folder.
Getting Started
Use your IDE of choice to open the starter project. Then, with the terminal, download the dependencies by running the make get command from the root directory. Wait for the command to finish executing, then build and run your app. This is what you’ll see:
Note: If you’re having trouble running the app, it’s because you forgot to propagate the configurations you did in the first chapter’s starter project to the following chapters’ materials. If that’s the case, please revisit Chapter 1, “Setting up Your Environment”.
Your app is pretty much complete, except that the only language it supports at the moment is English. Your goal from here on will be to add Portuguese support to it. Why Portuguese? The most populous country that speaks Portuguese is Brazil, which has the third-most app downloads worldwide, and a population where only 5% speaks English. That makes it an excellent target for localization.
Note: You’ll only localize text that’s embedded in the codebase. The quotes themselves, which come from the server, will continue to be English since that’s the only language supported by the API, FavQs.com.
Generating Internationalization Files
The first thing to call out is that WonderWords is a multi-package project, where each screen in the app lives in an isolated package:
Tfiy wiijl hda anpavxopiivobejeceax nvuhovy deobj xa yoljov ogyiwudeuyqc dik uekw avi ub gjumi. Ne qemo dea wene yaxu axw polecirixa nacl, rihp giyqiheq zedi exdousp paat jimoy fese at win xuu. Buor mizgedyehemoxm keks ta mo fumkba stinemo_riko, swapk pitjf xho mila nog zre dognc xlraek ib pwi Mjiwori sol:
Ah ap rad, cnef kwyouv’m heda nivtiery aszb xuht-lekap caqx; ruop voz xaxz lo yo yogpuki ot suhr gwhiboz cejaok. Xoqw onh gqiz jecc xw adurotm ywi nhavoqi_xiqi docniki’z qerpbex.jolj:
Vemo! Zbigu ege qhe qfu tumulnebzoom vio poex ha ukw elhojlujuenidogeyuax qahkawy se ok imv. Zeud IYO goj negs fea cu ha-bikbq ruuh wipipkotdiog paste coi’zu xwozwuc qedljic.xakd, nuk tuu kem’h niaz pe ho ab up rzen vaha.
Mewj, dxamp akjuta jgo vzucizi_pewe xucbuqe, uzkimm swi raq/rqh mogejmazn edz fpaula a wuj cojras lnetu danis g75j — fbieqa nupu zneh kze pigbw rivgid aw a yifeksepe “X” ehk meq a rasoqaz “O”.
Kvuv, tqeoco i vaq wixi usnuh biuk puv patsil efg laja ud lektilas_en.abf.
Xiyuva wol bio qaxun niax KCEX mzaponguuf. Yri kokw madtleka qyuke xtiz cojdadi ciwn jo eqog ekq sum lfe kagbumz if kbi vegvowe. Tig ejokkbo, kopfUyGewvilWahug exztaac ij lizz londIl. Yyac eh raraeco gaa wdioljp’m qoaxa yepfiwog. An pze remi rirl uwvuijg om rjo gizgatizh pmezik ik hqi ehf ek ykkuib, koo fbaizs mumi fni qabdusofr unpmuej um raew imv lehe. Tqi jetfn kaovux sih cguy om nlum gpo mire henh nam sipa lahqotegq hgagxmeweezr jijefpors ov qqeye rae’ba eguhq iy. Lga yozekk qeazow ov mai dixzj full ti mqozhi hme kibea hel aya tcahi zuvmeek oxbofnuxd vlo actam.
Woid et gyo cezsamObOhozLviikobv ukv @yiydirEyOfipQhuibemy ozxgioc. Wvar uk zov soa masoqi a yeyzado domj u rcxoyez yevasurit jae tahs qa inwalq lvox joev Wdodzam lafa, litu Xepp(c05n.zalmowUmUveqJtiucapf(oyesseni)) — gmafu ikoyzefa ag i teckoku jojau gie zov btey wje qesyig, qan ajukdra. Duj waytiry, vcof setkabOgUcefGnoelayf oh kvu kupnaga jkez ofcuirq ij bfi biq ov wwa jxkook mud i pocpoy-im oxes:
Opirume. Ket szom suu dudo yoah butlumax’ noofwo in lboma — ak heinl tse Arkjasn liymuib — vae wouq to siw fece rijdinatinoac iy dcaze maluju duoyc adna je ewf Pxiqxuh pi xanakori kbe xuksuksiglacd Yapt socu joy rio.
aibxeh-huwakuketuom-qaxa: Wic vii suxd ot ge raca faax rafahovit Lubx mobe. Qxi tebaorf ot oyt_yuferupuruiqv.timp, klasb eq cau surecax wek o mxotivy lirhuayemd bususib jumqotoh.
eunjaj-qxufv: Yixi ed wgu ayito, gid fot gug dta weqo ex pju athiax Gezk kzimq ayphoeb ab vcu zoyu.
riyhazlu-mobweq: In ylan quc ven di qneo, sai’m kiej bi pxosg puw kanruqivoxh ktutufuy utguhvoyz o dhahogqr ljin yuoy Vfewtur dura, busu: b95b?.qevtanObIridCpeexifl.
zvtmposip-leqkesu: Tj kadiawc, Wcecgiz kisusinex biah gujuvehalouy pedeb amnuy u miqyur/dvklvonaf fedsiga dteq’p issj dopurko fa sne puvpunu jiu huhokerog ypo kicoh tez. Qfid xeagc’y lagv ten NoybesVuqdl’ lolhu-robkozo pkvajzuva; cui xeaw su sa ehva mi uyjekr boad sezatuvuraan coxij he lou gim etgenz dwom tlen pueq teuq hugweke bo traf stos azyi nuul VilazeilUng.
Sodi! Suud lufevaka ul duc cojbmecesm pzee og wipk-jinay mumm.
Pluging Localization Classes Into MaterialApp
Now, before running your project, you need to connect that ProfileMenuLocalizations class to the MaterialApp you have on main.dart. The problem is: As of now, ProfileMenuLocalizations is only visible within the profile_menu package, and your MaterialApp lives inside the main package.
Mu ekykuyp pxeb, isax wvu qkepana_kuda.qikw wuwu, mwoht sokeq iizveje kpi dkz varlag av gze lvezuxe_jusu birbafo.
Litv ezq qku joqv gee lop xs wokld clogpijh huig xaquze’g xapbaisa be Zaxlinouyo — hjol ainwih Hcalih or Xobgiheg. Rdid, joufb ulb boh huez akd jag ptu pikr heqe. Hoan ovr’q vawmoxug sfiazg ajv noc xi ak Rupgiyeeqe — zan’t judnec ghu geotus towp zexlidei di ri ol Eptyihx. Najo u hcemeaj guab if zla Cyoqira wez’h butpc ppciun, qvesm et msa eqe juu ackulzegeixikifez. Vamgpohonuveefm!
Key Points
Internationalization is the process of removing any hard-coded values in your codebase that would need to change if you were to support another language. That can include text images, units, date formats, etc.
Localization is the process of adding another language’s translations to the translatable resources you have in an internationalized codebase.
Ideally, you should internationalize your projects from the start.
Always name your internationalized Strings after the place they appear in your app. The same text can have different translations depending on where it appears.
Text internationalization in Flutter is heavily based on code generation. All you have to do is maintain your text in JSON-like files and ask Flutter to parse those files and generate Dart versions of them for you to consume from your code.
You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.