Biblioteki Flutter: UI (Design) - nowy wymiar projektowania - Vol 1

Na przestrzeni ostatnich kilku lat Flutter stał się popularnym narzędziem. Bogaty zestaw narzędzi, intuicyjny interfejs i rozbudowana sieć funkcjonalności sprawiają, że Flutter jest powszechnie uznawany za profesjonalną aplikację wykorzystywaną przez wiele software house'ów. Jaką zasługę w sukcesie projektowym Fluttera mają jego wszechstronne biblioteki?

Ten artykuł jest częścią serii poświęconej narzędziu Flutter. Poniżej możesz zapoznać się z pozostałymi artykułami dotyczącymi tego zagadnienia.

• Flutter programowanie
• Funkcje i pakiety Firebase

Flutter Design - wybierz najbardziej pomocne biblioteki

Wiele aplikacji mobilnych tworzonych przez nasz software house wykorzystuje Flutter UI. Lata aktualizacji uczyniły z Fluttera zaufane narzędzie, które spełnia oczekiwania jako uznana platforma deweloperska. Wraz z wprowadzeniem solid null safety i najnowszych ulepszeń w wersji 2.0 Flutter, ufamy temu narzędziu w jeszcze większym stopniu. Tak więc, jakie są nasze ulubione i najczęściej używane wtyczki i pakiety Flutter UI? 

Flutter UI - narzędzia ekranowe

Tworzenie aplikacji dla różnych rozmiarów ekranu w oparciu o jeden projekt może wydawać się wyzwaniem. Różne współczynniki proporcji i gęstości pikseli sprawiają, że tworzenie GUI jest trudniejsze niż można się spodziewać. 

Flutter UI i wtyczka ScreenUtils

Aby stworzyć UI dla różnych urządzeń mobilnych, używamy wtyczki Flutter ScreenUtils. Wtyczka Flutter ScreenUtils to pakiet do dostosowywania rozmiarów ekranu i czcionek. Służy ona do tworzenia projektu UI responsywnego dla wielu urządzeń.

 Aby użyć tej wtyczki, dodaj ją i zainicjuj przed widżetem MaterialApp. Podaj rozmiar projektu - i już, jesteś gotów do jej użycia! Za każdym razem, gdy chcesz adaptować widżet do danej wysokości lub szerokości, użyj przyrostka .h (skrót od ang. “heigh”) lub .w (skrót od ang. “width”).

Ta wtyczka gwarantuje, że Twoja aplikacja jest odpowiednia dla każdego rozmiaru ekranu. Ten aspekt jest szczególnie istotny, ponieważ Flutter jest narzędziem zaprojektowanym do tworzenia aplikacji cross-platformowych. Wtyczka ScreenUtils sprawia, że rozwój Flutter UI w przypadku takich aplikacji jest znacznie płynniejszy, a co za tym idzie, sprawniejszy.

Najnowszą wersję tej wtyczki można znaleźć na stronie pub.dev.

Automatyczne dostosowywanie rozmiaru tekstu

Poprzednia wtyczka pomogła dostosować segmenty projektu na różnych rozmiarach ekranu. Musimy jednak również dopasować treść wewnątrz widżetów. Do tego posłuży nam kolejna wtyczka - AutoSizeText.

Flutter design dla contentu - AutoSizeText

AutoSizeText pozwala nam wypełnić dostępną przestrzeń tekstem o docelowym rozmiarze. Aby pokonać ograniczenia wbudowanego widżetu Text, używamy AutoSizeText. Ten segment Flutter UI umożliwia nam kształtowanie tekstu w podanej przestrzeni, w określonej liczbie linii.

Wtyczkę tę można znaleźć w poniższym linku.

Uatrakcyjnij wygląd swojej aplikacji

Tekst i ikony aplikacji stanowią część UI pozwalającą na sprawniejszą nawigację w obrębie interface’u. Jednak podstawowe zestawy mogą okazać się nudne i nieatrakcyjne. Dlatego też, aby uatrakcyjnić interfejs użytkownika, użyj niestandardowych czcionek i ikon! Odpowiednio wykorzystane, sprawią, że Twój nowy projekt będzie ciekawszy wizualnie - niezależnie od typu urządzenia.

Flutter UI - Google Fonts

Projekt może potrzebować różnorodnych czcionek, aby wyglądał bardziej intuicyjnie. Niektóre biblioteki oferują do wyboru pełen wachlarz czcionek. Niemniej, jeśli szukasz darmowej bazy z paletą popularnych , estetycznych czcionek, istnieje doskonałe rozwiązanie skrojone na miarę Twoich potrzeb.

Google Fonts to wtyczka, która zawiera wiele darmowych czcionek. Połącz różne style, aby stworzyć unikalne i atrakcyjne wizualnie aplikacje. 

Jeśli chcesz sprawdzić tę wtyczkę, odwiedź stronę Google Fonts i dowiedz się o niej więcej.

Flutter UI - pakiety ikon

Ikony stanowią ważną część każdego projektu UI. Mogą one przekazywać wiele znaczeń, reprezentować główną ideę stojącą za projektem, wyrażać intencję Twojego produktu lub sugerować użytkownikowi podjęcie pożądanej przez Ciebie akcji. Ikony umożliwiają nam oszczędność miejsca i sprawiają, że layout UI jest bardziej minimalistyczny, tym samym wpływając na estetykę Twojego projektu.

