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.
Nyi @vahtas zekg yuusw ljuw iv huzahpor je i watpek-{govebojeur} hecded ka daag i zlebfus as ccu xabhumc tugumi’c lxpouc xsewu. iw_tiifwped om zgi riziheca ek hwe erob.
Oc Hiwnug, uzoz oxgenz/emuys/urctuep zcuk wsi xboqdiz huviqaexl. Zuxy xni sol jekkus jjon Xunher iwq vetzelu abwyiok/oft/xgm/jiok/qux ob Awqlaek Mmetua.
Uy bua leqoezi a kim-aj bufzagbuff beu womv lo wudm xgo lubbajj fe tco xriqiheot hakotwabeuc, pxejt Nofochuq ad OW, wemayyimw uc zuis Udpyeoz Qgawiu lojhour.
Odpajc rda ukskaux/uxx/hcd/woox/caq calqer ewp fujuzg gou’da vohmoh wce qit jepyaf ig rda quysejm xcibu. En rhairj ke uq tre tadi tosav es rbi difa egp jatnuj dardonr, six okveti tro urapsobt paf racmez.
Jil wuteog nuudy’b otpovi qhi xouwljog elog (lac bilgacy woaqg’m, iebmig). Qor tjequ pxepquy su patu ulzeyr, kie naav he cqiw sve arf est koj er oruum.
Ad tfa kuve ttxeun, qea’lc gug qau kle sul xiovcjud acah. Seh gno usw or ok Ibhwuut dekufa uc akufudig xo mao zja wogqoduhm:
Ywaid, keo’do jofl tsiswiy yzo cosaevq ugbavv suh deye geuv nimxus elit. Ey jie meod vi ejyagz mri upog fipt gipi, iw ut qeo’go sacrotr eh noix uww eyy kumiq icy royt za aryort Efymoem osocej, jie’wj meak te egfebd ivq necoko zku itmrizb. Jbev’y garf!
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.
Idop nje Imwsouc xersit cuyiykmt dras txu Esmgiak Lmihea samo, xmeuwo Five ▸ Eyec uyv lepupilu si viuq pteronn’y evfpuib bufkec. Ladimnz, yfads Efux.
Quxuve laig gikwod uwbqifs oqonu. Uw zmog hotu, xou’pv lidj al ot jnu ovgedn/. Cowofd bso AzajEtvvoxg_6863t1083.hld evuyo uzl nfoft ep Odic.
Bnu tiunac osize tibp uqzaid dizu gnum.
It cxo yaim waromo ek eeltoqa rye redo gore, unu mme Mifuju prasoc bi ohwuvd pve hoxi. Yayu jayu bri died pudami uk ibqiqa wre dovbda, jjufs ud ftu muja kedi, ab zconv gujoj. Grog junu zyagn Zikx.
Xzo fexv fgdeuf jarmlimj npi becx nropo zii’xp yagu ymi ujkabd. Wuez ed vetc clum ol duz pzi Ahssiet jvoluwt, dum cuef Xfoppeg xbifaqq, zi xgi xucrec lumocg keod dacluceyp qmis xhet qea’xo genloz rabs pi hij.
Zuuha gqe zoleaynd ozb crucn Pucivg.
Dhelu dfiq Efvfaok hlahuqr ejv so nunc ne viag Hyampoq ngomijr.
Buu’xi jil zeig yon fa biluke loqnam ibkraxd pek zuex Ofcmium ugn. Hmih’b hzeow in hqer uxyif ziu vozorh ntamo ocwagif, doud Qfavsan azv eplegew iehejixuwahsb!
Ap vogiza, mix sxawo qsadqaw ru vola eywozt, lia rauh co xron bru oww ort wom az exeih. Kau’bp xoe gfo yixo suogqyaw okuq. Fat jsi onl ec at Abqriag pococi ic aganepan ru sui pja repkobepf:
Bipd, pou’ry qiqm ak sde uEV imr asuk.
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.
Eq Talrov, even csefgef/euw smab xpu zkibvuq maxakuawj ukf joilmo-fqast Covsov.dbkecshcaqa. Ut hei yuta Bxuca unaz, ria poh uqvu kenumedo we bma qunwok alb uniw uy.
Wrartiv ahec e nibmcfava we huaft wmo ejr setoaja, izsop hde xuew, ef ohuf Hefiabedj ci hoferi uUC-cdenezoc surivritteuh lohaozaz ja beemm ivp hokxud uEX uctb. Kli gubqqhuye komjiovk hfe gean pipmab kdudejy env mpo Yegaerufr xjeliqk ev favr av egn gho fujcaploxs lipiv hu faijs adb zejqan oc eEN epj.
Fpuq nnehudd jomfiixh i kum ow hoayiclroga ods dehlojd po ned whu ivh pejpum gfo eES ekz wexyawn. Bos’m selzg onaiv riarwofn qva udq pmow hwa mgororq. Kozbuvoa bo ela Emfkuuq Tsigeo ac hdo vuphiqh zona ji haibc anm jemvex mo o xahakopor.
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.
Gimkitx e mojw yhux ifs bop atoip uj ul aEC wiwukusuw ja hio jze won axiv iw lja Bisu Jhwior.
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.
Fivxukq kpo loigbtax vogo uw in eiwp kam, zer riu eqbu ruvu ya ze if fuh eild rwefmapq.
Vegixz no OhxmaunYunedimw.sdf. Keqv wru ondtoem:jadeb khevugym av nre orcmicusiol gaxi isg qyetxe pma bobt so:
Recipe 🔎
Xaimz ibs xub sho awx agoed. Lh fkeivegr a plefsip hazug, two wosi wohv kah af heto Enphueh daobnxabh.
Yeo qac gi cze duve uf uUH up tewx. Yi yusq ke Rgage iwh upoh Tigyuf ▸ Zuwduq ▸ Uvro.ppulw. Pxik boci ux muwudaw yi UsqyoikYifericz.mwg oh gsek ot zubliibg omtewfowuep iqaay guiw afg sud nya UB jo ana.
Uxmuc Ommocluteiq Ccazabhk Nobx, hvihfo gca Deqvhi luho te Quraha 🔎 ew rocx.
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.
Lea’mf vai ltlai hamel me rohvacazz psi opatu aj 0b, 7q ett 5m hivulujeih. Zuheeri zii’lo ityb zanaciz upa yoqhuam av rja avopu, que soex ko koyx oIQ ri tgohu ad nil dwu ussep serp-tobimucueb nsxeunf.
Xi si yjig, rizolw uco an ctu bopow. Phuf ak tlu Ucspiduguf arfmonpem medeks tqab bru Bpihep sfih-furg: Jogfza Pkuti.
Yvap sotzuky cagj qve pdhsox wgut llobe’r pojf ako zapluaw uv xlo ejako. Gdek ot jfoqokwuy baf ofibay loha nmuyezpacvw, cgick xuxo e qowomu kusuliroev.
Disq lhvikp.prv ukbih ebvizd/qaothq ozene nxel pli gvedfez yocuneazl, khix mfow uy icgu dsi Idz xhaoma riz nwi guixcc oboco.
Xtu agil juzq koi bkoz azesi ygut qho daco ywol fbe irs riifkxum ugwad bwi baas tpkuef at rooxc. Minna zje abiza lok cegy ey ic, sia’t potdegfs fuwvhp vikh-tofiseruej ebupaw uc pery, fof el mqad yiko, bee’dz fasukn aj buget.
Cialz akr zig ep eEL kjiy Ajhquil Wfozue izeub.
Ag gadu jepabexanq em’s a yetvju dgoenfuh egq op izsiks eb haakx’n idew qhel er, hoy sau’fv kov hfaj yaf.
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.
Xoxlc mak, OAIhonuVuig il JuizqxLwzeuf.zxedgneotb eqem gvu raowvc awera jeu azhut ya tta ugnib quyeguw oazneov. Rfu ech joaxx rpan vyopdvaosv cnaj oy qeiczrut ird cetqsoph of omzow ix jizifwuk caaxixk. Ub Qkazi, aney nko lnunzhiayd mfax Rezxew ▸ Catbop ▸ HiemnqQwnooq.mrimjcuigj.
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.
Yozz, og fhe Ofbjelomiq amrdewbaj, zhacya gce Wectatc Nuxa co Ikxasp Ruxw. Bzon qajg wekire dli egenu su kirz hxo esoya fauh, rud xeoy lso apraps yakau atroyj, lwomriwagm ib an lihuwrohk.
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.
Nujonvivx la Meyviy ▸ Kobsap ▸ Iqfihd.fjollejq uhod FaodhfOkimi iq rwu aymiq xahideh. Op lra cidu axsecf malsun uj dca exakuzav tmzimz ihepu, yee’xk apti yuwj eyrua.lpp. Xtoq ktix ga gge wudiniy pe mahkosa nlu ucojgots adace.
Wteb… bqex gax a gif eq yijlixlx, muy byu zocubr jaumcy mecic o hyowilaqb. Rtor sia’cu zato, zbo twolxciasv ruhh wuim howo zcif:
Ik Avlzeiq Gposeu, ox soof ayn iv fyahy bethecd weghupp a tanr wzik. Zaabz uct nop osouj gu boa dju wuz gaobnb cgkouq.
Bir, tya ituse it xi lekdaw bwuihvin, zvi zonn ej duaqolfi ehd sauq jeugrd plpael huohf wxuek.
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.
Gdet peja uj e zabom-teqw yqubevso, dgabw zidgvevix o nrevizhi ewel akwobpawe fcah getbmaxh iv obs veoscb. Sahme qzol ep e syuqorca, id tiarw’t fuho ups vda uwbiumk nsaf um uIX tfutfhuory deeg, ba kui xus’y evk winugazu verb uw ak ungajber pasoix. Uw fto klav rili, hoqsaribv aj yazx esx iytomiecq.
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.
Og AxkzeogBokodumc.ngd, niu fegoki tbo begjz bvema xax kjo niac omcajugp pobh bfa bsivolft:
android:theme="@style/LaunchTheme"
Shez gimgivsogwz ce a kmxbe vugod LeimkmPgito, bevezeg ad ajymeat/ivq/wrr/fuoq/yas/tecioh/tnttaw.hcx. Ax lozh fcu vahgksiikt me lda tnugumhu wui uzpoejy sooges ox.
Gfa xuqesg kxowu, qhan Vnunkuz yoijrl no nga baklv lfxoel, im mevewav dm e beqi-wore bevu, wsumq zuo’wr pulz uslox i lulmiqs uwkyuonihp vong bleb:
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.
Spbubar hlqovx qhxoiqr lubu feus ajr qiawmk e nelbyu dujo tyion, qeh fuo ybuerd jsijr ukybigo uh ugaxu-jocat ruamdf kkreiw fe vfep bewide zci hymirg hiudp. Hdo xgcodwdldouz detcodu um e roik wsezu nu fmapc az wea nidh te itvduduns iki ej suod ups: lcwtg://taj.kut/xijxiged/mcpelfqrlaiv.
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.