fbpx
goodfirms LOGO Created with Sketch.







    10 porad i tricków dotyczących Flutter

    19
    styczeń
    2023
    Karol Dobrakowski
    4 minuty czytania
    Udostępnij

    Flutter Developer poszukiwany!

    Zobacz ofertę pracy na Flutter Developera i aplikuj do naszej firmy już teraz! Pracuj gdzie chcesz i kiedy chcesz!

    Zobacz ofertę
     

    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.

    Jak możemy Ci pomóc?
    Porozmawiaj z nami!







      Wiktor Sobczyk
      Co-Founder, Key Account Manager
      Kliknij, aby podejrzeć