Flutter

Flutter UI Google cross-platform logo

Mi a Flutter? A Flutter egy olyan megoldás a Google-től, ami a cross-platformos fejlesztést támogatja Android-ra, iOS-re, Web-re, asztali alkalmazásokra (Desktop).

Az oldalamon naprakészen megírom ennek a kiváló keretrendszernek az újabb kiadásait. A Google odafigyel rá, hogy igazi keresztplatform megoldás legyen: gyors (60-90 Hz frissítés), kis memória használat, gyors alkalmazás indulás, és a fejlesztők is szeressék (tooling).

Harmony OS: mi lesz ezután az alkalmazásainkkal?
Felértékelődik a cross-platformos fejlesztői tudás

Viktor
A Huawei a Harmony OS bétaverziójával kezdi meg hosszú távú átmenetét az Androidról egyes okostelefonokhoz és táblagépekhez
forrás: xda-developers.com

A Huawei és az USA hegemóniájának egyik mellékterméke, hogy a Huawei már egy éve az új Harmony OS operációs rendszer kifejlesztésén munkálkodik. Ez a legújabb mobilokon már béta fejlesztői fázisba érkezett. A kérdés azonban adódik a fejlesztő cégeknek, hogy használhatjuk a már megszerzett keresztplatformos ismereteinket az új Hongmeng OS-en is?

Mi az a Harmony OS?

2019 augusztusában jött a hír, hogy a Huawei saját operációs rendszert fejleszt Harmony OS néven (kezdetben a Hongmeng OS nevet kapta, kb. “őskáosz”). Ezt először IoT (Internet of Things) eszközökre szánta hivatalosan. A 2.0-ás verzió pedig egy évre rá, 2020 szeptemberében hivatalosan is megjelent (watch, smart TV, head unit mellett) okostelefonokra. Az első hivatalos mobilok 2021-ben várhatóak szériában.

Lényegében hosszútávon az körvonalazódik, hogy az Android rendszert leváltja. Ami sok kérdést vet fel a szorosan összefonódó ökoszisztéma miatt. Bár a versenyképes minőség csak idő kérdése.

Melyik modellek kaphatják meg először?

Az xda-developers.com alapján a Harmony OS 2.0 developer béta verzióját ezek a készülékek kaphatják meg:

  • Huawei P40 (ANA-AN00)
  • Huawei P40 Pro (ELS-AN00)
  • Huawei Mate 30 (TAS-AL00)
  • Huawei Mate 30 5G (TAS-AN00)
  • Huawei Mate 30 Pro (LIO-AL00)
  • Huawei Mate 30 Pro 5G (LIO-AN00)
  • Huawei MatePad Pro (MRX-AL19)
  • Huawei MatePad Pro 5G (MRX-W09)
  • Huawei MatePad Pro Wi-Fi (MRX-AN19)

Ez egy frissítéssel kérkezhet meg az arra elszánt fejlesztőkhöz.

A fejlesztők élete

A cikk kitér arra is, hogy a kódot Java nyelven, és a UI képernyőket XML-ben lehet megírni. A Huawei ezzel azt reméli, hogy a fejlesztők körében népszerű lesz, és könnyűvé teszi az áttérést. Erre szükség is van, hogy a népszerű alkalmazások minél előbb átkerüljenek a saját Huawei App Galery-be. Az App Galery egy építőkockája a HMS (Huawei Mobile Services) ökoszisztémának. Ez a GMS (Google Mobile Services) huawei-es alternatívája.

2020 márciusában 50 000 alkalmazás volt elérhető, szemben a Google Play Store 3 milllió app-jával. Van hova fejlődni.

Lesz-e támogatás rá Flutter-ben?

A kérdés a Flutter hivatalos hibalistáján a #38437-es számot kapta, amiben aktív közösségi érdeklődés mutatkozik, hogy vajon lesz-e támogatás?

A Flutter hivatalos package repository-ját leszűrve feltűnik, hogy 2020 júniusától kezdődően számos csomag portolva van Flutterre, Android-os támogatással. Érthető, hogy az Androidra lőnek elsőként a magas penetrációja miatt.

A csomagok közül ott vannak az alapok: GPS, Machine Learning (ML), Augmented Reality (AR), Push Notification, Analytics, Maps, Ads.

Érdekesség, hogy van egy Huawei Contact Shield Kit Flutter Plugin, ami a mostani COVID-19 kapcsán jöhetett létre. Kifejezetten a kontaktkövetésre (elkerülésre) lett kihegyezve. Egyébként BLE (BlueTooth Low-Energy) technológiát használ.

A Flutter Embedder a Flutter legalsóbb szintű illesztő része, ami összeköti a keretrendszert az aktuális (mobil, böngésző) architektúrával. Ez mindig specifikusan van megírva, natívan, amit az adott eszköz megkíván. Emiatt mindig csak ezt a kis részt kell megírni, és a támogatás adott.

Ez nem tűnik korlátnak, így a támogatás biztosított.

React Native, a másik nagy szereplő

A keresztplatformos fejlesztés tárgyalásakor nem maradhat ki az RN sem. Az RN 0.60 verzió könnyű integrációt ígér a HMS-sel, ami a fő szolgáltatásokat nyújtja a mobilnak. Enélkül bajosan lehet üzemeltetni egy alkalmazást. A hivatalos Huawei oldalakon biztosítanak felőle, hogy az integráció könnyen megy.

A verseny jót szokott tenni a piacnak. Javulnak a szolgáltatások színvonala, nem ülhet bele a sikerbe egyik fél sem. Folyamatos az ádáz küzdelem a jobbnál jobb funkciókért. A verseny az árakat is lejjebb tolhatja, ami végül a fogyasztóknál csapódhat le nyereségként.

A keresztplatformra fejlesztő cégek komoly költségeket takaríthatnak meg azzal, ha egyszerre több platformra is képesek rövidebb idő alatt eljutni. Az, hogy ennek mi lesz a jövője, még sokakban kérdőjeles.

A technológiai választáskor figyelembe kell venni, hogy milyen meglévő csapat áll rendelkezésre. Webes, vagy inkább mobilos ismeret van-e több, és a technológia megtanulását eszerint beütemezni.

Egy FrontEnd-es webfejlesztő inkább a ReactNative mellett teszi le a szavazatát, míg egy natív mobilos szívesen tanul meg “flutterül”, Dart nyelven.

Flutter alkalmazásokat már Windows 10-re is kiadhatunk
A Google új Fotókeresővel mutatja be Flutter alkalmazását a Windows 10 számára

Viktor
A Microsoft Windows készen áll a Flutterre

