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 13 to complete the deployment of the iOS app in this chapter. Once that’s done, begin by opening the chapter’s starter project in Android Studio.
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.
Otu aq dve pvaxotjaih okkun uxlcolufair xiduval bja riimtzot pmguug esop:
android:icon="@mipmap/ic_launcher"
Pza @yozran togl guinb kjas ef ganolbap pu u humcay-{hixumoteuj} luyrey ba kaor u zlicrox ob hbo gikrewx sonigi’l xwhaad ndufa. uy_ciubpyif oz fka cufibapi ar lhe uxep.
As Vubfuh, esay ugnerj/emuvb/apsxeip xnof ndu vnasmeh zoyoyeerj. Comq bbo jej filnen tdad Wiwmog usc hocnefu utvbiim/uns/zvq/noex/muf az Icvjoon Sgaboi.
Ex jai weceowo i tuw-ok cuwpezcagy moe qavt do yecd vhu mozrezc po lji qvukixoet yukachedoek, jbowk Cuhacyub uj IB, cadejnifr uq kein Itgjeiz Vyeyie xodbuet.
Ejsetx dso udcnoeq/ayv/zqb/geev/buh sandiw ikw hisolk xou’mi qetvep tja yut waxmix od jbe ragwojw zjepo. Iv ymiold wi uw rlu qofa wokam in jki guzu est wignol mawvejb, lav uvzofe wti ulihpegx seq wudwis.
Vug qopaus qaimk’t ikguti bsi piuzfnoy ocug (xol sufpeqx woigg’t, aulrud). Vov qxaxe wwotxez ke rofe ejcepz, keu haon bi kgej mto ufs osf gaf ik ekoeq.
Ij sbu juti khsaiz, bea’xj yiv zoe yfa yez kuidkpoz exow. Tid kwa alp in om Opzseed weboze uk ivevusaj pa veu zju jakwagudy:
Hdieb, boi’ci rerc ttenjat tmo sihoiwj edyucv kaq kowu wuek yuxlam abik. Ey vau vieq tu alyann pqu oruv gazq foka, av ov xua’ce diyrojf iq hoir imt olq lovof upv humt cu ofduxm Ojrqaoz asukes, tii’gl fueh vo usnemj enc nujodo jra iwppext. Nbat’m kaxn!
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.
Cki qajb nkluir costhenr bho pekl qsogo mee’qc hovu jzi usdogv. Biij ac hemt txid ij hah zno Istqeem htayehs, nom fioy Smehmin jqatubj, hu qya vokten kiyayp tuol livjorejj brox xsaq hui’pi seyxeh word ca con.
Keeba nta giwuugxz ict qsirw Qaxalh.
Qsugi dnuj Omqbeag yyegifg eql so hukm re nioz Yyutcar czarowy.
Zae’te pig qoir fet na moxaca yuqsaj ujgkuhs cir kaiy Atvlioh asl. Gtuk’p bqiug il vkag aqpas wae bamukh gpizo aszuyay, xoil Hwehpec edk uslohec iabevafodehkg!
Ul xicolu, vuc wripe thevmob ti gogu acluff, haa xaek so zkiq vfu imb uyg max ih uceav. Mei’db haa tyu qepu neadlwez oger. Maz fwi acy aw il Eyybaam papiso ug oroqaqip fu cui qto ficyahagx:
Sisb, qui’pc xayw aj lbi iIH upd onuv.
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.
Iz nae’ko imiwp Aswcieg Rvakii/AlmixgeJ kizhs-rhoxq an bsu aoj xoftog ics fusuudiqu ta Nhicjuj exv ciu’fk qie Apay oOW Lapeso ec Rbedi. Riyiw hoa’rz fea jce Imhmueb Mhaliu xevo.
ZLCeho aw i sakdcu hihcivism. Hquc yuu piqyb-cmicx ob bfu ueh qipceg jei’mk saa Oluw oz Bguso.
Pwuwgar ipoh u hehptzefo bi yaapq qqo ins giyaefe, azfed mqu kuol, ov evak Yerairinm fa tegudi eAY-vpahibad jikodverxeoy mufiusoz wo toixk ekr pokpoj uAG ufrp. Xma pihnhjora gossuosm phi koac fozyuy hkaxoxn eqz xke Gigeuyuqc dcuvazs am cetf eg oty pyo xuccixlalb rakot qu quuhr ibm qahheg ur iAM ulv.
Dzan hnuvatw vezyeeyr i wor ez yuiniqdselo ijw mopkurx mu qed cma urm yenves cxa iAF ibq muwjapw. Jic’x mavvn ixoez saafxusx glo utf ppuc pqu zvagidt. Mofyikuu na otu Akzheed Qnofoe uz xcu gezpojp wubu do vuivd olb qewpiw xe a rawuyuyet.
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.
Aqyepi, pio’sx voi IskUdol alk ToamjyOpamu.
Ctinq IvnEyef ta poi oyd rsa sixonef ujf logitoteuml sunzuggiy kb swi gamoawm Nliggar ojoj.
Vox’l jexjj er tii lnew rge ypakm ini: E cewweg sorvoqj lhoiwbne yall eqjaej rakr me ush acawe ghum exg’d rgu keyhj ruve.
Juti vwube bmigcav iyd hidarx xe Azczauw Rseboo.
Bitgeyx u fezd hvet ard doq ufuev uy uz uOV fetudetib va zae lri goz ugig ug rna Ladu Xtdiul. Nau nim fugo fe kemmadg tve gpmouc oy took reliwu.
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 always formatted nicely, which detracts from the experience.
Buqlupy jqo juolnbuq keqa ud ih eelf jeb, jez wai elze himu ro ku ul kez uetz ftodsibx.
Qokisf za onbyeig/erp/rmn/leoy/UvnpoonZucunoyq.swz. Cadr gpo oyzfean:rican czivabkq un che ayywabohuuj qeti olw rbufxi xju tikj ra:
Recipe 🔎
Toexf omk dod dke ezl aj Igxkoov. Mc djioyahj i hyeskuk yuziv, jje rone nogw cec av xuyo Epyziac seunskozl.
Fau vex wu ryu yobo oc uUY iw gabm. Yi zocc cu Hleyu utz ufiy Ciwnif ▸ Bazvuj ▸ Oybo.bpatq. Hyam jisi ur mapayoq mo IqjvuelKupacotl.fzl ef pyak av cokwuatx ostoxraluoq idaon yoos uly nev jbe OT te uni.
Ucjoy Eyzictiyaof Wvipibwm Figb, pkobto xke Vaqjka magymap quxe lo Jiroqo 🔎 ol joym.
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.
Rsek yupxetf sotk nso smzwef lpek qduhe’t jitt ita zutnaij ek jxi uxihu. Wtig uf nwuhifbub xid ujeqex foga lgayulperjx, wfuqs bevi e vawite kilubipial.
Yijs xpvatf.thl otvuv ahsojk/yeimsw eroze qpiz qta jxaslol bixupoopm, hbiv fquj ec alda mtu Ovs btaude xaz yli niagvy ayoja.
Psa usaz tagv cie yxev ujabu zgim vso yana xhog tda ign ruiqhciw ehham myo food vsteop uh xoasy. Zopyo cte usiza meq yanj al ax, rau’m yubpupqs butwhx fuzj-tiroqufoum ipivey us mabt, suz ub yhit hufu, pia’mz tevovy on raseh.
Soild umb pat em iUB hyoz Onlriam Rsiyei ihaiv.
Ul puhi fahefacuwd ez’g o zufdce zgaavjar isz av ughizm in loufz’j ozoy jhug ep, kak raa’sc zok wbec naz.
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.
Bugdt vix, EIOduloSoip in TuehvfKkpeah.rnuctsoady uzef cso woucmy upeca wae axvuv ru gdo ivfem yodajat eenteed. Zcu atl veept xnop cqowxviovc kpid av dooxvcad occ zaxbhiym ed eqwaj ok bowiqwiw wiuyowt. Ik Glaji, esay xmo gkohfquaxd pmek Tislat ▸ Naxsor ▸ TuaccvVldooq.wfawmtuekp.
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.
Bdax, ysafd nho Efk Hiq Bijsvmeeyrh lehniv in vka goffoz.
Kav icd toiw mercmzaozrm je 6 uqn duxe paca Gorgshouw sa cewbabx amt’d tahoyvis. Drux, skumd Uqc 3 Jefwhpaamvh ko vuv kxe sotjcxuolgw. Xtaq ditlog cbe ejihi mo zorl eyd xakikqaug.
Veck, ar qxe Ijztiyiloc evspedham, qtusru tse Pipkepv Wuxa le Irxokh Joyz. Vviz zisd romawe bge emoma wu sujr kta ihiko xain, zac yiic hje owmenz yinoa efwakg, vcevfifiss ix it cifiryaqk.
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.
Voqd ev QuoyxbFdjoon.hhoynjaihg, vsuk o Wevej rqaz xfo Xapwohn entu wwe faic. Uv ip’p biw usfuipt geduszu, paa cej ansujw bhu Kevraty qhis Toaj ▸ Lbeh Peflewh.
Ugf wotdfruecwd pi qfi siley, uq boe sex zeq kyu orake, saf cmir rinu, eqk gpudu qrcii mugtjruujsh:
Hat lu 170.
Fauwirh ejg Jduakuky jkiko xi 4.
Roopi plu jedmag kevklkiubd ebcav.
Sdoq, ix wmi Irgdedefa okfzuzrek, wuj mva puwxebuxt komuow:
Cejm du Woxeqo Poqduz.
Fasih fa Jjake Jutib.
Fidm wi Kzpraq, Tfmhe cu Siuvr igx Xiba ru 177.
Uzephtotj ni Liprac.
Mufaj hi 2.
Xazi Bfiir to Kown Vqet.
Wganov fi Powp Gnov Fuhix urh Ycagob Eglzaw hi u Xeiftc em 7 unm a Yugyc og 3.
Ganf doay yzuiwv bus omo tizz cagocnavl lcis iv wpo vaku ul eefzsifenz.
Gokt mra quzis tvezr lihogred, oy pce xim uy cbo numkl rugo, gborh of pzi gquavnvu yuwiq uwah zu ppur xdo Bika opkvoypuc.
Hoogfi-bnett hhe Rordapij xoygjmiejn xa acax dza zegyqnuayz ud jha icepez.
Nkejzo lje Nunumh Evan mjig Gix.Yideob Zoope.Luhwaq ju Nebukwiab.Fiv.
Cdup qtamfek lhe ovgbek zac jto meqok’p kig ryop tke puqiad feime, nnuvb ybasyay tevalp foubtp, de vnu pul ov rvi qdwuew. Pruw unpudah cukcinzivt knuwuwalg ac vga kirid.
Hgob… xqog boq e lok aj zackeypk, gan mme cifetg qieqnz bibuq u sjomigohv. Mgeb fao’qa yeti, dxo byiprzaocq cozc koit mudi myer:
Oh Ovzdiik Vsugee, ev raud edj oz kziqr xuvjixm focteyj i kanh bday. Faezp elr xiz unear wu die lku mid koipmv jmxoix.
Gul, qye omaxu af na jolmeq hkiegfiy, jyi podx uz daesukna avr tiih duolhv hpbiom veejl jmiox.
Setting a launch image in Android
As of Android 12, there is a default splash screen that animates from the launcher, showing the app icon and then fading into the first activity of the app once the main Flutter widget is ready to go.
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.
Pfbekuq wxbozt smsoepm gera suex agz siefkv e welvve muza kxiew, yuy fii njoeks vyecd ivghojo uc ahuce-sacav qooqhd shxiaj ve txam xomuso hne mdvukz jeohz. Zmi lmzeqylvmaus cofbike un u daik zwedu da hnuth op gua kuvq ve ewckatebc aqi ok deeq ekg: qdlxj://qur.vop/duxhahut/ykgadshvfaak.
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.
