Dzięki wsparciu Google i coraz liczniejszego środowiska developerów Flutter wciąż utrzymuje się w ścisłej czołówce najpopularniejszych frameworków do tworzenia wieloplatformowych aplikacji mobilnych oraz webowych. Jako, że wszystkie zaprojektowane we Flutterze aplikacje bazują na Dart, w przygotowanym poniżej poradniku będziemy wielokrotnie posiłkować się fragmentami kodu w tym właśnie języku. Jak poprawić wygląd i intuicyjność aplikacji we Flutter? Jakie widgety mogą to ułatwić? Dlaczego warto korzystać z klas takich jak TextFields i Material Color? Starając się odpowiedzieć na wszystkie te pytania, przygotowaliśmy listę 10 praktycznych tricków i porad dotyczących Fluttera.
1. Zawsze definiuj metodę main()
Wszystkie skrypty i programy w Dart oraz aplikacje we Flutter muszą posiadać zdefiniowaną metodę main(). Jeśli nie będzie ona zdefiniowana w kodzie, to pierwsze błędy pojawią się już na etapie kompilacji. W naszym przykładzie program wyświetli po kolei indeksy wraz z wartościami, które zostały przypisane w zmiennej cities w metodzie main().
void main() {
var cities = ['Częstochowa', 'Warszawa', 'Katowice'];
cities.forEach((item) {
print('${cities.indexOf(item)}: $item');
});
}
2. Przy pomocy klasy Material Color możesz stworzyć dowolną paletę barw
Dopasowana i dopracowana estetycznie paleta kolorów polepsza UX (User Experience) i UI (User Interface). Przy pomocy właściwości takich jak shade50, shade100, shade200, shade300, shade400, shade500, shade600, shade700, shade800 i shade900 można odwołać się do 10 odcieni dowolnej palety barw. W trakcie tworzenia własnego obiektu klasy Material Color należy pamiętać, iż środkowy odcień mapy (tzn. shade500 lub wartość indeksu 500) musi być zgodny z kolorem, który zostanie zadeklarowany podczas wywoływania domyślnego konstruktora.
3. Spersonalizuj wygląd kursora w polach tekstowych klasy TextFields
Zbyt duży lub po prostu niewidoczny na tle pola tekstowego kursor może zasłaniać użytkownikowi aplikacji istotne informacje. W poniższym przykładzie ustawiliśmy kolor kursora na niebieski oraz zmieniliśmy nieco jego promień i szerokość.
TextField(
cursorColor: Colors.Blue,
cursorRadius: Radius.circular(7.0),
cursorWidth: 7.0,
) ;
4. Do pól tekstowych klasy TextFields warto dodawać ikony i etykiety z podpowiedziami
Dzięki intuicyjnym ikonom użytkownicy aplikacji mogą szybko domyślić się, jak należy je prawidłowo wykorzystywać. W klasie TextFields ustawić to można w kluczu InputDecoration poprzez właściwości takie jak “icon”, “prefixIcon” oraz “suffixIcon”. Warto wyświetlić dodatkową podpowiedź w formie etykiety tekstowej za pośrednictwem “labelText”.
5. Widget Flexible przydaje się przy zawijaniu wierszy oraz definiowaniu rozmiaru kontenerów
Dynamiczne skalowanie wielkości elementów względem siebie jest dużo łatwiejsze dzięki widgetowi Flexible. Jeśli zostanie on zaimplementowany, to nie trzeba się martwić tym, iż tekst przestanie się zawijać prawidłowo w chwili gdy rozmiar elementów ulegnie zmianie (np. na skutek zmiany orientacji ekranu). Jeśli dla poszczególnych elementów zdefiniowana zostanie wartość flex, to będą się one skalować w stosunku do sumy wszystkich flexów.
6. Widget Tooltip ułatwia użytkownikom aplikacji interakcje i poprawia czytelność przycisków
Jeżeli po najechaniu kursorem na przycisk chcesz wyświetlić podpowiedź koniecznie skorzystaj z widgetu Tooltip.
Tooltip(
message: 'lorem ipsum',
child: Text('Show custom Tooltip'),
);
7. Widget Spacer pozwala na tworzenie pustych przestrzeni pomiędzy widgetami w aplikacji
Aby estetycznie i funkcjonalnie oddzielić od siebie poszczególne kontenery wystarczy skorzystać z widgetu Spacer.
Container(
color: Colors.Blue,
height: 64,
width: 64,
),
Spacer(),
Container(
color: Colors.Purple,
height: 64,
width: 64,
),
Spacer(),
8. Zaimplementuj widget GestureDetector w aplikacjach mobilnych oraz webowych
Mając na uwadze, iż większość nowoczesnych smartfonów oraz tabletów jest w stanie wczytywać dane od użytkownika w formie gestów (np. podwójne przyciśniecie, przytrzymanie, przeciągniecie, przybliżenie itp.), łatwo zrozumieć można, dlaczego każda profesjonalna aplikacja mobilna powinna je obsługiwać. W naszym przykładzie po wykryciu gestu przyciśnięcia kontener o rozmiarze 64 × 64 staje się niebieski.
Container(
color: _color,
height: 64.0,
width: 64.0,
child: GestureDetector(
onTap: () {
setState(() {
_color = Colors.blue;
});
},
),
)
9. Przy pomocy widgetu SelectableText możesz usprawnić UI pod kątem zaznaczania i kopiowania danych
Widget SelectableText jest szczególnie przydatny, jeśli w aplikacji zachodzi potrzeba kopiowania lub zaznaczania danych (np. kopiowania kluczy autoryzacyjnych, danych kontaktowych itp). Za pośrednictwem SelectableText można łatwo określić zakres zaznaczenia (bądź kopiowania), a to przekłada się rzecz jasna na większą funkcjonalność i intuicyjność UI.
10. Wykorzystaj MediaQuery do dynamicznego zbierania danych dotyczących wielkości ekranu i preferencji użytkowników
Wieloplatformowe aplikacje mobilne na smartfony i tablety muszą wielokrotnie skalować UI aplikacji do parametrów takich jak rozmiar czy orientacja ekranu. Widget MediaQuery pozwala uniknąć sytuacji, w których indywidualnie zdefiniowane preferencje urządzenia wpływają negatywnie na wyświetlany UI. Za przykład posłużyć tu może sytuacja, w której gorzej widzący użytkownik smartfona ustawił sobie domyślnie i globalnie powiększoną czcionkę.
Podsumowanie triki Flutter
Wszystkie wspomniane wyżej widgety, klasy i to jedynie niewielki odsetek ogromnych możliwości i funkcjonalności Fluttera. Jeżeli nasze porady wzbudziły wasze zainteresowanie, to przed implementacją zajrzyjcie jeszcze koniecznie do oficjalnej dokumentacji.
Bezpłatna konsultacja
Powiedz nam czego potrzebujesz, a nasi eksperci Powiedzą Ci jak to zrobić, ile to kosztuje i na kiedy będzie gotowe.