A Google által 2019-ben gőzerővel elstartolt Flutter keretrendszer szépen lassan beváltja az ígéreteit. A saját Roadmap-jükön folyamatosan napra készen tartják a rajongótáborukat. Úgy néz ki, az év végére összejött még egy platform: a Windows 10.

Ahogy arról a windowslatest.com cikke hírt adott, 2020 novemberében a Microsoft bejelentette, hogy elkészült az első, Flutter keretrendszerben megírt Windows alkalmazásuk.

Akárcsak a Microsoft, a Google is aktívan dolgozik a keresztplatformos UI megoldásain. A Flutter egy nyílt forráskódú (open-source) UI keretrendszer mobilra, webre és desktopra. A Google Flutterben íródott app-jai már elérhetőek webre és mobilra, és a Windows 10 támogatás megvalósításán dolgozik nagy erőkkel.

Voltak próbálkozások

Pár hónappal ezelőtt a Google bejelentette, hogy az UWP támogatás sínen van, és ezt bizonyítandó (proof-of-concept (PoC) ) egy alkalmazást mutatott be, labor körülmények között.

A Google keretrendszere lehetővé teszi, hogy a fejlesztők egy kódbázissal hozzanak létre alkalmazásokat Androidra, iOS-re, és most már Windows 10-re. A Flutter csapata a Google-nél hisz a kereszt-platformban (cross-platform) és ez a víziójuk hasonít a Microsoft Universal Windows Platformhoz (UWP) (Általános Windows Platform).

Az első fecske

Az UWP támogatás azt jelenti a fejlesztők számára, hogy elősegítheti, hogy a mobil alkalmazásaikat Windows 10-re áthozzák. 2020. november 25-én a Google kiadott egy UWP Flutter alkalmazást a Windows Store-ban, ami az Unsplash API-t használja, és új fotó keresési élményt ad. Az Unsplash API egy modern JSON-alapú adatformát használ a tartalmak megjelenítésére, és a végeredmény meglepően zökkenőmentes.

Google Flutter desktop Windows Store alkalmazásként
Fotó: https://www.windowslatest.com

Az alkalmazás a “Flutter Desktop Photo Search” (Flutter Asztali Fotó Kereső) nevet kapta, és ez egy újabb bizonyíték (PoC) egyelőre (nem ajánlott a használata). A Google egyelőre az asztali PC-ket célozta meg vele, de az alkalmazás jól vizsgázott más mobil eszközökön is, úgymint a Surface Go értőképernyős, és nélküli változata.

Érdemes megjegyezni, hogy a demo app a netről halássza a képeket, mégis natív élményt biztosít adaptálódó felhasználói felülettel, ami egészen elképesztő.

Mit hoz a jövő?

A Google Flutter-t használva a fejlesztők hamarosan háttérkép és fotónézegető alkalmazásokat hozhatnak létre, amelyek minden platformon működnek, bele értve a Windows 10-et.

Egyelőre nem világos, hogy a Google mikor tervezi a saját, széles tömegeknek szánt alkalmazásainak megjelentetését a Windows Store-ban, de számíthatunk rá, hogy jövőre harmadik féltől származó alkalmazások fognak megjelenni, amik Flutterben íródtak.

A fejlesztők máris elkezdhetnek alkalmásokat írni Flutterben, amik akár mobilra, akár desktopra elérhetőek lesznek. A Google állítása szerint már most is 100 000 alkalmazás íródott Flutterben, amik elérhetőek a Google Play Store-ban.

Felértékelődik a fejlesztői tudás

Mellé téve a másik két asztali platformot, a Linux-ot és a MacOS-t, egy korábban csupán mobil fejlesztésekben gondolkozó fejlesztő lehetőségei megtöbbszöröződnek. Ehhez természetesen az is szükségeltetik, hogy ez ne csak egy fellángolás legyen a Google oldaláról, és kaszálja el a platformot. A körülötte kialakult hype miatt ez nem várható, legalábbis nem egyhamar.

A Flutter szekere most felfelé halad, megállíthatatlanul.

Borítókép: Johny vino / Unsplash

Hihetetlen, ezekből a lépésekből áll egy mobil app fejlesztés

Viktor
mobil app fejlesztés fontos kelléke a vázlat

Az öt alap lépésről korábban már írtam egy cikksorozatot. Most egy konkrét mobil app fejlesztés menetét vezetem végig. Az elején kezdve, az ötlettől, a tervezésen át, a kiadásig.

Gondolkodjunk, keressünk ötletet!

Szerencsére ezzel nem szokott gondom lenni. Elképzelésekből nincsen hiány. Érdemes addig csavarni az ötletet, amíg valami igazán eredeti nem jön ki belőle. Egy jelentéktelennek tűnő “ötlet-magból” kiindulva, nagyon szerteágazó dolgok jöhetnek ki.

Ebben az esetben én egy TV reklámból vettem az ötletemet. Egy családi társasjáték, ami egy műanyag doboz, ami beszél a játékosokhoz, és bár annak tűnő, de mégsem hétköznapi kérdésekről kell eldönteni, hogy igaz vagy hamis.

Ez elsőre nem eredeti ötlet, számos ilyen alkalmazás van már a Store-okban.

Ezen a vonalon tovább gondolkozva jöttek egymásra az elképzelések. Honnan lesznek ilyen kérdések? Hogyan fog működni? Egy személy, vagy többen játszhatják? Ha többen, akkor a baráti asztal körül, vagy online? Ha online, ki lehet hívni valakit párbajra? Ha párbaj, akkor abban az adott időpontban kell lejátszani, vagy később is ráér? Ha később is jó, akkor nem lehetne, hogy egyszemélyesként is lehet játszani, és minden nap adott időpontban szól? Nem lehetne, hogy ezt átvigyem egy napi kihívásba? És így tovább…

Érezhető, hogy ebbe az egyszerű alapgondolatba mennyi minden beleférhet, ha kellően sokat foglalkozom vele. Elsőre egy egyszerűbb csomagot fogtam meg ebből, és így álltam neki.

Készítsünk hozzá rajzokat, terveket

Az elképzeléseimet vethettem volna papírra is. Sok helyen ezt javasolják, bár én már türelmetlenül vártam, hogy vizuálisan megfogalmazzam, ami a fejemben volt.

A tervezésre általában a Figma online szerkesztőjét használom. Ez kiváló 2 designer együttműködésére. Bárkivel meg tudom osztani a terveimet átnézésre. Nincsen korlátja. Ami még nagyon jó benne, hogy tudok mobilos drótvázat (wireframe) csinálni.

Először az adott témában gyűjtök vizuális részleteket. Keresek olyan app-okat, színeket, ikonokat, betűtípusokat, amikből majd összeépítem a művemet. Ezt itt tudod megnézni. A drótvázat pedig ide tettem. Ebben tulajdonképpen létre tudok hozni érzékeny felületeket, amik kattinthatóak, és átvisznek egy másik képernyőre. Olyan mintha máris működne 🙂

