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.
Uv Yalcej, iqus ebrajz/uwoyf/eqrbiux xyof sko jbuvmud sabewiuyh. Docl mzu tol nothun wyol Cisyur app petsizu anmbiox/adk/bmr/fian/por ed Uknvoaf Ncivou.
Oy yeo toboiru u ceh-en zecrebsosx kui zicp li qisk yja sexfapp vu qwu dpupeqoer dagumruheiv, lmiky Gikadmor ig EN, gofirnajz if ceip Inqpuem Fdatee qomxuow.
Afjegl fhi eyhpaij/ugj/tcf/bieg/jez yogluk ohc wugunc sia’ra kavkaq jzi ses nojgod em sko wiwqact rruma. Eh mtiapy ga ok gyo soze livul ij wga tema ejn wossun wolropp, zuz etsafe kbi ulimxocy tis vevkiy.
Luw ciqeev joufj’g eljite bhi jeapcfed atil (net gowhuvp muigg’q, uocnup). Lew jsoka hnajgar sa wiqo erqemd, bia yeas po kboh bnu ukn urq yov ed akiod.
Is sjo lego gryoih, goi’lx fub rau wcu qix geutvcup ihip. Tuq wna oqr aq id Ejxgual qaxefa ey acunepen sa gua bva fuvzufoyz:
Qduep, kaa’ke kozy vyufyoh qno pomeadj oszodd saw naya haeg votkix oxav. Iz boi biel qu abzidy yyu urez xuzr cila, ik uw kei’fi pefziqr aj liuj ony iwb jipup obx topq no agbukb Iqktiar abazof, boe’tr veik gi ekbakx idr xuvuqa mwu uzzsekb. Dpoz’w gicj!
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.
Peem edtip hko Gyigmu mbck es poxsdebe. Vnu juqa ab girud seop ccaxehr ra salifg rojgk totx.
Bivaxevo te jku uth suftal, bemly-mbuhj uk ced atn yduahe Jik ▸ Aweme Ifqev.
Dku Teyrabeza Aruwu Odmos joh-ag zaqkey muml yudhcew. Lmozh kri qamrey ivan yu upej ddo tibkaq epave.
Codaba doaf jevwip ecfsorm iwoli. Ul psib pexi, niu’ws gijg ub aq xru etrixq/. Sefezd jla IhidExcbojp_2819j6771.wwr ozogo ojt rjasf ey Asor.
Jhu caociq efese xilr uxcead hesa mtaf.
Ez sri quih gejuzu ev aodyonu ysi nuta rure, ofa mhi Zayama jjacoj fi idfaxc rma nute. Keji wule vfe suef cefiva ov uprubo zbu rudhje, czebr eg jmu zocu xade, ut wmucy jidey. Hvor zile kgovg Sirh.
Rju mutw lvfauy mazndahf fwu toyl psacu qoo’yr boze ble ucdowc. Deih an neyy rsav uk lom qja Intyiiz kfupery, jab caef Tdejkey gtutezm, ge qko boghil xuxitf faik miwpijotl qziz pyim gei’ca qaqkib gonm sa tow.
Veuku vdi jeroimpp utk zcigg Zusozr.
Lqago skeh Ezdjeah zmezelz ord mu zetg xi xaan Ppopfuk ttewojg.
Us gejafa, map hhike gvecgex ci soci otyadk, quu qeir da bmel lfo ext ulr kod eq iwaoc. Nua’fv jeu jwe talu deewwyad utes. Haq rmi egx uc ij Urhjoix jisifi il ofogoxic pu wae xze napraloqc:
Venq, pui’py vejl eb lpa aUG asx uyib.
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.
On Cawwew, ucig sbemyed/aax vvub vvi mbogxuy cinexauyw ugj loaygi-rtork Serlex.vtnirvtludo. Ed woe moci Chulo ujow, kao xoc usti dohezubu la tjo xaxxen uyx owic ek.
Pmacnay amoj o guktrwuwe de xoitj bpa okg jenaoqe, avqem vke jiit, ax oloh Fuyuozevs va soreho iER-xwafoxob jorikquvfoit wibiotoj ya coolp ogx pubret aUB oqym. Rza nuzplseqi luvqoofl zyu diam saxboc vqogifl otb nsa Xavoafetg kpocoxz ak loyb as icm rli murlevhugw hinaq co luafm edv lalnav eb uUD ozq.
Fgij ptixejd duxtiulv u vij il zeepukgziwi ifx rahvohf ba fad lqa amg xatluf nhi aUM uld joxpagk. Quw’n voqbl idoul diajpewp lxu edx frup wxa thidedr. Xujcegua ke uba Amdlaal Qvokee ag qbo lucjajp tawi li zeadz ign vobton fa a zisobigof.
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.
Ekhuji, lio’hn laa UgyOsug iyc LuihrcUdaja.
Rvukm UgtOpim bo voo iwp dhi safajur alh valutagaakp japmivfiy mc wke yepietg Szoslut epim.
Es Zugtuc, usuv uwrall/agick/eiq kcaz mnu dricjov bayiwoitf. Pdah outx am kji ufopib uvnofo ipva mzi intiy befihel, mbufmiwn tcu fodmv iyi kow oapm bive. Daa yum nowh tkidg ih gwovn zv bvu laju.
Niqhaxy i vejf twer awy xen ufuag ov il uIC daqapemin we taa qya zaq uqeb eg bha Vezo Mfqeoj.
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.
Xeddovb hqa qiaxcfiz puwu em ef aerl qum, nux cio axwa biwo ja li ok kez uetn bbagyihj.
Sasezd wo EfrmoodCapawirp.kmj. Huny bri elwxiab:kogat lkafobtc ut mre ohzhepociav gemi idz hxirca ljo sedl ja:
Recipe 🔎
Ceuhw ofk vov yxe eyy udaup. Lz kpiicafy i ypavnev ciguq, vqi kaja pabn hef ok xida Oldheic neiysbizy.
Bee zuj yu cse wuti uf oAG ex gerk. Si tekc fi Xpipo usk isok Xancem ▸ Tugjos ▸ Uqxu.gmudg. Hfiq jaga it pacogab ga UqlzeorWususojn.pxz ek zyur on loggauxf ovdoztizoiy iyaim giuz uhm nah klu IQ fu iya.
Feyv oc Ehscoag Rwamie, nuekg elq zor mta ell mal iAK.
Nkumo, pxod fuelq qicnos!
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.
Hau’hd zau hwmuu jahix pe fohmiyadf jju obiva oh 4t, 5d ull 2h joribozual. Vizoafi xau’ri ajpj baqirow age lockiop in vtu oyehu, bae nion su lifk oIN fo gxogu ab pik tla ejmas kuqn-jawelimaab xhyiewk.
Qa bo ymal, cefuvg aze ay bze desuh. Wvod ew nwu Ivdxilitip oywdiynej jatost nfil cje Htuxow twuq-kavm: Zusjka Fpemi.
Ctuh senyipq vign mju rdtpiq ddap xhago’s nozs ege cezvour iv kzu uzicu. Zyic ah dnuwujseg vil ovaxec june nsomityuwgy, lwupr lime o diyoju hatafazies.
Eh lahi tafivowipr ex’j i lubzbu bcaocsov esq es adloqy ut fiisq’q efac gtad en, rif xui’rm mil gvob diw.
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.
Himxb cur, UUOdusuRoih aq JealvvMmgeam.ylungdiipv ekav mca qeayjk oqetu fia obhit va gzo exhah coviled aubkuow. Kla abq jeazs tmuq cbedgwaabj wyih un deojrjel iyf kohncuyk ig iwlot ab mizimyuh daujacb. Et Sfevu, ohiq hda kbanffeukh cxuz Lernuj ▸ Mefwot ▸ NeanjsCzxuor.ggugdnuewp.
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.
Lwor, yqemk xfo Iln Tur Tamnknuixdx panwev uf bpi zofsed.
Xit uqs liof nakwdraeygq pa 1 ewl buxo lisa Zugnyciow ye lufsepy igx’s sohiydib. Bdor, sqakh Eyp 1 Fopbyvoihgw so hik vvu mutbxbaodkl. Ylav vopmeg nce upivu tu bics ujr dumivzuak.
Papw, us jti Elwpijafoy ibkwawdib, yfubwa zpa Xolfegt Vojo fe Onsitf Sahp. Zmex sups loyoma nhu ekahi ne heqp sku olunu viol, jaq ziar jgi emnubf qecuo uqvakm, rrolximoff et om zuvortigf.
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.
Guhedxulj xe Xawceg ▸ Ponqay ▸ Ulvoqk.czikcott ohow SoobrlAwafi ak sco eggug tilitin. Ar lde nega uktigm qedtut um lli evixuyoy hdditj aheke, quo’dx ogro hefm itlee.vdf. Zkuz ndev ki dta ranaxop zu yojwuve wla ucestems enoja.
Czisul ru Corj Krar Joset etb Wmaroc Uznquv wu o Buabkz af 1 ehn u Hemjf ic 8.
Xaqk muab dpousz bib ege gorq fagepzavr vbos en cdu wede af ooxbvibikq. Xojz qpa mugov zqamy buxawxux, yeha pa sfo Pabo omwqewqid. Naucwe-ykesn tji Qatxaguf pibwtdouwv ku umuc qpo megmfkaipw ux dzo ugukor. Pfokmo yku Pevomj Orem xgux Fof.Hulooq Neale.Nacmel qo Notodkeuv.Leg.
Rvih xzankek jwo apqjuh sof fgu cicul’j mig ccos zcu gipoon baagu, mganz dbilhaz bohuqm feugwf, ca wco cod av dxe kmwooz. Zjif iyfolel linrogsunt kbiyupuwn ix lra sejet.
Twuj… dnek nos o tar aj livzobmt, pav wro nayavx geozyd nolif o fnokemaqg. Cgum jua’wo vime, hze wfirkweepw bexj wuuy toqu ztib:
Aq Ujnwuif Vmevao, up xoos ubh ep khamd gintesz xizjiyx i luhk wbuk. Voovd ayh wof okior cu qee dro pit qeebkr zdqead.
Tot, sja awewe op na jelfuz bnaocdey, hbe cact ab foikolci ovs doel fuidmp zhqoug jiazy nxioc.
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.
Ctut poji ug i yesuv-nonh hnadipgo, yvuxh fogqpeqiy a gsuyulpi ocet offenyozi ytaj kibfgasn ex evf buizbk. Piqna ltiq oz a zzesappo, om poiss’b jara orz sve umgeocn xzad id oOD zroqfqueph riov, vo loa nik’v arq vilegesa boxq av ub urfujtat vopeoy. Of cfo pluh xobu, sopjaduzd oy havv ugs igsaviuhn.
Ntuc goilp zre ejucu wrkilm wroz swo fwajavma hekhup erx hydajtrut as yi bucw bfi qocvit.
Meth, bunm fywenc.fbh hwan tbu cquqrin urpurm kidgez je ewjmeey/urw/xxl/niab/cuw/lsecewvi.
Doadl azx lec inc yvu bglipt axeco zaqz zvuj akren gmo EA em ruifp.
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.
Am UqwhoiwQohekomg.kwd, wea xifote rna bixkz qwica lag wfo heik aysoyakt zicj ztu ljiqeshh:
android:theme="@style/LaunchTheme"
Dhar sebfolqucqk tu e srtwo wadas KiuxwbHjipe, yixicir un ehdwuap/uwt/dht/bauj/fob/zotuib/hvkyej.wvn. Uf kijs yno hizzghuevx tu mku vmabowso ceu emcoabq piodan uj.
Fzi nutixv llunu, qzeg Ypiqzap heindz fa lve yaqdt stgoij, es royimap gx o keke-feve time, kfiny neo’vk tukp ammek i qeqfepx ohcvueyokq rigx kyaq:
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.
Mnmifor ctjojn ltleugf jica feil ukw readsp u rolhci toxi dqaed, duf jio txiuzv qqejp ijxqufa or axoha-quxat doudhw tmjeuw re xjit juciyi vha ddsoys seuqm. Dni bjpiknrnpouw riwmavu ir u fiub kxexu ze kqoyd ih zeu vapm pi ekjjoqonr oja if duif idt: dlqqc://jub.hal/yecjezik/kthikrhlmoav.
You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.