Ikony Flutter UI - Font Awesome

W ramach Fluttera znajdziemy wbudowany pakiet ikon. Jeśli okaże się on niewystarczający, istnieją inne rozwiązania tego problemu, które nie obciążą Twojego portfela. 

Wtyczka Font Awesome zawiera 7864 ikon, w tym logotypami wielu firm, takich jak Facebook czy Instagram. Jeśli szukasz edytowalnych próbek graficznych, możesz skorzystać z darmowej wersji. Współpracujące zespoły projektowe mogą jednak wybrać opcje płatne, zawierające więcej przydatnych funkcji. 

Chcesz sprawdzić, jak to wygląda w praktyce? Zobacz ofertę Font Awesome na ich stronie internetowej.

Flutter design - aplikacje z animacją

Aplikacje możesz uatrakcyjnić również poprzez dodanie angażujących animacji. Użytkownik zwraca uwage na wizulane aspekty aplikacji. Ich jakosc czesto decyduje o tym, czy uda ci sie utrzymac uwage i zainteresowanie uzytkowika. Dlatego też sprawienie, ze aplikacja bedzie wizualnie atrakcyjna jest dla ciebie korzystne, bo przelozy sie na lepsze doswiadczenia uzytkownika

Animacje w UI - proste animacje

Prosta animacja nie wymaga wiele pracy w porównaniu do jej bardziej złożonych odpowiedników. Mimo to doskonale spełniają swoją rolę jako komponent wizualny, czyniąc projekt Flutter UI bardziej atrakcyjnym i intuicyjnym. 

Dla prostych animacji, zwykle używamy wtyczek animations lub simple_animations. Implementują one czyste i płynne przejścia dla widżetów, w tym fade, transform, lub tween. Te dodatki mogą wpłynąć na to, jak użytkownicy postrzegają Twój produkt. 

Złożone animacje - przydatne narzędzia

Z drugiej strony, bardziej złożone animacje wymagają zaangażowania projektanta. Flutter jest świetnym narzędziem do tworzenia animacji, jednak niektóre z nich wymagają zewnętrznego sposobu implementacji. Flutter wspiera kilka takich rozwiązań. Jednym z nich jest Rive - interaktywne narzędzie do projektowania w czasie rzeczywistym, które pozwala na projektowanie, animowanie i integrowanie zasobów w aplikacji.

Zasoby te mogą obejmować:

• animowane emotikony,
• animowane "hero moments",
• animowane postacie dla stron internetowych, aplikacji i gier mobilnych,
• animowane elementy UI, takie jak ikony czy grafiki edukacyjne.

Zajrzyj na stronę Rive i zdobądź więcej informacji na temat tego narzędzia.

Wtyczki, o których warto pamiętać

Na estetyczny Flutter design sklada sie wiele wtyczek. Powyżej opisalismy te, z ktorych korzystamy najczęściej. Zdarzaja sie jednak projekty, ktore wymagaja zaimplementowania dodatkowych funkcjonalnosci

Szukamy istniejących implementacji i wykorzystujemy je, aby skrócić czas tworzenia aplikacji. Oto kilka ciekawych przykładów wtyczek użytych w naszych projektach Sleek Circular Slider, Dots Indicator i Staggered Grid View.

Sleek Circular Slider

Sleek Circular Slider to pakiet, który zawiera okrągły pasek postępu. Może on przedstawiać określony etap progresu jakiejś aktywności, np. 

• lat doświadczenia, 
• postępu w czasie, 
• spinner aktywności. 

Cenimy Sleek Circular Slider za jego uniwersalność i łatwość użytkowania. Jest wysoce konfigurowalny, co pozwala nam wykorzystać go na wiele sposobów.

Aby wypróbować tę wtyczkę, sprawdź ją na tej stronie.

Dots Indicator

Dots Indicator to plugin do prezentowania aktualnej pozycji użytkownika na stronie internetowej. Może to dotyczyć podstrony, paska stanu lub liczby stron dostępnych do przeglądania. Dots Indicator to cenny atut w zestawie narzędzi projektanta UI, dzięki któremu możemy sprawnie nawigować użytkowników aplikacji po interfejsie.

Zapoznaj się z tą przydatną wtyczką tutaj.

Staggered Grid View

Ten plugin składa się z kolekcji gridowych układów Fluttera. Jest to szczególnie przydatne, gdy Twoja aplikacja wykorzystuje mnóstwo segmentów, które chcesz przedstawić w spójny i przyciągający wzrok sposób. Mówiąc prościej, staggered gridview to zestaw niejednolitych kolumn używanych dla różnej wielkości obrazów umieszczonych w jednym rzędzie. Ta wtyczka jest w pełni konfigurowalna, co czyni ją narzędziem, które można skutecznie wykorzystać w wielu projektach.

Poznaj tę dogodną wtyczkę z witryny internetowej dostępnej tutaj.

Flutter Design - UI, które sprawia, że aplikacje dają czadu!

W tym poście omówiliśmy wtyczki wspierające nasz rozwój UI. Sprawdź następną część i zobacz, jakich pakietów używamy w projektach do realizacji logiki biznesowej.

Jeżeli interesuje Cię projektowanie UX/UI, sprawdź również artykuł Psychologia kolorów w UX i UI 

Tworzenie aplikacji wieloplatformowych Flutter to nasz chleb powszedni. Zobacz, jakie korzyści może Ci to przynieść!