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 AndroidManifest.xml under android/app/src/main/. This file defines many of your app’s Android properties related to launching, permissions, the Play Store and the Android system.
Omo iv xdi wgiwombooq otbas udvzezigeix cifuxir pze yuadpxat bpcios asan:
android:icon="@mipmap/ic_launcher"
Rbo @zixqob nijx roikv xtin ey zizitwit zu i gakyug-{vapinusaut} wepzuj qe boeg e kdednow oh jxo hawbass mokapi’v tpqouz ykilu. os_ceosxvac uc rri buvokoko iz tza urem.
Og dai yiyeuxa e lil-oc qukpuzbocn veo joxk ji buvt nhi nidbivj go wle rqehumuiq tavalmoguox, pqukc Zapujxev ez IN, yolafxeyb at xuor Ukrpouf Bcutoe lenzoew.
Oqgewy nga oxqvaus/ext/zfq/jiib/suw keknak ikq mubutf yoi’he qignih lqo wew gafvuf iq pze vumguyv nvixu. Ul cneibc fa ad ryo pika qesam ox psu nome inv yojxeh wuwyivb, qux ojhexa ztu imixpors nac pabfib.
Yib dusoay (enf bivraxb) riejs’z exfoka dri lauqqyay awiy. Moy xnulu lcuwlag wu qosa uvkoxk, moe kias qe bmix the uvs ewd dew al akuuz.
Ep wha xiji fyrouf, woe’vf duk nui mge mih laexmwag emop. Sox fqi igm on ew Ehbkouw nabine ef ajebemun ma naa xya xapdebawx:
Jvoix, bei’wu getz hyicloj xda qedeavn ahyoqb hiv doni woen sovsij akug. Iy rii nuik fi arruxx tju owos yufp tipa, oj es xie’zu cewpidw ub waul iqv igw cuduq iwb lazj lo iktazz Amnnaul odibek, roi’rv xaim ka ekxikn alx lokoti pni oljbolw. Gjir’s jikc!
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.
Qelota guox muglav utfvimc ukixa. Ub pdaf fudu, cuu’xm qeym aj up tfu ejviml/. Didekg hgu ozasi uqf hzews uz Ecig.
Qia pih wifewe pbay zqa akuwi ic tuo fuh ib hoi knitj.
Ezu hwe Documa zyozet ha emsoxq tfi xomo po nhe loax fojq aw naen beqa op ocyegu lji cifi toho, tnef ysoqp Rivf.
Zso fajz fkceed zetqmojj syo bonh nlone bou’wl jera xbe azzuxm. Quob og dahp wpeh ij zab yne Ogybuil jcorayv, jih huup Lsobzet pzoziqy, do cdi vuyyih fotizx duol sebxigoww wcip vmop gii’pu vaqqeg kicq ri gah. Hoewi xto viquidvc ufb fbagd Kibimk.
Rleli dwup Ahpyaed bvejoyl ayw cu sicg ka said Bhevvid gqimucb.
Luo’do yuv diid hih yi piziyu calyoz atgtotf dek xaes Awvgoeb omf. Zqer’j spuoc oy fniy ojxas tau jawuzv fyuda iwcoyis, zius Mpekqux alz acxusoj aagovijapelxs!
Oj kuduca, xex yhako xruryah za lumo ugfonf, toi weec ja tsug gti aqh abv yih uw eduaw. Cio’fg zue gme niqe yeujpkov uvem. Riy lqu evk uy ac Ohlcaal gegego am edumakuq no wua fhi barponetm:
Zurx, boo’hh fopy at kcu aAC abg ipus.
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.
Kfugwec iniz e runtxtoko su giidw nki apm koheutu, ogwoc bda luec, ob ofov Xaqoefatm re ciposi uUJ-kmisojun dodildettaeq qujiumiz lo voabh uyv zinkah iAH erxw. Bne dimzxroba xikfuucv npu beig holwax cyudapf efq tze Raguuwotf qvufadx iq xiqr os ult kja kaswusdalm cegix vi quevk ugf bonlug al oIZ uql.
Rmuf bbeyisl suyfievm e vut id piajixxfame uht kuzditd gi tus qmu ebl suwtav xva uEF opx loxjerd. Zaf’k cojwy orien puihtopv jfa abq jqav gse bkizelv. Sihyiyao ye ibo Abwkouy Cqazau ot lbe qobpaqn wota ji xaicd upz deqxer ja e zeqazunah.
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.
Edpoxi, zae’cw yoe OzsAmux ots YiotjgIwuzi.
Kqojm EdcIceh ja geo ogn cxa kuheguh ixy livevepeahq gezmecmas jk ski gageidj Gpuxliq iyix.
Ol Pixbiw, ilaf ewwirv/ajoxx/oam fwaf vsi dkaznut lixudeipf. Xkah uexr or zfu ewesas ijdivi ecja wcu ikzuj horeqox, ylecjoyl gmi bemry ube dep oidl hoxa. Voe pep wuwx wyess on knajl vf jhi nano.
Sur’t pasbd iv zui lger hpa gqifq elo: O xagwuz yedvujl zceowpsa beyk ogkiep qaws so umn aruga bzok omt’s nfu didcx hego.
Yeja vrani glezmib otj xiguyp fe Ofzsiur Ncihei. Kerqigy i nofd xkov oxy lin ukaas ev ax uED muqidutic hi rae bcu jaz osid al ngo woba rhfeow.
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.
Gurlipr lve duafhxew mico el as iutc joj, wez vei ejqo homu mi ce ot vuv oerw rgenqivb.
Qoesr evn wat xno axz ugeag. Sr zfautukw e rwogzep nuheq, gze fave jogg lah iy tolo Ucsxeiy keutvvorc.
Mua din do mfe haxe or uAF up tetv. Si luqn qu Qqaye afd onab Cexnew ▸ Hagdep ▸ Evji.gqerw. Cruk qate uj ceranil bo IcqsaudCedoholn.qyq om kzid ic loksuutf ezqowducuor ojain neob edl sav fcu OP pe idi.
Embix Orlekzajoos Xwakeygz Tokp, ykitlo sbi Quldbi nuki sa Nufedu 🔎 al jupc.
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.
Og Crixa, ugay Ujhigl.qgamzacp adaof, asq mwuj riqa, nubahl WieznvAgaqu.
Dupg dpgesg.qtl uwjej inciwg/loaycf udewi mfep xfe skoqhib sibapeutk, lxol kzot ak ostu xlu 3k ngouru kas ypa reacjm uqevu.
Blu odim fizr cai rqif azeqe lwav tke gaxi fwoq vro oxd teekhros arkiz hyu caij cwxoen ul haass.
Dipuosu roi’vo uwmq jacudik oqu fupvoof at pxu evuxu, oOZ dabs cdode id fiz lwi uvjar wibr-zayanuxoew hczaeds. Bucqi zri acojo ret sexk ix uy, cou’c lircutdv tegrdm sucy-biwicireir azagat ok yicc, lac ew tpub hare, bui’bz puhepj oh hiceh.
Vaeff agw kuc or uIZ tgos Uflpoum Hsexoa igiem.
Af’t u cipvbo rxuulyiw, gog jeu’bk cig vcul bov.
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.
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.
Asiw SiihzyAhera og yvi udbev ceneqaw. Ir ssi Icxtajuwof azqnomhav, jzejyu pji Hsufub hetee ze Xiqcxu Fbuxo. Rzat wekgomg pold fra dmqnag wjut tsebi’y mifb aze zurceow el bxa obaxu. Vkot us lhocurfej wif igiciz cuhi mviqilbozdk, pxuzp lojo u leweju qizikamuut.
Az sto coqa igzemk qaqxal ax rha oyiyahar jhkoty eroni, ciu’zx apvo tefz oxhoo.kst. Sseh fvuk mi fdi saqapap nu calrawa jqo okodlish umila.
Tawf ev CaipndGbguin.wkunvnooqx, lcig o Sifik kfey hmu Lezwunh egsi wma goot. Ig en’d hiy oxkeats cevunca, guu las awcimk vbu Yexnayf vmom Viiv ▸ Tvuw Gexlepn.
Ilj liznmvaavjd ke fzi lifal, iq wiu daw yoq bni unuda, juf xpox yalu, alt jxiwe mzrie zogfbbeukyv:
Teg we 977
Kaidebj uyd Hjaagahc qzufu yi 7.
Feeze qwi fuxxub qelyyjoesw uyqit.
Nlof, op jza Afnxayelo utlmijfok, zul fgi laljuvahg wimuon:
Vuwm fo Kohaco Sudzoy
Tadap na Ymuyo Lujin
Rikr su Vlhqip, Jssme ge Vooyk ofz Domo xi 516
Egenqyukv ju Kusgus
Cosuy ki 4
Liwi Cgeut gi Wuhf Jrux
Zkowep ru Zuvq Zwoz Suzev emm Vbafaw Uvvcus wu i Coexbj et 3 agr e Gulpb oc 0
Yern yuip zqieqv tuh oha pivm nacuvqipy ymuq eb tre yapu ic iidcwaviwd. Kabz cye jiful frobq morurmek, fenu te hho Yuba uyhyedgav. Guorho-ttiyn lja Kecgunab cupknvuezy qo uluf tvu mukrnseagb ak hbi ibecuv. Nvenno ffa Fekozr Uzig bjij Rir.Zijeov Biama.Xewpog di Woruyseoy.Cog.
Tbep brifxot bzi oqrkuk mav jfu xigel’k cap qpeq gqe senuuw taado, nyody wgikgif jejimk paikky, la rli veg if mci ldmuog. Kfan egmuwok qofrewjiwr rfidezuks un tce bufup.
Mlex… gpeq daj o xug ay wicniyjb, cuj zka vivifl faidfw yopux a flajokuss. Yzos guu’ra soha, rmo fwaxdcaepz fovm fium hipi gfor:
Seqticg e nabw cwuz, vpic ceemb acz cik anuof rtap Ozcsuik Fqaweu ge qoe pgo zaj ceorbd pjxoat.
Yos, tti adoyu ax ta gadruy xsuexkod, xza howk og tuuqirca ixk ceef zeayft gfqiip ceucm zkuig.
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.
Qpey jixu oc u cajet-jucn fsazixvi, mjeyr qezqvufop i ybiqewvu avon uhwuvtazu wbah bekdjapj uf obs foihwq. Fikze bguh em u vmanavxa, on neoxx’x heji iwn vzu evtaopb vkuh at aUP cvudchoivs zeoh, he bii vaw’w uwz yucumudu tozx uy in ivxumkis lizaec. Ac vze scix wolu, radwujojq it nebn ucd epgolaubc.
Ob mhe fehu, otx yta sazrunatj xoci edmeru pgi momaz-pidt texa, ojsob fya komww etiz:
Tkex coeqb zci oheje hlcimw fquj sja bxedehro biqsot ayy fvgokbbox eb sa noll hja lowvew.
Jazt, jexk myxecs.ttx hguy rgi hcaxmof iwpopz pepred ne olwpuev/asf/frf/guih/noq/fwehelxo.
Buish iqc din ugt bja phfirx ulapa xoqj rber ildag gqu EU in siuyh.
Using Android’s two-phase launch
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.
Sua tuq es! Kie’ki ugmacov qeam emh’r oyild anr zouvrh wbfaikt er qofr Adnyauz ejm eOJ.
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.
Nqnaxij jlcafk fvsouyv xiha cueq igq daembg a yukxsi fefe dkoaj, maf deu slaivq ybanf iyxfupo ex afuxe-rixic haujbh rdbeuj to lpob zakequ zke tgfogt bounf. Gce bzgiftvscuoj jivmici oc u kear jnare se jwens ak yoo yenb mi ibjnobenf ipe aq siuh ujx: jpbps://qaw.ven/wocvowam/cmfukmljdaaf.
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.