Responsywna aplikacja Flutter - jak zrealizować?

Dzisiejsze wymagania rynku sprawiły, że nowoczesne aplikacje muszą charakteryzować się responsywnością - umiejętnością dostosowania swojego interfejsu do wymiarów urządzenia. Na szczególną uwagę zasługuje responsywność w aplikacjach mobilnych,  ponieważ z tych urządzeń korzysta coraz większa liczba użytkowników. Najnowsza wersja Fluttera pozwala na sprawne wprowadzanie ustawień, które sprawią, że Twoja aplikacja będzie dobrze wyglądać na praktycznie każdym urządzeniu. 

Responsywność aplikacji mobilnych - Flutter

Wraz z wersją 2.0 Fluttera - zapowiadającą możliwą kompatybilność aplikacji z urządzeniami mobilnymi, tabletowymi, internetowymi, smartwatchami, a nawet wyświetlaczami samochodowymi - konieczne jest zrozumienie niesamowitej mocy aplikacji responsywnych. Ale co to właściwie znaczy?

Aby aplikacja była responsywna, jej kod musi reagować na różne zmiany układu. Jej UI powinno zachowywać się zgodnie z kształtem i wielkością urządzenia, które wyświetla Twoją aplikację.

Flutter to framework, który skupia się na tworzeniu znakomicie wyglądających aplikacji na danym urządzeniu.  Może to jednak stanowić wyzwanie ze względu na responsywność. Wymaga ono wdrożenia równolegle do wszystkich ekranów o różnych szerokościach i wysokościach. Na szczęście zespół i społeczność Flutter opracowała kilka rozwiązań, aby przyspieszyć ten proces.

Jak Flutter poprawił responsywność aplikacji mobilnych?

Aplikacja responsywna to cel, który można zrealizować przy użyciu różnych technologii. Istnieją znaczące różnice w obsłudze responsywności na platformach Android i iOs.  Skupmy się teraz na tym - aby zrozumieć ich istotę i to jak Flutter rządzi responsywnością aplikacji mobilnych.

Aplikacja responsywna - Android 

W przypadku Androida wyświetlanie wielu widoków UI na ekranie jest możliwe dzięki Fragmentom. Możemy je zdefiniować jako komponenty wielokrotnego użytku, które można uruchomić wewnątrz aktywności aplikacji. 

Jest też pewna zasada, o której warto pamiętać. W ramach jednej aktywności można uruchomić kilka Fragmentów. Nie można jednak uruchomić wielu aktywności jednocześnie w obrębie jednej aplikacji.

Responsywność w aplikacjach mobilnych - iOS

W systemie iOS podobną rolę odgrywa UISplitViewController. Zarządza on kontrolerami "child" widoku w obrębie interfejsu. W rezultacie, mamy możliwość sterowania wieloma kontrolerami widoku.

Responsywność w aplikacjach mobilnych Flutter - podstawy

Istnieją dwa podstawowe podejścia do tworzenia responsywnych aplikacji Flutter. Prześledźmy teraz ten temat, aby uchwycić podstawowe rozeznanie w tym procesie.

Aplikacja Flutter - MediaQuery.of()

MediaQuery to zrównoważona metoda pozwalająca uzyskać informacje o rozmiarze urządzenia, a także preferencjach użytkownika końcowego. Wykorzystujemy ją do zaprojektowania układu aplikacji według obu tych aspektów - tak, aby projekt spełniał wymagania i doprowadził do responsywności aplikacji na różnych urządzeniach.

Metoda ta odpowiada za podanie rozmiaru ekranu, jego orientacji itp. Krótko mówiąc, MediaQuery.of przebudowuje aplikację za każdym razem, gdy użytkownik zmienia rozmiar ekranu, pozwalając, by wyświetlacz działał odpowiednio do ustawionych preferencji. Warto go używać, gdy trzeba pracować nad całym kontekstem aplikacji. Metoda ta nie obejmuje rozmiaru konkretnego widżetu.