Mennyi időt fog igénybe venni, mire elkészül?

Ekkor szoktam nyitni egy Google spreadsheet-et a számításoknak. Megosztok egy letölthető változatot, hogy támpontot adjon a szükséges feladatok listájáról. Ez nem teljes, és a számok is mintaként szolgálnak. Összetett lista, az látszik rajta. Ezeket lehetne még jóval tovább részletezni.

a számítások táblázata

Hol fog életre kelni?

Nos, főként mobil alkalmazások fejlesztésével szeretek foglalkozni. Ha kell, a háttér részét is elkészítem Kotlin nyelven, Spring Boot web-alkalmazást. Szóval most a Google Firebase felhőszolgáltatását vettem elő. Ez tud mindent (sőt!), amire nekem szükségem lesz.

Szükségem lesz a kérdések tárolására, hogy folyamatosan újabb és újabb kérdéseket tudjak betölteni.

A felhasználók regisztrációja a későbbiekben szükséges lehet. Ez még alakulni fog.

Idáig fogok eljutni

Előre pörgetve az eseményeket, egy alap, un. MVP (Minimal Valuable Product = Minimálisan Használható Termék) így néz ki. Ezen már érződik a koncepció. Körvonalazódnak a színek, formák, elhelyezések.

Ebben a sorozatban tovább haladok a mobil app fejlesztés megvalósításával. Beszélni fogok az apró részletekről, döntésekről. Ha követed az írásomat, látni fogod, hogy hogyan alakul ki a végleges változat.

Amennyiben megtetszett, és te is szeretnél egy hasonlót magadnak, keress meg, beszélgessünk az álmaid mobil alkalmazásáról!

Borítókép: Halacious / Unsplash.com

Merre tart a kereszt platformok fejlődése a mobil eszközökön?
Melyiket válasszuk 2020-ban?

Viktor

Az utóbbi években egyre elterjedtebbek az un. kereszt platformok használata a mobil app-ok fejlesztésére. Ami mindenre jó, az igazán semmire sem, tartja a közszó. Vannak azonban olyan helyzetek, amikor verhetetlenek ezek az eszközök.

A kereszt platform (cross-platform) vagy multi-platform azt jelenti, hogy egyszerre készül el az alkalmazás Androidra, iOS-re (Windows Phone-ra ???). Ebből érezhető, hogy azért előnyös a fejlesztőnek, mert elegendő egyszer elkészíteni az alkalmazást, és a feladat nagy részével megvan. A megrendelőnek szorosan kapcsolódik az érdeke ehhez, hiszen pontosan fele annyi fejlesztői munkát kell kifizetnie, mintha mindegyik platformra natívan, külön-külön készíttetné el.

kereszt platform mobil eszközökön megoszlása 2020 évben
A statista.com kimutatása alapján a React Native és a Flutter keretrendszerek 2020-ban a legnépszerűbbek

A thedroidsonroids.com cikke alapján készítettem ezt az összefoglalót.

A népszerű mobil kereszt platformok

A fenti ábrán látszik, hogy a React Native (42%) mögött kevéssel marad le a Flutter (39%). Az évek közti növekedésbeli helyzést egyértelműen ez utóbbi hozta.

A saját vállalkozással rendelkezők mindig tudni szeretnék néhány kritikus kérdéseikre a választ:

  • Melyik illik legjobban a projektemhez?
  • Melyik megoldás hozza a legjobb Time-to-market időt?
  • Az app-om stabilan megbízható lesz és felhasználóbarát?
  • Melyik lesz a legjobb, ha pixel-perfect kinézetet akarok?

A cikkből kiderül, hogy a követőtábor alapján fej-fej mellett halad a két framework. A React Native-t a Facebook 2015-ben jelentette meg, ami egy érettebb keretrendszert feltételez. Ezt azonban a Google, 2018-ban kiadott, Flutter béta megjelenése beérte mára.

Tudásban nehezen megkülönböztethető, apró eltérések vannak. Mindkettő natívan fut a telefonon, ez meglátszik a kiváló teljesítményen. Alkalmanként akár túl is teljesítve azt. Ennek ugyan ára van az alkalmazás méretében. Ez talán mára elhanyagolható, de érdemes megemlíteni.

Az, hogy ki melyiket használja, szinte ízlés kérdése. Meghatározhatja, hogy a fejlesztő korábban web oldalkat programozott, akkor a React Native JSX nyelve fog jobban kézre állni. A Flutter Dart nyelve viszont modern, szerethető és könnyen elsajátítható.

A gombok, listák, stb. az adott OS-re megszokott kinézetet hozza. Androidon a Material Design-t, iOS-en pedig a Cupertino Design-t. Az érzet és kinézet tehát teljesen ugyan az.

Hol tart most a Flutter

Korábban írtam a Flutter keretrendszerről, és előnyeiről. Az azóta eltelt néhány hónap további újdonságokat hozott. Lekövetve az Android 11 nyári, és az iOS 14 őszi érkezését. Azonnal reagálva a változásokra, gyakorlatilag napokon belül kikerültek az utánkövetések, amiket az OS megkövetelt.

App-ok, amik Flutter-ben készültek:

App-ok, amik React Native-ben készültek:

  • Instagram
  • Facebook
  • Skype
  • Pinterest
  • Tesla
  • Fb Ads Manager

Minden app tulajdonos rémálma

Az jól látszik, hogy az elmúlt másfél évtized kitermelt magából sok megoldást, hogy minél egyszerűbben, zökkenőmentesebben, vagy éppen a tudásunk újra felhasználásával lehessen mobil app-okat készíteni. Egy kereszt platformnak számos előnye van a mobil fejlesztésben.

Mindezek ellenére a fórumokon örökzöld téma, hogy mi lesz, ha majd bezárják, vagy fizetőssé teszik ezeket a keretrendszereket. Mi lesz, ha egyszer csak az Apple nem engedi be a nem natívan megírt alkalmazásokat? (Az Apple amúgy is eléggé szőrszálhasogató tud lenni az elfogadási irányelveivel.)

Nos, látva a Google, szinte minden hétre jutó bejelentéseit, ez nem várható, legalábbis rövid távon. Azáltal, hogy mind a két mobil operációs rendszert beveszi, továbbá, Linux, Mac és Windows asztali fejlesztések felé nyitja meg a kapukat a fejlesztők előtt. (A Microsofttal a hetekben közösen jelentették be az együttműködést.)

