App icon ni moja katika sehemu muhimu sana katika kuvutia mtumiaji. App ikiwa na icon nzuri ndipo inavutia zaidi. App icon ni ile picha ndogo ambayo inaonekana kwenye kifaa chaka endapo app ipo installed. Mtumiaji akibofya icon hiyo ndipo ataweza kuifunguwa App hiyo. 



Default App icon

Flutter wanakupa icon yao by default, ila unatakiwa uibadilishe wakati app yako unataka kuiweka kwenye app store. Hapo chini nimekuletea default app icon

Wapi app icon inapatikana.

Ili uweze kubadili icon itakuwa vyema kwanza ujuwe iyo icon inakaa wapi kwenye App ya flutter. Location ya icon inatofautiana kulingana na aina ya App.

  1. Kwa App ya android

Kwa app ya Android icon inapatikana kwenye folder linaloitwa res. Folder hili utalipata kwenye kwenye Andrid -> src -> main -> res ndani ya folder la res utakutana na mafolder kama:-

  1. Mipmap-hdpi

  2. Mipmap-mdpi

  3. Mipmap-xhdpi

  4. Mipmap-xxhdpi

  5. Mipmap-xxxhdpi

Ndani ya mafolder hayo ndip utakuta hizo icon. Icon zina ukubwa tofauti kulingana na device. Ukiangalia humo utaona kutoka mipmap-hdpi picha ni ndogo ila huongezeka kila unapokwenda chini.

 

B. Kwa watumiaji wa ios

Ama unatengeneza App kwa ajili ya iOS basi icon utazikuta kwenye folder linaloitwa AppIcon.appiconset hili linapatikana kwenye ios -> Runner -> Assets.xcassets -> AppIcon.appiconset hapo utakutana na orodha ya icon kwa kkukubwa tofauti tofauti.

 

Kutengeneza icon:

Sasa kwakuwa tumeshajuwa icon zinapokaa sasa tutatakiwa kujifunza kutengeneza icon kwa ajili ya app yetu. Kuna mitandao mingi (website) inayotoa huduma hii ya kutengeneza icon free. Katika mafunzo haya tutatumia website inayoitwa appicon. Ingia kwenye browser yako kisha andika www.appicon.co kisha fuata hatuwa hizo hapo chin:-

 

  1. Kwenye menu ya website hakikisha upo kwenye App Icon. chini yake utaona kuna palipoandikwa click or drag image file. Bofya hapo hapo, utapelekwa kwenye kuchaguwa faili la picha la ku upload.

 

  1. Bada ya kuchakuwa picha utaiona hapo pamoja na maelekezo mengine. Utachagwa je unataka kutengeneza icon kwa ajili ya app ya namna gani. Utatiki kwenye list. Kuna iphone, ipad, watchos, macos, na andoid. Unaweza kutiki zote ama baadhi.

  1. Chni ya hiyoorodha kuna kichumba kimeandika file name mbele yake kulia kuna maneno yanasomeka kwa kufifia ic_launcher.png hilo ni ija la icon. Waka kama lilivyo, ila pia unaweza kubadilisha ukitaka.

 

  1. Baada ya hapo bofya hiyo batani iliyoandikwa Generate hapo folder lenye jina la Appicon.zip folder hilo lipo kwenye zip. Unachotakiwa kufanya ni ku unzip ili kuweza ku access image.

Baada ya ku unzip utakutana na mafolder ya hizo picha, angalia picha hapo chini. 

 

  1. Kisha funguwa folder la android utaona kuna mafolder ya mipmap kama nilivyoeleza hapo juu mwanzoni. Mafolder hayo yakopi chisha pest kwenye res. Vyema kwanza ukafuta yale yaliyokuwepo, ama unaweza pia ku overwrite.

Kwa iphone ni kama tulivyofanya kwenye android, copi ilo folder la AppIcon.appiconset kisha lipest kwenye folder la Assets.xcassets . pia vyema ufute vilivyomo kabla huja pest, lakini pia unaweza ku overwrite.

 

  1. Sas akuna pich mbili zimebaki hapo kama unavyoona. Moja imeandikwa appstore na nyingine imeandikwa playstore. Hizo zinatumika wakati unataka ku publish app yako kwenye appstore (apple) na playstore (android).

 

Baada ya hapo run app yako utaona icon imebadilika. Kila unapotaka kubadili icon fuata hatuwa hizi.

 

Mwisho:

Huu ndio mwisho wa somo letu, tukutane somo linalofuata tutakwend akujifunza jinsi ya kubadili package name, app name, target api na kuweka permission.