Co to Flutter i dlaczego ma tak duży wpływ na tworzenie aplikacji | Mood Up team - software house

Postagens de blog - mudança de idioma

Gostaríamos de informar que as postagens do blog estão totalmente escritas em inglês .

Se você ainda deseja acessar esta página, clique em continuar.

Flutter in programming

Co to Flutter i dlaczego ma tak duży wpływ na tworzenie aplikacji

Czym jest Flutter?

Flutter to toolkit UI Google stworzony do budowania natywnych aplikacji dla urządzeń mobilnych, internetowych i desktopowych z wykorzystaniem jednej bazy kodu, a nie dwóch odrębnych. Został wydany 4 grudnia 2018 roku i od tego czasu stale się rozwija. Dziś ma ponad 2 miliony użytkowników, rosnąc z dnia na dzień.

Aby tworzyć aplikacje we Flutterze, musisz znać język programowania Dart. Jest on obiektowym językiem programowania, który ma na celu być tak szybki jak to tylko możliwe, na wszystkich platformach które wykorzystują kompilację AOT (ahead-of-time) z natywnym kodem maszynowym. W tym artykule przejdziemy przez podstawy Fluttera. Dowiesz się jakie są zalety jego używania oraz czym różni się od podobnych rozwiązań, takich jak React Native.

Flutter – podstawy

Widoki

Flutter używa deklaratywnego podejścia przy budowaniu widoków . Oznacza to, że opisujesz efekt, który chcesz osiągnąć. Na przykład, jeśli chcesz wyświetlić listę z tekstem , wskaźnikiem postępu i przyciskiem ,   umieszczasz to wszystko w widżecie kolumna. Nie ma potrzeby pisania dodatkowego kodu, który zajmowałby się renderowaniem elementów UI.

1_code (Column Widget)

Skutkuje to tym:
column animation

 

Widgety

To dobry moment, aby ustalić czym dokładnie są widgety. Są one podstawowym budulcem w świecie Fluttera. Widżet jest częścią interfejsu użytkownika. Może być zarówno widoczny, jak przyciski czy formularze, jak i niewidoczny, służący do definiowania struktury layoutu, jak kolumna, wiersz czy kontener. Wszystko polega na zagnieżdżaniu widżetów wewnątrz innych widżetów i budowaniu bardziej złożonych części UI.

Rodzaje widetów

Istnieją dwa rodzaje widżetów – stateless i stateful. Widżet stateless nie posiada swojego stanu – co oznacza, że jest niezmienny. Nie można go zmienić w czasie działania aplikacji. Widżet stateful, z drugiej strony, może posiadać stan i jest od niego zależny. Za każdym razem, gdy stan się zmienia, widżet jest przebudowywany z nową wartością.

Przyśpiesz pracę dzięki Flutterowi

Wbudowane widgety

Jedną z największych zalet Fluttera jest to, że oferuje on mnóstwo gotowych komponentów. Oznacza to, że nie trzeba się męczyć z mnóstwem kodu, aby coś wyglądało fajnie. Jeśli chcesz zaimplementować jakieś wymyślne, animowane rzeczy, takie jak składany pasek aplikacji, będziesz zaskoczony gdy odkryjesz, że istnieje widżet, który pozwoli Ci to zrobić za pomocą kilku linijek kodu.

Hot reload

Kolejną funkcją, która może przyspieszyć proces tworzenia aplikacji jest funkcja hot reload. Działa ona poprzez implementację zaktualizowanego kodu źródłowego bezpośrednio do działającej maszyny wirtualnej Dart. Innymi słowy, zmiany, które wprowadzasz, są stosowane podczas działania aplikacji. Koniec z przebudowywaniem całego projektu tylko po to, aby zobaczyć zaktualizowany tekst lub kolor!

Jedna baza kodu, wiele platform

Jak już wspomnieliśmy, Flutter polega na pisaniu jednej bazy kodu, która może być dostarczona na różne platformy. Obecnie obsługuje urządzenia mobilne (Android i iOS), webowe, desktopowe oraz wbudowane. Oznacza to, że możesz zbudować aplikację na dowolnej wybranej przez siebie platformie.

Pakety zewnęrzne

Nie ma sensu wymyślać koła na nowo. Jeśli pracujesz nad jakimś rozwiązaniem i masz wrażenie, że widziałeś już coś podobnego wcześniej, wejdź na https://pub.dev/ i sprawdź czy istnieje pakiet do tego rozwiązania. Można tam znaleźć odpowiedzi na różne problemy, z którymi wcześniej zetknęli się inni programiści. Potrzebujesz pracować z bazą danych SqlLite? Wystarczy pobrać pakiet sqllite, zaimportować go do swojego projektu i zacząć z niego korzystać. Nic prostszego.

Łączenie rozwiązań natywnych z Flutterem

Wyobraź sobie sytuację, w której potrzebujesz stworzyć customowy element. Nie ma do tego widgetu lub pakietu (mało prawdopodobne!) i aby to osiągnąć trzeba uruchomić jakiś natywny kod. Czy możliwe jest uruchomienie natywnego kodu Android lub iOS z poziomu Fluttera? Tak!

Nie jest to częste, ponieważ zazwyczaj istnieje wystarczające wsparcie na poziomie Fluttera. Ale jeśli z jakiegoś powodu musisz to zrobić, nie jest to żaden problem.

Używanie natywnego kodu

Flutter używa metod w stylu message-passing do komunikacji z natywnym API. Musisz utworzyć obiekt MethodChannel po stronie klienta (aplikacja Flutter). Następnie można ustawić handler dla wiadomości z tego kanału po stronie hosta (aplikacja natywna). Kanał ten pozwala klientom i hostom komunikować się między sobą.