Egy nagy előnnyel mindenképpen érdemes tisztában lennünk: az a keretrendszer fejlesztőinek a feladata, hogy összecsiszolják az adott operációs rendszerrel. Ezzel nem a fejlesztőnek kell foglalkoznia, hosszú órákat eltölteni egy hiba keresésével. Ez növeli a produktivitást.

Merre tovább?

Az látszik, hogy a Flutter még az elején van a pályafutásának. Ez a görbe a felszálló ágon van. Nem is lehet megjósolni, hogy mikor éri el a csúcspontját. Az eltökéltség a Google részéről látszik. Mivel van még mit csiszolni az alfa/béta támogatásokon, ez eltart egy darabig.

De ki tudja. Az informatikában egy biztos, hogy folyamatosan fejlődik. Pár év alatt elavulnak a dolgok, és újat kell tanulni. Egyszer jön majd egy jobb, szebb keretrendszer, ami ugyanúgy rabul ejti a fejlesztők szívét.

Egy népszerű kereszt platformok ismeretére a mobil fejlesztésénél szüksége van minden fejlesztőnek. Bármelyik is legyen az.

Keress pénzt a honlapoddal egy saját mobil app-pal
Találd meg a saját bevételi forrásodat

Viktor
mobil app magazin közösségi oldal

A blogok, honlapok száma mára megszámlálhatatlan. Rengeteg témában indul minden percben egy új honlap. Az szerzők naponta azért kelnek fel, hogy új ötleteikkel, inspirációikkal segítsék mások mindennapjait. Teszik ezt önzetlenül, a saját idejüket áldozva a célért. Egy mondatuk valakinek az egész életét átlendíti egy magasabb szintre. Legyen elismerés számukra! Ezért megérdemelnek viszonzást a munkájukért. Egy saját mobil app segíthet a bevételszerzésben. A “HOGYANról” írok a cikkemben.

Elöljáróban idevetem az internetre mára jellemző szólását: a sűrű fillér, ritka forint jelenségét. A követők sokszor, kis összegeket, és szívesen áldoznak kedvenc szerzőjüknek, közösségüknek. Ez a fenti mondat megfejtése. A viszonosság elvét követve, a kis közösségek vissza szeretnének adni a tartalmat létrehozónak.

A kölcsönösség elve: ingyen tartalomért fizetség jár

Folytatva a fenti gondolatmenetet, ha jó a tartalmad egy oldalon, akkor biztosan lesz olyan, aki szívesen fizetne a tartalomért. Hiába van minden ingyen az Interneten. Ez egyszerűen abból adódik, hogy mindenkit más szólít meg. Más, ahogyan becsomagolod a tartalmaidat. Megnyerőbb az üzeneted, amit át akarsz adni. Sokszor sok időt spórolsz meg magadnak, ha egy olyan valakinek az anyagát veszed meg, aki otthonos a témában, és jól összegyűjtve mutatja meg neked egy problémádra a gyógyírt.

Adj el digitális tartalmakat

Sokféle formája van a termékeknek, amik értékkel bírnak. A zenék, fotók, videók nagyon népszerűek és kelendőek. Nem kell őket papírba csomagolni, hogy rengeteg vásárlóhoz eljussanak. Ezeket a költségeket megspórolva te is olcsóbban és jobb minőséget tudsz adni.

Online kurzusok

Az elmúlt években felpörgött az interneten megvásárolható tananyagok száma. Van nagyon sok ingyenes a YouTube-on, Udemy-n, Teachable platformokon. Ott vannak az egyetemek MOOC (Massive Open Online Course = Nagyméretű Nyílt Online Kurzus) anyagai. Ma már sokkal specifikusabban tanulunk online. A sallangot kihagyjuk, és koncentráltan, szűk témákból csipegetjük össze a tudásunkat.

Sokszor nem az iskolapadban tanulunk, hanem buszon, ágyban fekve elalvás előtt, reggelizés közben.

Fizetős tagság

Vannak időszakok, amikor felértékelődik a közösségek ereje, és akár online szervezünk találkozókat. Könnyebben, gyorsabban összejön egy közös érdeklődésű csapat. Ha már van egy jól bejáratott, ingyenes oldal, ami köré szerveződött egy FB csoport, akkor nekik lehet kiemelt tartalmakat, oktatást, tagságot felajánlani. Ez mindenkinek jó, hiszen megint csak, minőségibb tartalmakat kaphatnak a tagok. Emellett egy természetes szűrőként, azok fognak csatlakozni, akiknek komolyabb céljuk van az életben. Ehhez egy prémium tagság elengedhetetlen.

Egy jó példa a fizetős tagságra Dallos Zoltán által alapított Mentor Club. Ez egy olyan célorientált szabadúszók és vállalkozni vágyók VIP csoportja, ahol támogatást, motivációt és segítséget kapsz az álmaid megvalósításához.

Mire képes egy saját mobil app?

Egy közösségi szemlélettel megtervezett saját mobil app megkönnyíti a kapcsolattartást a tartalmaidat fogyasztókkal. Egészen más élményt ad, amikor egyszerűbben kérdeznek tőled. Milyen jó érzés, amikor látod, hogy a saját oldalad magától él a sok résztvevő aktív közreműködésével.

Nem vitás, hogy ma már egy mobil app vonzóbb a fiatalabb korosztálynak (“Mobile first!” trend), mint a honlapokon a kapcsolattartás.

A fizetés egyszerűbb, hiszen nem kell elhagyni az app-ot hozzá. Többféle szolgáltató bevezethető egy alkalmazásban. Kényelmi funkciókkal a fizetési adatok megadása egyszerűbb, a biztonság szem előtt tartásával. Pl. ujjlenyomatos azonosítás után tölti ki a bankkártya számát, lejárati dátumát.

A tartalmakat gyorsabban tölti be, akár internet nélkül is. Egy érdekes cikket, bejegyzést el tudunk menteni későbbre. Erről akár még értesítést is tudunk beállítani, ha megfeledkeznénk róla.

Könnyebben osztható meg tartalom. A telefonon számos, előre telepített alkalmazásunk közül választhatunk, hogy melyikben szeretnénk megosztani.

Valljuk be e-mail-ekkel már tele van mindenkinek a postaládája. Hiába pottyan be a napi 10-15 db hírlevél, már immunisak vagyunk rájuk. Ehelyett egy Push értesítés viszont egyből reakciót vált ki és megnyitja az olvasó a tartalmunkat. Ezzel óvatosan kell bánni, mert nagyon zavaró. Lehetőséget kell biztosítania az alkalmazásnak, hogy milyen tartalmakról kér jelzést. Amikor ezt a beállítást elvégzi a felhasználó, mi is jobban megismerjük az igényeit. Jobban tudunk célozni a tartalmainkkal. Win-win helyzet!

