Dariusz Konieczko, Android Developer

Siedem powodów, dla których warto tworzyć aplikacje z użyciem Fluttera

POWRÓT

Minęły niecałe dwa lata od pojawienia się pierwszej stabilnej wersji Fluttera, a framework zdobył już ponad sto tysięcy gwiazdek w serwisie Github. Czym jest Flutter i co sprawiło, że w tak krótkim czasie pokochała go społeczność programistów z całego świata, a klienci z różnych branż coraz częściej decydują się na wykonanie aplikacji mobilnej właśnie w tej technologii? Poznajcie zalety platformy stworzonej przez Google.

Branża IT już od dawna jest jak bieg sprinterski na dystansie maratońskim. Kiedy już wydaje się nam, że osiągnęliśmy odpowiednio tempo, należy mocno przyspieszyć, żeby nie zostać w tyle i nie dać wyprzedzić się konkurencji. Musimy cały czas śledzić trendy, bo nigdy nie wiemy, kiedy na rynku pojawi się technologia, która właściwie zrewolucjonizuje naszą pracę.

Flutter ma coraz większy wpływ na branżę mobile i coraz więcej zwolenników wśród developerów.

Czym jest Flutter?

Flutter to zestaw narzędzi programistycznych (SDK) przeznaczonych do tworzenia wieloplatformowych aplikacji. Projekt rozwijany jest przez Google oraz niezależnych programistów. Obecnie Fluttera pozwala na programowanie aplikacji mobilnych na systemy Android oraz iOS. Co więcej, tej technologii towarzyszy tak dynamiczny rozwój, że już niebawem we Flutterze będziemy również tworzyć aplikacje internetowe i desktopowe. Jednak na razie te platformy wciąż znajdują się w fazie testów, dlatego my skupimy się na rozwiązaniach stricte związanych z naszymi smartfonami. Zobaczcie pozytywne strony pisania aplikacji w tej technologii z punktu widzenia programisty, które bezpośrednio przekładają się na szybkość, jakość oraz niższą cenę projektu.

Zalety tworzenia aplikacji we Flutterze

Wspólny kod, jedna składnia – wiele platform
Jedną z największych zalet Fluttera jest możliwość niemal całkowitego współdzielenia kodu. Piszemy jeden kod wspólny dla wszystkich platform, w dodatku używając jednego języka – Dart. Co ważne, dotyczy to całości aplikacji, włącznie z interfejsem użytkownika. Dzięki temu znacząco wzrasta tempo rozwoju projektu oraz szybkość reagowania na zmiany – programiści mogą skupić się na logice biznesowej, bez wnikania w specyfikę danej platformy. Ponieważ aplikacje flutterowe pisane są z wykorzystaniem tylko jednej składni, implementacja jest spójna i przejrzysta, a co za tym idzie prostsza do przetestowania oraz zrozumienia.

Szybka weryfikacja kodu
Funkcja „Hot reload” umożliwia podgląd zmian kodu niemal w czasie rzeczywistym i trzeba przyznać, że się sprawdza, a na przykład podobne rozwiązanie w natywnym Androidzie często zawodzi. Zmiany w kodzie możemy na bieżąco obserwować na symulatorze lub fizycznym urządzeniu. W przypadku najmniejszej wątpliwości, co do tego czy dany fragment kodu zadziała tak, jak tego oczekujemy, wciskamy odpowiednią kombinację klawiszy i po chwili widzimy efekty. Przydaje się to szczególnie wtedy, gdy chcemy przetestować widok w różnych konfiguracjach. Funkcja ta umożliwia także zastosowanie Fluttera jako narzędzia do prototypowania „na żywo”. To sprawdza się przede wszystkim na warsztatach z klientem czy też podczas konsultacji z grafikiem.

Warstwa UI niezależna od systemu
Na stronie głównej Fluttera widnieje duży napis wyjaśniający, do czego narzędzie zostało stworzone: „UI toolkit for building beautiful, natively compiled applications”. Rzeczywiście, autorzy włożyli dużo pracy, aby dostarczyć eleganckie i spójne elementy graficzne, które wyglądają tak samo, niezależnie od platformy czy aktualnej wersji systemu. W jaki sposób udało im się to osiągnąć? Po prostu Flutter, w odróżnieniu do konkurencji, nie używa natywnej implementacji kontrolek UI. Zamiast tego korzysta z własnych komponentów i niezależnego silnika renderującego. Komponenty te w dużej mierze opierają się na ogólnie przyjętym w ekosystemie Google stylu projektowania Material Design.

Warto wspomnieć, że do zaprojektowania eleganckiego interfejsu nie ma potrzeby dołączania ani jednej zewnętrznej biblioteki. W standardzie znajdziemy niemal wszystko, czego potrzeba w Material Design. Dobrą wiadomością jest to, że dla wybranych komponentów (obecnie jest ich 26) istnieje możliwość użycia stylu Cupertino, znanego z systemu iOS. Na przykład na Androidzie możemy wyświetlać okienko dialogowe w stylu Material, a na iOS w stylu Cupertino.