Aplikacja Flutter - LayoutBuilder

Zapoznajmy się teraz z kolejną klasą, z której zastosowania skorzysta każda responsywna aplikacja Flutter. LayoutBuilder ułatwia tworzenie drzewa widgetów w zależności od rozmiaru pierwotnego obiektu.

Z klasy tej korzystamy, aby: 

• dowiedzieć się, jak duży ma być Twój widget, 
• zdecydować, jak będziesz go wyświetlać w zależności od jego rozmiaru.

LayoutBuilder wykorzystuje dwa główne parametry, czyli:

• BuildContext,
• BoxConstraint.

Oba typy mają różne zastosowania. Uważamy, że BoxConstraint jest ważniejszy z tych dwóch, ponieważ określa szerokość do widgetu rodzica. To służy do konstytuowania parametru "child" zgodnie z rozmiarem parenta - podczas gdy, BuildContext po prostu odnosi się do konkretnego widgetu. 

Główną różnicą między Media Query a Layout Builder jest to, że ten pierwszy wykorzystuje pełny kontekst projektowanego ekranu. W przeciwieństwie do niego, Layout Builder może zdefiniować maksymalne wymiary każdego widgetu. Obie metody stosujemy zawsze, gdy chcemy zapewnić optymalną responsywność aplikacji mobilnych.

Sprawdź również artykuł: Flutter - ciągły rozwój i udoskonalenia

 

Responsywna aplikacja Flutter - zaawansowane opcje

Zarówno MediaQuery, jak i LayoutBuilder znacząco pomagają w tworzeniu responsywnego projektu aplikacji. Jest jednak więcej opcji dotyczących responsywności, o których warto wspomnieć. Rzućmy teraz na nie okiem.

AspectRatio

Ten luźno dopasowany widget skaluje element "child" do określonego stosunku szerokości do wysokości. Dzięki temu zachowuje on podobną przestrzeń nawet na różnych rozmiarach ekranu.

Porozmawiajmy teraz trochę o tym widżecie. Po pierwsze, sprawdza on największą szerokość w ramach zdefiniowanych ograniczeń układu. Wysokość widżetu stanowi podany współczynnik proporcji do szerokości, który jest współzależny jako stosunek szerokości do wysokości.

CustomSingleChildLayout

Ten widżet określa układ elementu "child" przy pomocy delegata. Jest to specjalna klasa, która używa funkcji takich jak shouldRelayout() lub getSize() do pozycjonowania i zmiany rozmiaru widżetu dziecka. Określa ona właściwy rozmiar rodzica i ograniczenia, aby pozycjonować segment "child". 

Należy jednak pamiętać, że jego rozmiar nie może definiować rozmiaru parenta. Zachowanie hierarchii widżetów dla tego rozwiązania jest niezbędne.

CustomMultiChildLayout 

Ten widżet jest bardziej złożoną wersją swojego poprzednika - CustomSingleChildLayout. Pobiera delegata odpowiedzialnego za całe magiczne pozycjonowanie i rozmiar oraz listę elementów "child", które mają być pozycjonowane. Określa również ograniczenia dla wszystkich segmentów i ich wzajemnej relacji. 

Zespół Google zaleca używanie CustomSingleChildLayout lub Stack w prostych przypadkach, ponieważ brakuje im złożoności tego widżetu.

OrientationBuilder

Zdarza się, że podczas obracania ekranu przez użytkownika, wygląd aplikacji może ulec zniekształceniu. Proporcje pomiędzy trybami poziomym i pionowym znacznie się różnią. Nie oznacza to jednak, że w takim przypadku nasza aplikacja musi wyglądać źle! 

Z pomocą przychodzi nam Orientation Builder. Klasa ta buduje drzewo widżetów, które zależy tylko od orientacji parenta.

FractionallySizedBox 