Egy mobil app további előnyeiről írtam már korábban.

Tudja mindezt a mostani honlapom is?

Kezdő bloggerként talán te is egy WordPress oldallal kezded el. A jó hír, hogy rengeteg kiegészítő érhető el hozzá, amivel nemcsak a honlapod lesz csúcs, de egy mobil applikáció is ki tudja használni a lehetőségeket.

Néhány kisebb beállítással egy Trabantból Porsche varázsolható.

Vannak ingyenes, és fizetős kiegészítők is. Érdemes költeni rá valamennyit, hogy azt kapd, amit vársz, nem egy kompromisszumos megoldást. Hiszen ha sikerül egy bevételi csatornát kialakítanod, vagy növelned, akkor megtérül.

A jól beállított honlap már félsiker. Ehhez kell egy jó terv, egy lista, hogy mi kerüljön be a saját mobil app funkciói közé. Ma már az sem akadály, ha mind Android, mind iOS változatban gondolkozol. Erre vannak nagyon jó fejlesztői megoldások, amik spórolnak a pénztárcádnak, a minőséget megtartva.

Amennyiben érdekel egy saját magazin, egy közösségi alkalmazás mobilos megoldása, jelentkezz be nálam egy ingyenes beszélgetésre.

Borítókép: Zui Hoang / Unsplash

money from wallet

Legjobb érvek egy mobil-alkalmazás megrendelése mellett
Ezeket ellenőrizd, mielőtt megrendeled

Viktor
mobil-alkalmazás vagy weblap legyen

Az elmúlt több, mint 10 évben, amikor megjelentek az okos telefonok, egy új formátumot hoztak magukkal: az app-okat. Miben nyújt többet egy mobil-alkalmazás egy responsive weblap helyett? Ha komoly elhatározásunk van egy mobil-alkalmazás megrendelése mellett, akkor az elképzelésünknek már csak a pénztárcánk szabhat határt. Ár-érték arányban hogyan teljesítenek a jól bejáratott weblapokhoz képest? Ezt a témát járom körül.

Mit mutatnak az alkalmazás-áruházak statisztikái

Kezdjük a száraz számokkal, mert azok ritkán tévednek. A statista.com mutatóit megnézve, látható, hogy a mobil-alkalmazások letöltései töretlenek. Évről évre a bővülő készülékszám mellett az app letöltések is bővülnek.

mobil-alkalmazások letöltésének száma világszerte
A mobil-alkalmazások letöltésének száma világszerte 2016 és 2019 között

Az Apple App Store 2020 júniusi kimutatása szerint a letöltések 50%-át a következő kategóriák teszik ki: Játékok (22%), Üzleti (10%), Oktatás (9%), Életmód (9%). Ebből körvonalazódik, hogy melyek a nyerő irányok. A lista végéről nézve érdekes kép rajzolódik ki: Hírek, Orvoslás, Fotó és Videó, Sport, Social Networking, Vásárlás, Zene, stb. Kb. 2-3%-ot jelent minden egyes kategória. Az alacsony részesedés magyarázható azzal, hogy a hírekre ott van a web; fotó és videó, zenelejátszó alapból jár a telefonra, előre telepítve.

Az digitális termékekre költött fogyasztói kiadásokat mutatja az alábbi grafikon. Ha az EMEA régiót nézzük (Europe, Middle-East, Africa), akkor az előre vetített bővülés több, mint 150%-os 2018-ról 2022-re.

mobil-alkalmazásokra vonatkozó fogyasztói költések világszerte
A mobil-alkalmazásokra vonatkozó fogyasztói kiadások világszerte 2017-ben, 2018-ban és 2022-ben, régiónként, milliárd USD-ben.

2018-ban a globális mobilalkalmazások bevétele több mint 365 milliárd USD volt. 2023-ban a mobil alkalmazások várhatóan több, mint 935 milliárd dollár bevételt generálnak fizetett letöltések és alkalmazáson belüli hirdetések révén.

mobil-alkalmazások bevétele világszerte
A mobil-alkalmazások bevétele 2014 és 2023 között világszerte, milliárd USD-ben.

A Freemium (Free + Premium) üzleti modell jól bevált a gyártóknak. Töltsd le ingyenesen, és ha már elkötelezett vagy, akkor apró költésekkel fizetek ki az egészet.

A fentiek alapján látható, hogy megfelelő bevételszerzési stratégiával lehet jelentősebb bevételeket generálni.

Ezeket számold bele egy mobil-app projektbe

Eldöntötted, hogy mégis belevágsz. Egy mobil-alkalmazás megrendelése a végszó!

A következő feladatokat kell számolni:

  • Projekt tervezése
  • Felhasználói élmény tervezése (UX design)
  • Felületek tervezése (UI design)
  • Megvalósítás, ami általában a legnagyobb részét teszik ki a munkának
  • Marketing feladatok: előtte, induláskor, utána
  • Az alkalmazások frissítése (legalább fél évente), hibajavítások

A fejlesztési idő, és ezáltal a költségek egy része egy jó kereszt-platformmal (cross-platform) csökkenthetőek. Nem mindegy, hogy kétszer kell egy alkalmazást megírni, vagy egyszer, és Androidra vagy iOS-re csak igazítani apróságokat.

Én a Flutter kereszt-platformot használom. Ennek előnyeiről itt írtam korábban. Létezik számos másik, ezeket előtte érdemes egyeztetni a megrendelővel, hogy milyen funkciókat vár. Vannak-e korlátai, amik nem, vagy csak körülményesen teljesíthetőek?

A költségek csak az egyik szempont

Előfordul, hogy egy cégnek egy mobil app egy névjegyet jelent. Ki lehet tenni, megmutatni, hogy ilyen is elérhető a portfóliójában. Ez egyfajta presztízs dolog.

Ne feledkezzünk meg a megkívánt funkciókról. Szeretnénk-e ismétlődő értesítéseket küldeni a felhasználóinknak, ami a marketingre fordított költségeinket javíthatja. Kell-e bele GPS funkció? Netán egy magával ragadó játékot álmodtunk meg? Fontos, hogy offline is bármikor elő tudja kapni a felhasználó?

Segítségképpen összegyűjtöttem egy listát, hogy ötleteket adjon, hogy miket kell mérlegelni a döntés előtt. A listában számos szempont szerepel, amiket érdemes átgondolni. A funkciólista alapján kirajzolódik, hogy mire lesz szükségünk: app vagy weblap?

Ellenörző-lista : Mikor van szükségem mobil app-ra?

Az email címed megadásával elfogadod az Adatkezelés tájékoztatót, és feliratkozol a hírleveleimre.