Królestwo widgetów
Na szczególne wyróżnienie we Flutterze zasługuje koncepcja Widgetu. To cegiełki tworzące interfejs użytkownika. Widgetem najczęściej jest widok czy kontrolka graficzna, ale są też takie służące np. do wykrywania gestów lub pozycjonowania podrzędnych widgetów. Dochodzimy do tego, że praktycznie wszystko, co związane z warstwą graficzną aplikacji jest widgetem. Na pierwszy rzut oka może wydawać się to dziwnym rozwiązaniem, jednak już po kilku chwilach majsterkowania w kodzie dostrzeżemy sens i nieograniczone możliwości takiego podejścia. Widgety możemy ze sobą łączyć w większe elementy niczym klocki. Twórcy tak zaprojektowali standardowe kontrolki UI, aby możliwości ich dostosowania poprzez kompozycję były jak największe.

Widgety na dwóch platformach – iOS i Android. (screen – źródło: https://flutter.dev/)

Weźmy np. widget reprezentujący przycisk. We Flutterze jego zawartość nie jest zdefiniowana tekstem, jak ma to miejsce choćby w natywnym Androidzie, ale ogólną właściwością “child”, czyli dowolnym innym widgetem. Oznacza to, że w standardowym przycisku możemy umieścić cokolwiek, a nie tylko napis. W większości przypadków znika zatem potrzeba implementowania od podstaw własnych kontrolek interfejsu po to, żeby zrealizować najbardziej wyszukane pomysły klienta. Tego nie da się przecenić. Oszczędność czasu i zbędnego stresu programisty jest ogromna.

Do wyboru mamy naprawdę sporą liczbę standardowych widgetów, z których większość jest wzorowo udokumentowana. Na stronach z dokumentacją znajdziemy ponadto interaktywne przykłady implementacji, a czasem także instruktażowe filmy wideo. Z racji swobody komponowania, na początek wystarczy zapoznać się jedynie z kilkoma widgetami, by za ich pomocą stworzyć widok dostosowany do naszych potrzeb. Przygotowane przez nas komponenty z łatwością przetestujemy korzystając ze standardowego pakietu “flutter_test”. Co ważne, z racji, że warstwa graficzna Fluttera jest odizolowana od natywnej platformy, do uruchamiania testów UI nie jest potrzebne docelowe urządzenie ani symulator.

Wydajność zbliżona do natywnej
Aplikacje napisane we Flutterze kompilują się do kodu natywnego, co z dużą korzyścią przekłada się na szybkość ich funkcjonowania. Ponadto silnik graficzny dąży do działania z szybkością 60 klatek na sekundę, a jeśli pozwala na to urządzenie, Flutter może utrzymywać nawet 120 fps. Do dyspozycji programistów są także narzędzia przeznaczone do diagnozowania ewentualnych spadków wydajności. Pod tym względem naprawdę nie ma się czego obawiać.

Środowisko pracy i narzędzia
Do wyboru programistów są dwa oficjalnie wspierane środowiska pracy: Android Studio oraz Visual Studio Code. Oba bardzo dobrze się sprawdzają w codziennej pracy, umożliwiając korzystanie z predefiniowanych skrótów klawiaturowych dedykowanych dla Fluttera. W ramach zestawu DevTools znajdziemy genialne narzędzie o nazwie „Flutter inspector” służące do analizy i debugowania interfejsu użytkownika. Umożliwia m.in. analizę hierarchii widoków, wyświetlanie ramki wokół kontrolek UI celem weryfikacji ich rozmiaru i pozycji, a nawet wyszukiwanie kontrolki w kodzie poprzez kliknięcie w nią podczas działania aplikacji. Nie zabrakło też narzędzi do: analizy pamięci, CPU, ruchu sieciowego albo badania rozmiaru aplikacji.

Flutter i Netizens

My także mamy już pierwsze namacalne efekty pracy z Flutterem. Na dzień dobry zajęliśmy się naszą istniejącą aplikacją dla produktu IoT – GoodieBoxa. To system motywacyjny dla firm umożliwiający pracownikom – poprzez aplikację – wzajemne przyznawanie wirtualnych punktów, które z kolei można wymienić na nagrody z maszyny vendingowej. Apkę napisaliśmy od podstaw, wprowadzając jednocześnie poprawki graficzne i kilka nowych funkcji. Ponieważ aplikacja wykorzystuje styl Material Design, a także oferuje różne wersje kolorystyczne oraz ikony dostosowane do klienta, Flutter ze swoją GUI-centryczną architekturą okazał się strzałem w dziesiątkę. Aplikacja nie tylko dobrze wygląda, ale od początku działa niezawodnie. Od momentu publikacji nowej wersji, nie odnotowaliśmy ani jednej awarii.

Kolejne raz Fluttera wykorzystaliśmy podczas współpracy z firmą BPSC. Efektem naszych działań jest aplikacja Ekrany Startowe – mobilne narzędzie do zarządzania firmą produkcyjną. Apka pobiera dane i korzysta z autorskiej platformy Impuls EVO (system ERP od BPSC), umożliwiając na smartfonie szybki przegląd najważniejszych wskaźników w firmie. Rozwiązanie kładzie duży nacisk na intuicyjność obsługi i przejrzysty interfejs. Więcej informacji znajdziecie w materiale wideo.

Aplikacja dla BPSC została  napisana we Flutterze.

Udane wdrożenia i pozytywne opinie klientów zachęciły nas do zastosowania Fluttera także bezpośrednio w Netizens. Rozpoczęliśmy przepisywanie naszej wewnętrznej aplikacji, pierwotnie napisanej natywnie. Apka jest rozszerzoną wersją GoodieBoxa. Oprócz mechanizmu przyznawania punktów zawiera dane i kontakty do pracowników, kalendarz wydarzeń czy najnowsze informacje z życia firmy pobrane z intranetu. Flutter ma zagwarantować sprawniejszy rozwój aplikacji.

Flutter, a może React-Native?

Pisząc o Flutterze nie sposób nie wspomnieć o jego największym konkurencie – jeśli chodzi o aplikacje wieloplatformowe – React Native. W licznych artykułach na temat Fluttera znajdziemy masę porównań oraz prób odpowiedzi na pytanie: która technologia jest lepsza?  React jest niewątpliwie dojrzalszym narzędziem. Zadebiutował na rynku w 2015 roku. Obecnie jego przewagę na pewno stanowi duża społeczność oraz liczba dostępnych bibliotek. Niewątpliwie obie platformy mają swoje mocne i słabe strony, ale każda z nich gwarantuje wykonanie solidnej aplikacji.

Jest natomiast coś, co może w przyszłości przechylić szalę na korzyść Fluttera i jednocześnie siódmy powód z naszej tytułowej wyliczanki. To system operacyjny Fuchsia. Tworzony od kilku lat przez Google, który wykorzystuje Fluttera w warstwie interfejsu użytkownika. W sieci już krążą wieści, że ten system miałby w przyszłości zastąpić Androida, eliminując tym samym jego największe wady. Co istotne, miałby też wspierać istniejące aplikacje androidowe. W tym roku pojawiła się informacja, że gigant z Mountain View rozpoczął uzyskiwanie certyfikatów Bluetooth dla nowego systemu, co może oznaczać, że wszystko powoli ku temu zmierza.

Nowa jakość na rynku aplikacji

Mając tak wygodne narzędzia jak Flutter czy React Native, które znacznie optymalizują pracę, może nasuwać się pytanie, czy potrzebujemy jeszcze aplikacji natywnych? Obecnie podejście natywne wciąż może okazać się lepsze, a czasem niezbędne. Tak jest choćby w przypadku aplikacji, które w dużym stopniu korzystają ze specyficznych funkcji systemowych, np. działanie w tle.

Obecnie Flutter i React Native to wiodące technologie w Netizens.

Niewątpliwie Flutter wniósł wartość dodaną i sporo ożywienia na rynek mobile. Nie musimy angażować dwóch zespołów programistów do napisania dwóch różnych kodów. Początkujący developer stworzy w nim swoją pierwszą aplikację, nie napotykając aż tylu „niespodzianek”, co podczas prac przy wersji jednoplatformowej. Natomiast profesjonaliści zaoferują klientom niezawodny i nienagannie wyglądający produkt w czasie znacznie krótszym oraz w niższej cenie, niż byłoby to możliwe przy podejściu natywnym.

Szukasz wykonawcy aplikacji mobilnej, który zrealizuje dla Ciebie cały projekt? Napisz na nb@netizens.pl. Odpowiemy na wszystkie pytania i przygotujemy spersonalizowaną ofertę.

Poznaj nas lepiej i odwiedź nasze profile w mediach społecznościowych –FacebookLinkedin i Instagram, a także sprawdź netizens.pl.

Autor: Dariusz Konieczko, współpraca: Adrian Leks.





BLOG

Przeczytaj inne artykuły

KONTAKT

Skontaktuj się z nami

Zapoznaj się z naszą Polityką prywatności, w której informujemy o celu używania przez nas plików cookies, ich rodzajach, sposobach ich wykorzystania i usuwania. Jeśli klikniesz ZGODA – zgadzasz się na instalację plików cookies w Twoim urządzeniu.

WIĘCEJ