Ten widget dopasowuje rozmiar elementu child na podstawie określonego ułamka wyświetlacza, z którym jest dostarczany.

FittedBox 

Ten widget jest wykorzystywany wyłącznie do boxów, ponieważ dopasowuje element do swojego rodzica na podstawie zadanych ograniczeń. Dzięki temu dopasowanie obrazów czy filmów nie jest już problematyczne i nie wymaga ręcznego obliczania dokładnej szerokości i wysokości widgetu-dziecka.

Responsywna aplikacja Flutter - sieć społecznościowa

Jest też inna opcja, aby Twoja aplikacja responsywna była pozbawiona zbędnego kodu i widżetów, które mogą zajmować wiele linijek. Rozbudowana społeczność Fluttera stworzyła kilka pakietów, które mają za zadanie pomóc nam w rozwiązaniu tego problemu. Co więcej, przydają się one podczas utrzymywania naszego kodu w spójnym porządku. 

Jedynym minusem jest to, że te rozwiązania są mniej elastyczne i konfigurowalne, przez co nie nadają się do każdego problemu z responsywnością. Niemniej, warto zasięgnąć wiedzy zgromadzonej przez pasjonatów tematu - w ten sposób możemy znaleźć optymalne rozwiązania, z których skorzysta nasza aplikacja. Flutter zgromadził wokół siebie wyjątkowo aktywną społeczność, dlatego też polecamy zasięgnąć rady innych użytkowników tego frameworku.

Dostosowywana aplikacja mobilna - Responsive Framework

Głównym hasłem tej wtyczki jest "Responsiveness made simple". Z pewnością zapewnia ona dokładnie to, co obiecano! Responsive Framework automatyzuje proces skalowania i zmiany rozmiaru, aby Twój układ UI był schludny i czysty, a aplikacja responsywna - bez względu na to, na jakim urządzeniu się znajduje. 

Wtyczka ta wymaga ustawienia punktów przełamania (ang. breaking points), aby była w stanie zidentyfikować, gdzie ma przeprowadzić zamierzoną modyfikację. Przy każdym punkcie przełamania możesz wybrać, czy chcesz zmienić rozmiar lub autoskalować swój interfejs aplikacji - dając Ci większą kontrolę nad swoim projektem.

Sprawdź tę wtyczkę tutaj: https://pub.dev/packages/responsive_framework

Responsywna aplikacja - Flutter ScreenUtils

Ta wtyczka pozwala dostosować rozmiar ekranu i czcionki, automatycznie dopasowując go do różnych urządzeń. Wystarczy, że dostarczysz mu domyślny rozmiar ekranu, na którym pracowałeś, a następnie dodasz właściwości .w (oznacza szerokość) i .h (oznacza wysokość) do każdego wymiaru używanego w aplikacji. Ta prosta sztuczka to gwarancja, że w Twoich rękach pozostanie aplikacja responsywna - niezależnie od rozmiaru urządzenia.

Przetestuj tę wtyczkę i pobierz ją z tej strony: https://pub.dev/packages/flutter_screenutil

Aplikacja responsywna Flutter - gotowi, by ją stworzyć?

Wszystkie dostarczone rozwiązania sprawiają, że nasza codzienna praca z Flutterem jest wygodnai  szybka. Ten framework pozwala na wdrożenie odpowiednich rozwiązań, które zapewniają responsywność aplikacji mobilnych - niezależnie od urządzenia, na którym jest zainstalowana. 

Chcesz dowiedzieć się więcej o Flutterze? Sprawdź nasze wpisy na blogu dotyczące tej niesamowitej platformy. 

• Biblioteki Flutter Programowanie,
• Flutter Design,
• Funkcje Firebase.

Tworzenie aplikacji wieloplatformowych Flutter jest naszym chlebem powszednim. Dowiedz się, w jaki sposób możesz z nami wesprzeć swój biznes!