Az első hírlevélben a beállításait módosíthatod.
Kérem Az Ingyenes Ellenörző-listámat

Ide kérem a letöltési linket:

Remélhetőleg a cikk segített egy sikeres döntés előkészítésében, és spórolni a költségeken.

Ha maradt még kérdésed, akkor egyeztessünk egy ingyenes megbeszélést, ahol tovább pontosíthatod a céljaidat.

Borítókép: Allef Vinicius | Unsplash

TOP5 tipp a mobil-alkalmazás megrendelőnek
A mobil-alkalmazás vagy web alkalmazás közül melyik kell nekem?

Viktor
mobil-alkalmazás és webalkalmazás a képernyőkön

A digitális világ megállíthatatlan fejlődést mutat. Kezdetben csupán kiváltságosoknak járt az azonnal üzenetküldés (e-mail őse a ’90-es évek elején), mára szinte már ódivatúnak tűnhet. Gyorsan változik, ahogyan kommunikálunk egymással. A weblapokkal az a helyzet, hogy ma már bárki tud indítani egy oldalt, viszont a mobil app-ok berobbantak az életünkbe és egyre nagyobb szeletet követelnek. Mobil-alkalmazás megrendelőként hogyan dönts el, mikor melyikre van szükséged? Ezt járom körül a cikkemben.

Fejlesztési idő

Hosszabb idővel kell számolni egy mobil alkalmazás megvalósításakor, szemben egy weboldal leprogramozásával. Az idő szoros kapcsolatban van a költségekkel, amire lejjebb visszatérek.

Egy mobil app-ot mindkét ismert platformra el kell készíteni. Ehhez általában kell a két platform ismerete, de ebben segítségünkre jön a Flutter keretrendszer. Írd meg egyszer a kódot, és fordítsd le natívan mindkét operációs rendszerre – ígérik a keretrendszer fejlesztői.

A felhasználói élmény

Ma már többnyire online vagyunk, észre sem vesszük, hogy használjuk. Egy honlap esetében alapvető, hogy kell neki kapcsolat, mert a szervertől kapja az adatokat. A szerver állítja elő az oldalakat. Alkalmazás esetén nem biztos, hogy le kell tölteni, mert már a készüléken van az adat.

Van, hogy gyorsan kellene egy infó, de Offline vagyunk. Ettől a mobil app még tud jól működni. Elérhető benne a címtárunk, a jegyzeteink, a kedvenc játékunk. Majd amikor ismét lesz internet, akkor szinkronizál a szerverrel. Ha a kapcsolat hiánya miatt a felhasználónak rossz élménye van, akkor nekünk natív megoldásban kell gondolkoznunk.

Emiatt elmondható, hogy a mobil alkalmazást bárhol lehet használni. Ezt várjuk tőle. Legyen ott a zsebemben az infó, mindig elérhetően.

Használjuk a telefon képességeit!

Amikor veszünk egy új készüléket, akkor többnyire az képességeit akarjuk kihasználni az alkalmazásainkban. A natív megoldások ezekhez hozzáférést kapnak, úgy mint: GPS helymeghatározás, ujjlenyomat olvasó, SMS-ek olvasása, Névjegyzék, NFC, a telefonon tárolt file-ok, stb.

Ezzel szemben a webes megoldással ezekről le kell mondanunk. Ha tudjuk nélkülözni őket, akkor ez nem egy fájó pont.

Biztonsági kérdés

Web alkalmazás a böngészőben fut, nem lehet mindig megvédeni a kódunkat. Egy weblapot bárki könnyedén publikálhat pár perc alatt, nincsen különösebb ellenőrzés.

Ezzel szemben a mobil-alkalmazás áruházak előszűrést végeznek, hogy minél kevesebb ártalmas app kerülhessen ki. 100%-os védelem ugyan nincsen, de nehezebb visszafejteni a működést és kihasználni az esetleges gyenge pontokat.

Ehhez párosul még, hogy az app telepítésekor a jogosultságokat is el kell fogadni, illetve később ki-, be kapcsolhatóak. Nagyobb kontrollunk van a beállításoknál.

A költségek hogy állnak?

Az online piacon nagy a versengés. Ki tud előbb kijönni egy új termékkel, koncepcióval, ötlettel? Mennyibe időbe telik, míg egy adott termék bemutatható?

A fentiek alapján ez a saját lehetőségeink kérdése, hogy mit választunk. Elfogadható élmény mellett egy gyors visszajelzés kell? Vagy már igazoltuk, hogy a megoldásra szüksége van a piacnak, és hajlandóak vagyunk egy kiváló élményért mélyebben a pénztárcánkba nyúlni?

A natív megoldásnál szokásos kérdésként merül fel: Android vagy iOS verziót akarunk? Lehetőleg mindkettőre. Itt adódna a válasz, hogy akkor biztosan egy kétszeres szorzóval kell számolnunk, dupla fejlesztési idő, csapat, stb. Nos, a jó hír, hogy erre vannak kiváló megoldások, és például a Flutter keretrendszerrel ez alapból jár. Mobil-alkalmazás megrendelőként ezekről jó, ha tudsz!

Fontos szem előtt tartani, hogy az a jó alkalmazás, amit sokan és visszatérően használnak.

Összegzés

A fenti felsorolásból leszűrhető, hogy nem minden áron van szükség egy natív mobilos megoldásra. Ha egy gyors prototípus kell csak, arra vannak más megoldások. Amennyiben egy responsive weboldalt már jól bejárattunk, és szeretik a felhasználóink, akkor megmaradhatunk annál.

Egy mobil app akkor elengedhetetlen, ha a mobil telefonunk nyújtotta lehetőségeket ki akarjuk aknázni. Ez elengedhetetlen, ha kamera vagy mikrofon kell. Értesítéseket akarunk küldeni a felhasználóinknak. A fotógalériához vagy a névjegyekhez kell a hozzáférés. Fontos számunkra, hogy tökéletes élményt nyújtson, akadozás-mentesen a programunk.

Ha mobil-alkalmazás megrendelőként egy új termékben gondolkozol, és gondolatébresztő után további kérdések merültek fel benned, akkor javaslom, hogy vedd fel velem a kapcsolatot. Egy ingyenes konzultáció alakalmával szakmai hozzáértéssel tudlak segíteni a döntésed meghozatalában.

Kérem az ingyenes konzultációt

Borítókép: Marvin Meyer / Unsplash

Vajon nyugdíjba küldi a Flutter a WordPress-t?

Viktor

A WordPress oldalak itt vannak velünk régóta. Sikere töretlen, hiszen nagyon egyszerű elindulni vele. Több ezer kiegészítőt írt hozzá a közösség, akik életben tartják a jóhírét. Bármilyen feladatra biztosan hogy van már tucatnyi plugin. Szinte bármelyik rendszerrel összekapcsolható, de a legnépszerűbbekkel biztosan. A Flutter képest ezt megtörni?

