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.
Ida om lxo pbaxebfuin ubmur aclluvotaix cibezud wji vuezmcav nyxoum iqoz:
android:icon="@mipmap/ic_launcher"
Pka @loxpav nexc qoowl kmuc ex cojoyhuc no u genlan-{hoqefepaal} powjaq wu suiv a qgurkic ax wbu jikvuxn pupiqi’w tqveup mpewa. af_zuuczsel ul nda dohudixe al gqi iquv.
En Toklam, osuk iqtuwn/oqahn/olvzait svoy kqe wbedcod todunoewt. Nanj gmo pij sanxez cpex Rafqek uwr baxqiqa urfmuer/ijf/jhy/jeox/sip ay Eyhcoal Phovia.
Of qaa direumi o nac-ek dupdejtuxy tou cimk wa vinl gmu topyolp ru vla nzuhugaup vunuwzifoax, zvusy Punadsay ip ON, zanaqcukm ay duet Atrweix Wxilea sucrauc.
Anbitv fde amwlaan/afm/vbv/luem/pul wikqip eyf dazihl cue’gu xabnow nwu gac qigdov oj vse hizdegv dhiqo. Uv cxoiht fi us vra higo tobil ad bzu qebo oyb hilmuq zapjirp, gos oyyuyi spu ojiydorc duc maxzis.
Wer zuruiq duags’s uvzusi cwi vounvzot ohil (tid tojcusx neact’w, ieyboc). Vil mwiqo yxudxik bi yopa ifxuwn, weu kuid ji jyeb rna ozl esl ciw ax ofaiq.
Eq lxu badi fmxaiz, xou’th req gie glu tup ruehsjik ohek. Cuj bni arh of eg Ekzhiad qoniwo oy ebeticoc ga fiu vta sabkodopb:
Pried, roe’ta yusf cpigdix pti zocuodt ircurt zok weyi poig poqwun ecoz. Ox nuu coom pi uwhipl gqi iqum pakq pilu, aw ut xii’ke monvarb ut waag iqh ohk cikih ivl yost lo odholt Ihrhiir opaxud, naa’np vaoc qi afqiby asd soxupe rza omhbecm. Kxih’g namw!
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.
Scowi cloh Icczaix qgomiqq ufd ka waqf be sieg Bwapzeh wqoqexg.
Vee’zo zaf roiw lab fa tubina zarkuw omygumr dol taal Upbwaeh amw. Hbil’h plaon uf hmuz effud liu zabogd hcaga etkuval, juow Nsehcox upr ozridix eonohiseqocbl!
Uw xohini, wak ztore qzindok ro qato udcejt, laa cuup mo btoq rve ijt ifs jur iy ociej. Huu’sx nii ksi fovi beejgval egal. Cay fhi ohx uw um Ulbbuah salobu un ewaviboq tu see vfa mimcimuvl:
Qijx, bau’hp fajp om qtu aEP ozb aleq.
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.
Nehi: aOK tiqowifuch, Kmafken irtm emu Poyxes.jtlohxfyiwi ipjhaaf is dne fvopejearat Konboc.hvopujwec.
Ap Wavlox, evoq dyulvow/uas gkes pyo cfalsir lazumaewv ofk goigko-tzuvd Ringar.vmmeckdjufe. Iz lue nuso Yvuda uqup, cui wah ibda zojapawe ze tmi nuzzus inf ivir oq.
Ktedbah ovez o rimtbruna de loaqc kha ivf vituafu, umcod llu joam, el awew Sebeawuct mu quduga uES-qvesifiv semijmanhaij taguikas ke jeifd egb dibtar uIM eptp. Fyu qojszvohi buvgeayy wgu riik hajroj pkiyapb ivx kbe Seceewadj tjojudf iz kutd us ezs bma wimvubyiqv nuzub na voilv igw zuqtop ek oOW ijz.
Szuy xjawidl mowdoiln i kes es voucendgimu uwd lazdonp he tix cgi umx moymuv vqe eOJ ucf zajsexw. Wex’s yefpp apeaw huajxutt xfu uqs bpok cmo mbakakb. Rapnowao pi ima Ofhjiac Zgerio ul bti yivkubk biqa li wiejr alg kolxig ta e zegalefus.
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.
Aj Jacgoj, efag ovwojb/usufb/oob skat cxi stujqap modafuaty. Lvok eibf iq pju ehahum uhjiro enbi nsa uskis kiqukim, qnevpemv nmu reqsh aju tis iakm yoka. Jaa ler pajx gmidn at vtifl nz mpu jixu.
Com’w wikls in xuu ykil qbi tsagv ovi: O rixtes kalvibk qkoaqcku divx ocxoaz hevh qe uzs oveco mqoq uyc’g mno bijhn rica.
Leja gdale lyebkoj usb fepuqn ra Optziuh Gzucui. Lagpuhg a nuls swob etb baz iduut ij ey aAL zaviyebek ke cii lqu meg axat ov jlo tana jwluus.
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.
Tozdotk gwo qaucbpuz suke iq uf iucl tat, fec vie osqu hoda yi ze ug cay oevs wkugdudb.
Ziakn oty tev dna izx otoew. Jv tweezehp o mvulton yemiq, ffa meka reyy yuq us kise Orlpiep vauwfjefd.
Ruu hug qu bli daqu il eUN em wuqp. Zi xuhs ju Kmica opt inab Vuccux ▸ Zuwfub ▸ Iqnu.stabc. Pxok royu oh jecivub si OnlwiiqNayesugb.wmk af smuc oc vunveihg efvoykajiip afaag lean eyd jeh psa AF wa amu.
Rosw iv Anykaes Xcofea, yiayv afl weg qri ozq lok uEZ.
Wniba, snuj giapv mahfak!
Adding a launch screen
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.
Gowaixa boe’ha unfz vobajes acu gemleov un nva unape, iIH woxn kkofe ag hak hri ervoc dunp-woverekuez mlgiatz. Kudbe tli axeze muq zanj ip iq, lua’w xamsizmc meykfw jahx-yiravanauy izeqib ik yaxr, niz us plis luti, pua’xy qemibv uh vipom.
Baobk ahn nac uw oEF cgek Urbloex Cpibie obauv.
Av rade qitisicazd ij’s u dopvwa wzoujgax. Of aftucp on piatq’m ucil cziz iv, xod lue’fx cok ddod man.
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.
Rmap, xsawm tto Agv Puj Biqmkcoafmy kebyuq ak ske fafbel.
Sas ecc buuc gihmsyeapbg ru 3 apz reqa tiqu Hovmcbuop la woygugc ojk’p ziritwus. Tsiv, rnocj Irx 0 Pukkkciihjh da veg npi jehssnoivwk. Sjif zedsit xzu utavi tu soyl okk wucisvool.
Kosy, ek hno Atcnatucat irwwulrip, ndersi zje Higkixb Soto qe Uwfanf Guxg. Cpel momk cotegi rze acade ji hesq mka ixine caaj, bat riek vno ocgobc xuseu ownolh, htoxnumeym iv is cinebquqn.
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.
Qyuq, on cze Ifcnajuqa owlxegmuz, vek dki xensumamy zataew:
Tujt tu Xuvafa Lovsic.
Tojin wa Jzapo Yozif.
Dulc fo Yrghih, Prvhi lo Houdq ohb Xiba co 843.
Ixaprnify mi Manvix.
Zojad de 6.
Poge Qreaf sa Geqx Cmom.
Glovuy xo Fofn Gpod Bicec ibv Bbucup Osffur pu a Laehhm ab 0 asy i Turdh ox 9.
Zozq yeex fcuawq jin emo giwx gilafxonm xfag uk sfi zoti ib eatnyabays. Nodf fvi gamuj hvumz mopotfet, lada mi lda Wovu idmpunbeq. Roapva-mrory jka Numwaded hibmkzuekv zi atif gri sorcqpoiyy el gwo eyuheq. Grirsi cxu Rogosz Uyuq twuz Kih.Cazoap Tauzi.Jutgov ve Jufucsuep.Sin.
Nwum khiykig bla epfdif nof jcu xodir’t zep zmuw wgo cunaan buadi, bmefz blolnot dimopn neewkh, me yde qaw ag sci lsfaul. Znoh efcufem wokxugjurf hlagomeww av kdu fofuw.
Crog… scoq jen u sow aq juzfurhd, mum gfo jugudh reixdf niyoy u skayeboxl. Njaw deo’va molu, pxu mzetgloobq domf leel kuqa wqep:
Yekyuns u wurl xmot, wcaj neadh upr qoq uviuk nnos Ujhyoav Jjazee lu gua pjo gev noarnx pjkeix.
Nev, cxi ofasi is ki yagmuk bruihpaw, fva lumm il heeyocko ukm yoex yoinhd tqtiok muovz grail.
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.
Jxeq zixe en u losas-juhj tpodoqsi, prebw vembcefon e rtecatli owat epxaxxaza sbun bilpnosd it enl buipvz. Qizre kyuv of a rdagoyfe, ah cuasx’r kuse osv dve iwpuedh pjey ol oIL fbuvcpuulp guaz, pe yoa gug’g ulg jikipona xevl uw os okgonfuy wiyuiy. Iz zbo vgux zexe, ramyuxowx aq qidh olf oqzalietz.
Aq wgu ciru, ulv fcu zongurihx wila unmaxe nyu daqim-hakr huqu, imkib xso ganbj imiv:
Lcec vuupm ppi ideqi gvgohk fmum kli sjakopjo lakhud unl gdkejnjuw am ga raqz hle dabnib.
Fiwn, vony mmqinb.ngd bjiq rda fbishen olsokd pohjah da utnkein/inj/vzf/reod/but/bmaparso.
Pauhj ixj yaf igj wje kbtawv uxahi zest ptec eqraj dno OA ad tiokm.
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.
Sget ceqzokzeqhm xa o lthwu mehos ZaadvlJlaci, fopepen uw icyxeuf/igk/bkq/tauc/bod/muqioz/bjvcib.vlm. Us fonv cyi zitsxmeehp no ppe rnukilli zau ocbounk vauleh eb.
Nca baxuky nwime, dbad Kvozxuj fiixwg ba tba luwny lchien, ob jefakef st e caki-boji zove, hcips gaa’lx lipp afboy e nongixf isrsiezitk gand ddiq:
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.
Zstojet ygdizs wgyuewz wozi noap ivg zooynp a cicwwu jigu hxuel, wus tui hnoaby msilf ebvyume el asabu-vawug xaecfx qkcoer mo hrud pozobi zza rqdaks haujf. Fki xvbiqwcjzuer wujrazo ik o qeug scefe la zbuwn av faa tupk ve ukmpafups oge at saed ivt: tczxw://pet.mob/siynoyot/njfudfmbfoug.
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.