Flutter cross platform fejlesztés

2023. május 15.

A Flutter egy cross platform keretrendszer, ami egy alapvetően más megközelítést használ, mint a vetélytársai.

A Flutter egy cross platform keretrendszer, amit a Google készít. A következő platformokra tudunk vele fejleszteni: Android, iOS, Web, Windows, Linux, macOS, (Beágyazott rendszerek). Megvalósítását a Chrome-csapat kezdte, mint egy kísérletet, hogy mit tudnának elérni abban az esetben, ha nem lenne szükség visszafele kompatibilitásra. A Flutter egy alapvetően más megközelítést használ, mint a vetélytársai (React Native, Ionic):

• Nem használja a platformok beépített UI elemeit, hanem saját megjelenítő réteget biztosít.
• Csak a legmélyebb rétegeiben használja a platform API-kat. A natív kódot egyszerűen egy platform channel-n keresztül lehet elérni.
• Saját fejlesztő eszközöket használ, a platform natív eszközeire építve.

Cross platform fejlesztés előnyei:

• Közös fejlesztőcsapat több platformra.
• Közös kódbázis több platformra: kevesebb kód, kevesebb hiba, kevesebb idő.
• Közös tesztelési folyamat mindkét platformra. Azonos megoldások a felmerült problémákra.
• Amennyiben natív kódra is szükség van, a csapatban kevesebb natív fejlesztőre van szükség.

A Flutter előnyei a natív fejlesztésekkel szemben:

• Dart nyelv egy gyors, hatékony nyelv. Képes inkrementális fordításra, ami miatt a változtatásokat azonnal láthatjuk a futó alkalmazásban.
• Deklaratív UI keretrendszer, ami egyszerűvé teszi a felhasználói felület fejlesztését. A UI kódból van felépítve, nincs szükség semmilyen vizuális fejlesztői felületre.
• Felkapott technológia, ami egyre több fejlesztőt vonz.
• Forráskódja nyílt, megismerhető, annak működése megérthető, és ha szükséges, akkor egy-egy eleme újraimplementálható.

Cross platform fejlesztés korábbi nehézségei és miként változtatja ezt meg a Flutter:

1. A Cross platform alkalmazás lassabb, döcögősebb volt, mint egy natív alkalmazás

A Dart natív utasításokra fordul, nem egy köztes nyelvre, így a kód sebessége nagyon hasonló, mint a natív kódé. A Flutter beépül a natív alapokba és ott pontosan egy darab UI elemet hoz létre. Erre a UI elemre rajzolja az alkalmazást. Így a teljes natív platformot eléri, natív kódot ugyanúgy lehet írni, mintha natív alkalmazást írnánk. A UI elemre a rajzolást a Skia grafikus motor vezérli. Ez fut az Android és a Chrome alatt is. Az alkalmazás hasonlóan fut, mint egy játék, ezért a Flutter alkalmazások nagyon gyorsak, és nagyon sima a felhasználói élményük.

Renderelési sebesség Androidon. (a kisebb a gyorsabb)

Renderelési sebesség iOS-en. (a kisebb a gyorsabb)

2. A Cross platform alkalmazás nem néz ki natívnak

A Flutter nem használja a natív UI elemeket, hanem saját elemeket használ. Amit írunk, az minden platformon pixel pontosan ugyanúgy fog kinézni. Ez abból az igényből is adódik, hogy a fejlesztőcsapatok sokszor ugyanazt a look and feel-t szeretnék az alkalmazásaiknak. Emellett lehetőséget ad arra, hogy felismerjük, milyen platformon fut az alkalmazás és ez alapján pontosítsuk a felületet. A Flutter csapat a Google féle Material UI-t és az iOS natív UI elemeket is újraimplementálja. Hogy mikor melyiket használjuk, az üzleti döntés. A alap UI elemekre mind van adaptív változat, ami a platfomnak megfelelően néz ki és viselkedik (pl: túlscrollozás iOS-n, visszanavigáció ujjal iOS-n, további példák itt: https://docs.flutter.dev/resources/platform-adaptations).

3. A Cross platform fejlesztés nem támogatja a natív platformok újításait

Mivel a Flutter alkalmazás egy teljesen standard natív alkalmazás is egyben, ezért a fent említett platform channel-ön keresztül minden új API-t képes használni és hívni. Ha valamelyik platformon új API jelenik meg, akkor azt a Flutter is használni tudja. A natív API-k használatára az esetek nagy részében találunk open source package-t, de legrosszabb esetben is csak meg kell írnunk, mintha natívan fejlesztenénk.

Személyes tapasztalat

A mobilfejlesztést még az iOS 6 idején kezdtem, előtte Silverlight-tal foglalkoztam. Azóta dolgoztam iOS-szel (Tech lead), Androiddal (Senior fejlesztő), Angularral (Senior fejlesztő), Reacttal (Architect) és persze Flutterrel (Architect).

A Lucy alkalmazásunkat először Androidra adtuk ki, majd mikor eljött az iOS változat ideje is, akkor újraírtuk a felületet Flutterben. Az alsóbb rétegeit Kotlin/Native segítségével portoltuk. Egy-két funkciót, mint pl. a titkosítást natívan oldottuk meg. A Flutter - iOS - Kotlin/Native integrációt probléma nélkül meg lehetett oldani. A Flutter szabad kezet adott a designerünknek olyan problémákban is, amit előtte natívan nehéz és időigényes lett volna mindkét platformra megvalósítani. (pl: grafikonok, felhúzható alsó menü, amire reagál a felette lévő naptár nézet)
A Talk@Ease alkalmazás már első pillanattól kezdve Flutter alkalmazásnak indult. Az alkalmazás erősen épít a platform nyújtotta beszédfelismerő szolgáltatásokra és hanglejátszásra. A hátterét és a különleges animációkat, amiket a designer tervezett, hosszú és költséges lett volna kétszer lefejleszteni.

Személyes szakmai véleményem, hogy ha ma kellene egy kizárólag iOS-re vagy Android-ra megjelenő alkalmazást fejlesztenem, akkor is Flutterben csinálnám. A UI leíró képessége erősebb, mint a SwiftUI-é vagy az Android Compose-é. A fejlesztői környezete (azonnali változás gépelés közben) és az a lehetőség, hogy az alkalmazást bármikor el tudom indítani másik platformon (akár web vagy desktop is), ha megváltozna az üzleti igény, nekem elsőszámú választásommá teszi.
A Lucy-n épp emiatt dolgozunk azon, hogy eltávolítsuk a maradék nem Flutter kódot is, megnyitva az utat a webalkalmazás felé.

Gyurkovics Ferenc
Technikai vezető
Codingo