Mi az előnye? Programozói tudás nélkül, pár óra alatt, akár kezdőként is létrehozhatjuk az saját alap honlapunkat. Ha választunk hozzá egy template sablont, akkor a kinézettel sem lesz gondunk. Van, aki gyűlöli, van, aki imádja. Igen megosztó platform.

Hogyan jutott eszembe ezek után az érvek után összehasonlítani a Flutter-rel? A Flutter egy UI kit a Google-től, ami több platformot is támad egyszerre: mobil, web és lassacskán az asztali alkalmazásokat. A Google nem titkolt célja, hogy legyen szó bármilyen képernyőről, ott elérhető lesz a Flutter. Vagyis a közös Dart nyelven megírt kód bármelyik eszközön működni fog. Ez jó hír, mert a fordítással nem nekünk kell bajlódni.

A korai tapasztalatok

Azt persze nem lehet megjósolni, hogy mikorra lesz széles körben is népszerű ez a technológia. Az látszik, hogy mégha új nyelvet is kell megtanulni (az alkalmazásokat Dart nyelven kell megírnunk), a sikere elvitathatatlan. Egyszer kell megírnunk az alkalmazásunkat, és cserébe Androidra, iOS-re, bármely böngészőre optimalizálva elkészítettük. Ez biztosan a jövőben nagyon erős szempont lesz egy, a projekt pénzügyeiért (is) felelős Projek Managernek. Vagy egy CEO-nak, aki most indítja a startup-ját.

Több, mint fél év tapasztalat után állíthatom, hogy a Google beváltotta az ígéreteit. Valóban egy megfelelően gyorsan fejleszthető alkalmazás keretrendszert hozott létre. A hozzá kapcsolódó fejlesztő eszközökkel kiegészítve. Ezeket belegyúrták az Android Studióba, és szintén erős támogatást kapott a VS Code. Rájöttek, hogy nem csinálhatják meg újra ugyan azt, mint az elején, hogy gyenge eszközöket adnak a lelkes fejlesztők kezébe. Mindehhez létrehozták az ingyenes package-ket hosztoló pub.dev fejlesztői oldalt, ahol több ezernyi, kész, és minősített csomagot tudunk egy mozdulattal felhasználni a saját alkalmazásunkban. A közösség pedig kapva kapott rajta, és fantasztikus dolgokat hoznak létre az open-source égisze alatt.

Nos, hogy valaha lesz-e helycsere a két platform között, az még várat magára. A Flutter web nem az out-of-the-box megoldás egyelőre. Kívácsian várom a template rendszereket, konfigurátorokat, amikkel pár perc alatt mindenki létrehozhatja a saját mobil alkalmazását. Ehhez egyre több, ismert márka csatlakozik: Adobe XD, Supernova Studio (Mac-re egyelőre). Ezek a szerkesztők már támogatják, hogy Flutter alkalmazás készüljön a megtervezett designból.

Következtetés

Ez persze még kicsit odébb van. A designereknek kedvezett a Google/Flutter és más team-ek együttműködése. Minden esetre elindult egy jó folyamat: azáltal, hogy a Google definiálta a Material Design-t, a Cupertioni srácok HIG-t (Human Interface Guideline) és a Flutter ezeket implementálja, ezáltal bármelyik fejlesztő egy alap szintű UI-t faraghat az alkalmazásához. Egy kellően jó kinézet már akkor is kijöhet a kezünk alól, ha éppen nem bűvöl el minket a pixelek tologatása. Ez pedig közelíti egy fejlesztő és egy designer közötti távolságot.

Ezért használják már félmillióan a Flutter-t
Ideje újat tanulnod

Viktor

Újabb bejelentések történtek a Google háza táján. A Flutter Spring 2020 Update nyilvánosságra hozta, hogy több, mint 500 000 fejlesztő használja már az egyre népszerűbb Flutter UI kit-et. Ez nem meglepő, hiszen cross-platformos megoldásokban (Android, iOS, web, desktop, …) egyelőre a legjobb megoldásnak találtatik.

Előnye, hogy egy kódbázissal a fent említett platformokra elkészül a kód, és a fordítást (build) kell elvégezni a megfelelő rendszerre. A közös kódnyelvre a Google a saját Dart nyelvét választotta. Ez azt is jelenti, hogy meg kell tanulni egy új nyelvet. Bár ha van alapvető objektum-orientált előképzettségünk, akkor ez nem jelent gondot. Összehasonlítva pl. a Java teljesen OOP megközelítésével, itt lehetőség van az osztályokon kívüli, modul szintű egységek szervezésére is. Ez nagy előny, és rugalmasságot ad a kezünkbe. Összességében elmondható, hogy egy egyszerű, de mondern nyelvről van szó.

Ennyit a technikai háttérről, nézzük a számokat!

A fejlesztők 60%-a Windows-on, 27%-a macOS-en, 13%-a Linux-on fejleszti a kódját.

A gyors UI fejleszthetőség miatt felkapott a startupok körében (35%), de a vállalati használat is jelentős (26%). Emellett említsük meg, hogy a design studiók is elkezdték használni (7%). Ez főként annak köszönhető, hogy a Flutter-t már a legelejétől fogva a Google a fejlesztőkkel egyeztetve, és kellően felvértezett eszközarzenált adott a kezünkbe. (Nem akarta elkövetni azt a hibát, amit pl. az Android esetében, hogy csak évek múlva sikerült valamelyest jól használható tool-okat adni a fejlesztők kezébe.)

A Flutter öt legelterjedtebb területe India, Kína, az Egyesült Államok, az EU, és Brazília.

Flutter a vállalatoknál

A Flutter növekedése gyors ütemben bővül a vállalati ügyfelek körében, és a Google kutatásai azt mutatják, hogy ennek az a fő oka, hogy gyorsan lehet teljesen saját arculatot kialakítani úgy, hogy a többplatformos megoldást támogatja. Egységesíteni lehet a front-end kialakításánál a fejlesztő csapatot egy közös keretrendszerre, mindamellett, hogy gyorsan készülnek el a funkciók Android-ra és iOS-re egyszerre.

Fontos, hogy rendelkezésre állnak sok és nagyon jó minőségű, professzionális építőkockák, amikből a felületek, vagy a drótvázak létrehozhatóak.

Az új verziók kiadását újragondolták

