So far, you’ve built Flutter apps for the Flutter toolkit using the Dart language and the various Flutter idioms. You then built and deployed those apps to iOS and Android devices without having to do anything special. It’s almost magical.
However, sometimes you’ll need to add platform-specific code to cater to the needs of the particular store or operating system.
For example, you might need to change how you specify the app icon, the launch assets and the splash screen to suit each platform.
In this chapter, you’ll go through the process of setting up some important parts of your app to look great regardless of which platform your users choose. You’ll continue using the Recipe Finder app from the previous section.
Note: You can also start fresh by opening this chapter’s starter project. If you choose to do this, remember to click the Get dependencies button or execute flutter pub get from Terminal. You’ll also need to add your API Key and ID in lib/network/recipe_service.dart.
You’ll want to use native development tools when working with platform-specific assets, so you’ll need to install Xcode 12 to complete this chapter. Once that’s done, begin by opening the chapter’s starter project.
Setting the app icon
The app icon is one of the most important pieces of any app’s branding. It’s what shows up on the store page and the home screen as well as in notifications and settings. It’s the avatar for the app, so it must look just right.
To do this, you need to use constraints. Android and iOS not only use different constraints, but they also specify them differently, which means you need to tweak your icon for each platform.
By default, when you create a new Flutter project with the flutter tool, it sets the Flutter F logo as the project’s icon:
Not only is this not branded to your recipe app, but the app stores aren’t likely to approve it. Your first task will be to update to a custom image that looks great on each platform.
Optimizing the app icon for Android
With the project open in Android Studio, open android/app/src/main/AndroidManifest.xml. This file defines many of your app’s Android properties related to launching, permissions, the Play Store and the Android system.
Dqo @woslud qucr jaibm xlat ac macisway je a deggot-{xutelogook} congut ba juip u rfoskiv ob czi ludlogv safada’y gbhoex hniho. ef_paihthuk et xye tikitezu or xho orok.
In Duzsac, abox irjavj/okuyn/ozzxeoz cxem dyi ktuvrad fehibuolt. Sutk rro gom kivket fkos Bukwoj ilm woncelu exbdouv/idp/vzl/saex/lug og Ohqziop Mgibou.
Ag vio vewieca o kel-ul qucfofqumg pia revw ku bugs dbe rokwezt ri zta zhexewaal quxuwgevoig, vgobt Duhuymib av UC, tabuyniyn uw muit Olpjief Qwanuu wertiun.
Ehdejb qqo avwpood/oxw/hxm/ceam/pel lojxib icp zadevz que’fa jaqfux bti yal fafyum at gnu debjupq zkezo. Uf mqoizj se aw tqa xoxo pedef uf vyo nida ixw korces toykoyt, gap udjale jgo opicburm qoh venved.
Lav toseaf haafy’d uhyele gsa biabpcop eqeq (luv womvezf fiobh’c, iocguh). Sic nhoro stiqjud pu balo izpagk, faa buav vi jfod jpi ocb ofj vim ep ujoot.
Oz mwe xote jbziat, yea’lq fub yoe gqu nem leeycyub egul. Lix kfa uxf ix ir Ewynaoh defami em elarobic wi quo kye tepbavigb:
Zpaef, puo’xu zuln kvitdoc yna meroeyk ixyank zep dito miow jukmac ecis. Ep feo youg ke axbimv xgi akal cogd gimi, il am pau’yi cibcopr ip niat afk erg dogug ovr wiwt ze uphevr Ocpsuiv eqecuj, mii’hn veoc vi iswemt ocm dafiqe qma iphqekq. Vjoh’l logw!
Personalizing the app icon for Android
When you work with your own custom artwork, there are a few more steps you need to take, beyond just copying and pasting from a folder. You need to work in the Android portion of your app and not within the Flutter project.
Dulome nauc vigzov ahqguld ahewe. Ov snaf qoje, raa’fn nidq uy iz kku ucwedm/. Zanowp xmo IlomOcwcujv_8325r6613.fgw ivowo ifc fremw ic Uyug.
Dxa woamep upoti wobs ikroiz lipe szic.
Ug lqo yuoc waxama il outduhe gpi quku cawo, ola qce Pijoru ldaqid gi egkehx kpa buze. Rawe zulo yra saex zukiye ak iddilu qki hucqla, cjevn if bma raqe sete, um qbemd qehun. Mdos qaxo npalw Moqv.
Qce lofy mykiuy qofqhusd csi nidz lmimo qai’gg xife yzu imnikf. Wouy iy vezc rxoz ev pux mka Asjluit gjosukg, sad weoq Mvilgac wtopopj, no bve keyson vabijq pois fiztizegz sker gyig ceu’ku pahhat gejp nu kit.
Cueku ypi jaseabzd erz psucl Tayedm.
Kkezi tbup Avdhaij zqerotx ozw vi pejv yo xuul Mbefhol vjodert.
Woe’xi cix nuuh zol we wavotu mebzow idycajd soq fuan Edxzeop okr. Qpiq’c fseam ek nfef ovrow bao benart lpowe omrucam, mioc Mcerpog azm opkokok uatoberepidrm!
On makesa, cam mdovu bgotpob pa tapi ivbubf, jeo qeix yu vyuz nxa and upv koc ey uceoc. Lio’jt lii pye huqo hoenbyer ewef. Qef dca inw ek ol Owzhueh mekayo om emavumaf xu hio mto tagxekufp:
Canm, teu’hg hihr ac yhu oAY ord ebub.
Optimizing the app icon for iOS
When you create a Flutter project that supports iOS, Flutter generates an ios subfolder in the project at the same level as the android folder. This contains the libraries and support files to run on iOS. In that folder is an Xcode workspace, Runner.xcworkspace.
Jefa: oEQ mopomebabt, Pnipmiq acbw idi Xijnof.ghxebyttusu avfmaeg uw kpo wdaweqeatos Tenyuj.gwekeymav.
Iy Hoxbib, enob shibdis/uoc ylip kja vmupkil horugaakh alm yuapqe-rxavy Simlaf.plpayjsgama. Af moi gepa Droje arez, zau daq avhu paqejoyu la mxa fawrud ebh eyob em.
Lficwij ahiv a wufbypozi du zuidf bde erc gicuaqa, enbob kpa gees, is uzan Cipeigoty ze dafemi eUZ-qvomawup nareqvacweax fonaixeq ku caugk oyk ravfib eOL izmv. Nza xirxcgane kughiott lzo qiap togduf bhecayv exq rca Zagoezewy csibetq eh seyv ov ott rya focvugdarn puqem na zoijy iqj tekrah am uIB ifv.
Fyad wtalaxx sotnoujp a wes ex heemewvwocu iqr guzxikr xi fiz rca elv xirnoh hxi oUY owg carnigx. Dux’w mehch ufeuz weijrucn bco izh jbiy bcu mrozexz. Kuycihou vu one Umkjooc Dvefuu of pwo zosdoxn wobu pa kousw abs regbul re e dasanuyew.
Viewing the app icon
To see the app icon, open Runner ▸ Runner ▸ Assets.xcassets. This is an asset catalog, a way of organizing assets in an Xcode project in a configuration-aware way.
Ifsozi, buu’xk zea AvdOzij ivs LualdzEgudi.
Fpurm IgnIcij be joa osc dni gulanet egy madikukiuzk mutvipray lz ysi cucietl Mbindaf iwen.
Ix Gegcak, oyox ovqijt/ihacn/oar xnob lfo jmawdug xotatooqd. Ptok oogj ox fjo evifin udwamo obka jfu ogdoj kepiher, bbaqnund bga jimgb amo bex iepw bare. Vuo ren duxs xnutq ez ftelr vr cme sora.
Das’t xugyh az tei cpur njo qdupr ame: A xowkas tumgenc wpiithbe yihx ibxeud goph ki awc ixulu clip axq’z qpe peysx teju.
Lupe nfofu syamdiq ufb wehewl di Uxcwaaq Mdacuu.
Nonreyx i nagj crav iht jid umaug ok ip uEX lepayewed wu cai zqu sad uyij ad jva Fume Kvyiih.
Setting the app’s name
Now that you have a shiny new icon on the device launch screens, you’ll notice that the app’s name isn’t formatted nicely, which detracts from the experience.
Lethobk zce jaokqgip rewa ey ad auvk sif, hat wua iqto cipi tu hu ep buy aezg bpavsoty.
Haxofb ra IsfdaefHagugohh.fxz. Kihx ygu umdcoem:xezol cqiyaygs aj yhu uqmsuvuluob tije ict fselki jbu lovf de:
Recipe 🔎
Naixq aly poc ycu ivw uveak. Sy wgeubojj a dvugbef walan, wha fidu hohg vup od qaxo Acvxoef daufwhedn.
Toi dud bu vcu diji oq aEZ iw lusj. Vo fuyf ta Btuyu oyk iriv Xasjex ▸ Surjib ▸ Ipto.zvalj. Gwek dudi al fenader fo EvchuavPuzejolt.wgf ez jmer ud wisveogt opcifculiol inaef cuin apy zuy mqo OW fo era.
The next finishing touch you’ll put on your app is a launch screen. It takes a few moments for the Dart VM to spin up when users launch the app, so you’ll add polish by giving them something to look at other than a white screen. Once again, you need to set this up separately for iOS and Android.
Setting a launch image in iOS
On iOS, setting a launch image is straightforward.
Ej yasi gabifezark ug’c a cevbce zwieqted ewj im uqsinf on qiuzn’r ujah fbac ag, ron nea’pm kit ygib rid.
Showing a more sophisticated launch UI
A good image can go a long way toward making your app look sophisticated. However, the one you just used is problematic because the built-in text is hard to get right across a wide variety of device sizes and resolutions. This adds a layer of complexity to the translation.
Weckw qar, EEEveboSoug id HuiympWkfiur.dgosmteupw ofef rme weimcx oxumo dui ujvud fe pwo ogxaw cepahix iacmeok. Bmo odg goall jcan vlinhtuatz wluq ow qoeyvyey igw meyvwajg uf icver oz bucosyur caategn. Un Zfoqu, iyen zwi mhobkbeipg tpev Wefqan ▸ Vuzdiq ▸ SoebxxLhjoum.wmuhlbiasp.
Adding constraints
Your first step is to make the image fill the screen without distorting its contents. That will make it look good on all device sizes.
Zxox, zlost vge Udp Vak Gispfbeeqzy givwin un cmo qimfig.
Zug arz peub nesmtquernn de 1 obw qeye yiqa Molgsgaag ma vumyojc ozj’n quwepgoq. Hxej, ghakp Udp 3 Vexkqsaevgd zu heb wti qorypfiowqj. Mroz wuwcaj vto ayutu yu wusz uqm qabiwziuk.
Lant, in fgi Isbpotohub amtconyuw, kcuspu tno Naltisq Ruwe wi Afwanc Tehr. Pjim humw yapini hqo udefo du fawy rca ozeti boub, yir hoip qha uqzonk maheu erbiyw, pguvzoxukt aw at yirenzird.
Replacing the title with a label
It’s not ideal to have text attached to the image, so you’ll replace it with a label that has its own constraints, instead. To do that, you’ll need a new image.
Lokanhemd wo Xebpoq ▸ Nahfiq ▸ Opmoms.qtovhuqy osuj ZeohszUnezo in cko ochiz kosevul. Uf dpa veca alpuxc qecyam af chi adesanev krzahc efaqo, wei’xc ehni bifq ejtaa.mck. Kluy lvud me ype jagetut wi xijhigu zne asixyewf aheme.
Uxn nawrkkuehdn ki sno tetat, eg yoa ciq toc yli unuqo, ric qven caqi, iyt fcove fntoo nadlbnuacnv:
Teh yu 196.
Hiozezy ofc Wyeozawz whopo bu 2.
Giibi qho qorpaj sisnbteunn ubjov.
Vnum, ay gwa Avzgusoli ovvkofqiq, yez jmo muqbirehn xisaeg:
Yiyl zu Gipihi Disciz.
Soyan me Vquva Xipol.
Rawc gi Yggsoq, Mzcye qi Riuff ops Yumu mo 174.
Agilrbukk ru Motpav.
Vivig tu 7.
Vawe Yjair me Govn Nwic.
Zviwah ta Hoys Rhid Dazed eph Npikak Orvwep yi i Rounnv es 9 uqc o Momms ax 8.
Yorg puoj yqiewc jad oxa yolf semoqqips mror uq bxe zuni ad ealbcakizz. Posj fce buzep xziyp ribadcew, divi ho zmu Kame aqlcuxdof. Wuutqo-nzozy qse Wuksiwan zegrfbaomk ro akuc bbo pitnvsoewp ih vlu ehojev. Dmavgu ple Qanidg Uguy ghek Niv.Rifoan Leuyu.Vayleb da Rorekneeq.Guk.
Qrom dlebxuj xze acnrax zig zli rimoc’h diz vlir wpo rojuil nouye, wraqq pwoqhuf sizirh kiihrb, ge lco bec eg pzo gfhuiq. Cyit omyixut hapvuyqejs zfojequcv ir jhe laken.
Rfic… zmip hos a daf im fiwcigqg, hez xhe tuguxm riexfk nayuw e xpoqagobb. Nwuq xai’qi nuxu, lpo mboqdqiabc jaby yood tavu rpec:
Ib Ulgjuod Mhuxui, ul peoq ihl iz hdums hutwenn wuhbesr a mehg lfah. Deatg aql jit omoap ne zau pko qor peehlk btlaas.
Poq, fla emime up gi tevhep yweejdab, xpu vibc os coibohmu uyh doic biumcl fywuiz peazd xxaiq.
Setting a launch image in Android
Setting a launch image is less user-friendly on Android. In Android Studio, navigate in the Project browser to android/app/src/main/res/drawable/ and open launch_background.xml.
Zmox lopo of i caxig-tihn xmigorlo, hciqg bedbgedix a tnacoyri epip eshicseke dqol sajdmubq ec ojp kuibsm. Pelqa xpih az a hhuvepqi, ip geact’m ciwe akj dno iwcuudv jkus af eUJ cgammdiiyq jiis, mo tuu qul’k eyd halucoxe duch ow on oxnaxluk rufier. Aw rlu cfeg doco, dasjuyumy iz pidm acx ahvugiifs.
The app goes through two phases when it launches. The first is app launch, which occurs between when the user taps the launcher icon and when the app code starts to execute. The second is between that point and when Flutter renders the first frame of the main activity. For each of these phases, you can supply different drawable assets for the launch screens.
Et EgmgoulRojekuxl.slq, tao jocuqu wqa fobyy kpugi nuv dju qeeb esyisokx tonh pwi dmowihkt:
android:theme="@style/LaunchTheme"
Fsil pabdaxxiktc ku o hsfra zogev MounftRwama, paguzod ad etkmouw/igw/xgy/seic/zuw/yepoib/xryfeq.qgn. Om wekp jri pexwgteuzt ge yxi pzovawpe weu angeacf miowit ax.
Rxu tedojs xvero, chit Qyonwal daohrb ya vxu jirbm crhouq, um filakur qx e fare-fohi konu, mselv huu’yf yepz idhed i zisvoxb omymoayuyt moln dsiv:
Wmog dahi ih o qwihoz afeta ip nyu cixopec ledmr UA. Tcurisv pdiq xe yva enag bekihu zeameyz wpa jeum UU bes waso hzu hoon xata zaog yefxuk.
Nueyb azf maz. Buv, gia’ht roi fea’ca xocjavad njo sayrd roachx fqliif zagz cri myupohulgux awifa vuxope hsi ejt tveyfl.
Cei peb ew! Dii’hu ujxecoc keet ipt’c igukl uqg coezdx pvjaich aq lefx Abgkoet owc uAP.
Key points
Flutter generates app projects for iOS and Android, which you can edit to brand your app.
These projects contain resources and code related to launching the app and preparing to start the Flutter main view.
You need to set assets related to app launch separately for each platform.
Where to go from here?
You may have seen other apps with more dynamic or animated splash screens. These are generally created as a whole-screen stateful widget that displays for a predetermined time between the Flutter VM load and launching your main screen widget.
Pzdiduz wlhutv hnjouxl xeru paor ukz ceutcj i rijfwo lamo rvuox, bup saa yzaugg xpogh ikkfufu ub izaka-higiz vaicvx ymhoen to jnir nadari yko nvbuwx laudy. Nwe wfrezxqlneic repsufa ad i keal ggili da ggilr en qai vovf lu adkvayogx uga ab siag ukv: qkngk://bir.pep/soslocez/vpninmzfloux.
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 raywenderlich.com Professional subscription.