Spójrzmy na przykład wzięty z życia. Wywołamy metodę Android MainActivity z Dart i otrzymamy wynik. Po pierwsze, musimy utworzyć MethodChanel po stronie Fluttera. Upewnij się, że ma on unikalną nazwę.

 

2_code MethodChanel - client side

Następnie tworzymy metodę w klasie MainActivity i ustawiamy handler dla naszego kanału MethodChannel:

3_code - host side

Teraz możemy wywołać naszą natywną metodę z poziomu Fluttera:

4_code - Calling a method on client side

Powyższy przykład obrazuje pracę dla systemu Android, ale metoda dla iOS jest bardzo podobna.

Wyświetlanie natywnego widoku

Czasami możesz chcieć użyć natywnego widoku w swojej aplikacji Fluttera – na przykład Google Maps systemu Android i iOS. Flutter zapewnia funkcję Platform Views. Używając jej, możesz stworzyć natywne widoki, korzystające z natywnego kodu. Następnie po prostu umieść je bezpośrednio w drzewie widżetów.

Tryby wyświetlania

Obecnie Flutter może renderować natywne widoki Androida za pomocą Hybrid Composition lub Virtual Display.

Z użyciem Hybrid Composition , natywny android.view.View zostanie dodany do hierarchii widoku, co oznacza pełne wsparcie dla dostępności czy obsługi klawiatury.

Z drugiej strony, w przypadku Virtual Display, widok natywny będzie renderowany po prostu jako tekstura i nie będzie częścią hierarchii widoku. Może to powodować pewne problemy z interakcjami, takimi jak obsługa klawiatury.

Jeśli chodzi o wydajność, jest kilka kompromisów. Ogólnie rzecz biorąc, Virtual Display jest bardziej wydajny, ale także bardziej ograniczony niż Hybrid Composition.

iOS używa tylko Hybrid Composition, więc natywny UIView jest dołączany do hierarchii widoku.

Czym Flutter różni się od podobnych rozwiązań, takich jak React Native

React Native i Flutter mają wspólny cel – pozwolić Ci dostarczyć aplikację na wiele platform przy użyciu jednej bazy kodu- ale różnica polega na tym, jak próbują to osiągnąć. Oto kilka podstawowych różnic:

Kompilacja

Dzięki Flutterowi aplikacja jest kompilowana z wyprzedzeniem (ahead-of-time) do natywnego kodu, co przekłada się na lepszą wydajność.

Z drugiej strony, React Native używa mostka JS jako pośrednika pomiędzy kodem natywnym a kodem JavaScript. Kod napisany w JavaScript musi być odpowiednio przetłumaczony na kod natywny – i vice versa. We Flutterze nie ma pośrednika.

Renderowanie

Sposób w jaki aplikacja jest renderowana na ekranie urządzenia mobilnego jest największą różnicą pomiędzy Flutterem a React Native.

React Native używa JS Bridge do tłumaczenia kodu JavaScript na kod natywny, co oznacza, że RN używa natywnych komponentów. Jeśli używasz elementu <Button>, JS Bridge przetłumaczy to na natywny przycisk specyficzny dla danej platformy. Ogólnie rzecz biorąc, React Native jest rodzajem wrappera natywnych komponentów Android/iOS.

Sposób rysowania aplikacji we Flutterze jest diametralnie inny. Zamiast używać natywnych komponentów, Flutter rysuje je na ekranie od podstaw, używając do tego Skia – bardzo wydajnej biblioteki graficznej 2D. Jest ona właścicielem i kontroluje każdy piksel na ekranie. Dzięki temu Flutter jest zazwyczaj bardziej wydajny od konkurencji.

Efekt może być pozytywny lub negatywny, w zależności od punktu widzenia. Ponieważ Flutter nie opiera się na natywnych komponentach i rysuje wszystko sam, aplikacja będzie wyglądała tak samo na każdej platformie i w każdej wersji OS! Twoja aplikacja we Flutterze powinna wyglądać i zachowywać się tak samo na Androidzie 5 i 12. Oznacza to również, że każdy komponent będzie działał identycznie. Natomiast w RN, sytuacja w której komponenty posiadają pewne atrybuty działające tylko na Androidzie lub iOS jest dość powszechna.

Na poniższych zrzutach ekranu możecie zobaczyć tę samą aplikację Flutter działającą na Androidzie 11 i Androidzie 4.1:

Android 11Android 4 app

 

Jak widać, aplikacja korzysta z Material Design, który powstał w 2014 roku. Android 4.1 został wydany 2 lata wcześniej, w 2012 roku – nie posiada więc natywnego wsparcia dla elementów Material Design. Flutter i tak sobie z tym poradzi, ponieważ sam renderuje każdy piksel.

Gotowe komponenty

Jako że React Native jest rodzajem wrappera natywnych elementów UI, dostarcza jedynie podstawowe komponenty. Z Flutterem masz dostęp do bogatego katalogu widgetów. Są to nie tylko proste elementy (jak przyciski), ale nawet bardziej rozbudowane struktury, jak animowane paski aplikacji, rozwijalne widoki i wiele innych. Jeśli chcesz dowiedzieć się więcej, przejrzyj katalog widgetów.

Podsumowanie

Flutter stał się dość popularny na przestrzeni lat. Pozwala tworzyć na różne platformy przy użyciu tej samej bazy kodu i zachować natywną wydajność. Mnóstwo wbudowanych widżetów czeka, aby pomóc Ci stworzyć idealne aplikacje.

Wszystkie te rzeczy sprawiają, że Flutter jest frameworkiem, którego po prostu nie można zignorować.

Jeżeli chcesz dowiedzieć się więcej, sprawdź oficjalną stronę Fluttera.

Have an idea for a web or mobile app, but don’t know where to start?
Let’s talk.