A keretrendszer egymást követő verzióinak stabilitása és egy új kiadás dátumának megjósolhatósága fontos lépés volt. Ezt szem előtt tartva, nagy hangsúlyt fektetnek rá, hogy még egyértelműbb legyen a különféle verziók stabilitása. Egy gyors fejlesztést követelő megoldásban elengedhetetlen, hogy az új verziók megjelenése ne borítsa fel a fejlesztőcég életét. Ezek a módosítások már az áprilisi kiadásokban is tetten érhetőek lesznek.

Konlúzió

Látható tehát, hogy a Google nagy erőket mozgósít, hogy minél jobban megszerettesse az új rendszerét a nagyközönséggel. Használva a Flutter-t nekem az a tapasztalatom, hogy nem az a kérdés, hogy hogyan, hanem hogy mit szeretnék megcsinálni. Több éves Android fejlesztői tapasztalataim alapján elmondhatom, itt valóban jól ki vannak találva az építőkockák. Könnyedén összerakhatóak az alkalmazások. Az eszközök használata (ami folyamatosan bővül) elgondolkoztat, hogy akár már egy drótvázat is érdemes kód szinten elkészíteni (vagy generáltatni, pl. Adobe XD-ben). Ebben az esetben a kód fele már megvan, a UI.

Az egyszerűségéről te magad is meggyőződhetsz, ha be akarod piszkítani a kezedet. Ebben az írásomban letölthető kód példával bemutatok egy pár alap dolgot.

Külön szimpatikus az a törekvése a Google-nek, hogy a “mezei” fejlesztőkből egycsapásra design-erek válhatnak. Persze mindegyik egy külön szakma, de a közös nyelvezet kialakításában mindenképpen segíthet.

Ha tetszett az írásom, oszd meg velem. Amennyiben javítani valót találsz, ne tartsd magadban. Várom a hozzászólásaidat a témához.

A mobil app fejlesztés új formája
Minden mobilfejlesztő álma

Viktor

A Google gurított egy nagyot a multiplatformos mobil app-ok fejlesztése teréln. Ennek 2019 adta meg a végső lökést a Flutter UI toolkit erős promóciójával. A Flutter egy olyan multiplatoformos keretrendszer, ami megsokszorozza a produktivitást a fejlesztői csapatban. Nem pusztán arról van szó, hogy Android-ra, iOS-re, Desktop-ra és Web-re (és a sor folytatódik) egy kódbázissal tudunk fejleszteni.

Maga a fejlesztési folyamat nagymértékben felgyorsul azáltal, hogy élő nézetet kapunk a felületről, amint elmentjük a kód módosításunkat. Ennek ugyan az az ára, hogy a kódot a Google által fejlesztett Dart nyelven kell írni. Persze aki ismer már egy objektumorientált nyelvet (Java, JavaScript, TypeScript, C++, Kotlin, stb.) ez nem akadály. Akinek pedig ez az első nyelve, az egy modern nyelvet fog megtanulni. A kódolás szintaxisának megtanulása pár órában, legfeljebb napokban mérhető.

Minden “Widget”

Így van! Bármihez is kezdük a felületen, biztosan szükségünk lesz egy widget-re. De mi is ez valójában? A widget-ek olyan kis építőkockák, amikből független, előre megírt, de nagyban személyes igényeinkre szabható felületek hozhatóak létre. Jó-jó, de mit tud? Gondoljunk egy egyszerű gombra. Ez egy widget, a maga absztrakciójával. Ha van egy gombunk, pár paraméter beállításával módosítható a színe, a betű színe, a betű stílusa, a sarkok kerekítése. Egyszóval bármi. Értsd, tényleg bármi!

Material csomag

A legjobb az egészben, hogy a Google ehhez felépített egy teljes grafikai UI/UX open-source leírást. Ezt mérnökök sok-sok év tapasztalatával gyűjtötte össze, hogy mi mutat jól egy mobil kijelzőjén, és mitől lesz egyértelmű az interakció. Iránymutatást ad a design alapelveire, stílusokra, bevált módszerekre. Az egyes komponensek (widget) és ikonok használatára, tervezéséhez nyújt segítséget. Nem megfeledkezve az Accessibility-ről, vagyis gondolt azokra is, akiknek az alapvető kezeléssel nehézségei adódnak. Pl. látássérült, hallássérült vagy kognitív hiányosságai vannak.

Érdemes ellátogatni az oldalukra https://material.io. A későbbiekben vissza fogunk nyúlni ehhez a remek csomaghoz.

Példák

Ne múljon el ez az írás anélkül, hogy egy pár felületet megnéznénk.

Emlékszünk még az Androidon az Activity-kre és a Fragment-ekre? Nos, itt ezzel nem kell bajlódnunk. A navigációt pár sorral lerendezzük. A tranzíciók szépen meg vannak csinálva alapból, de tudunk finomítani rajtuk.

basic screen navigation with buttons
Alap képernyőképek navigációval

Button

Egy gomb definiálása a legegyszerűbb egy RaisedButton widget-tel. Ez be van még csomagolva egy Transform.rotate widget-be, ami az elforgatást intézi.

Transform.rotate(
                angle: 0.2,
                child: RaisedButton(
                  color: Colors.amber,
                  elevation: 5,
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
                  child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Text(
                      "Switch to Page Two",
                      style: TextStyle(fontSize: 20, color: Colors.green),
                    ),
                  ),
                  onPressed: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(builder: (context) => PageTwo()),
                    );
                  },
                ),
              )

ListView

Lista nézet egyszerűen. Nem kell a RecycleViewHolder rémálommal bajlódni, mint korábban. Felsoroljuk a ListView-ban a widget elemeket, és készen is vagyunk.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      ...
      body: Container(
        padding: EdgeInsets.all(10),
        color: bgColor,
        child: ListView(
          children: [
            ListItem(order: 1),
            ListItem(order: 2, onPress: _navigateToPageTwo(context)),
            ListItem(order: 3, onPress: _navigateToPageTwo(context)),
            ListItem(order: 4),
            ListItem(order: 5),
            ListItem(order: 6),
            ListItem(order: 7),
            ListItem(order: 8),
            ListItem(order: 9),
            ListItem(order: 10),
          ],
        ),
      ),
    );

AppBar

Az oldal teteji navigációra ugyancsak megvan a kész megoldás. Az AppBar-nak elnevezett widget ezután tetszőlegesen paraméterezhető. A szokásos materialos felületeket tudja. Ha nem lenne elegendő, akkor természetesen testre szabhatjuk.

SlivertAppBar

Komplex mozgási effekt az AppBar-t kiegészítve. Ezzel nagyon látványos navigációt tudunk készíteni. Lásd a Page Two-n lévő app bar-t a tetején.

A kódok elérhetőek a GitHub-ról.

Kíváncsi vagyok a véleményedre. Írd meg kommentben, ha tetszett, vagy valami javításra szorul.