Flutter Blog

Widget TexField wykorzystywany jest we Flutterze do odbierania danych tekstowych od użytkownika. To klasyczne, proste pole tekstowe wykorzystujemy za każdym razem gdy tworzymy ekran logowania czy najprostszy formularz. Aby stworzyć TextField’a używamy następującego kodu:

TextField()

dzięki czemu otrzymujemy widget, który wygląda dokładnie tak:

Puste pole tekstowe to nic innego jak miejsce na tekst użytkownika. Domyślnie (właściwość autofocus: false) pole to jest nieaktywne, a dokładniej nazywając rzecz po imieniu pole jest „bez focusa”. Gdy na nie klikniemy focus staje się aktywny, na ekranie wyświetlana jest klawiatura, a użytkownik może zacząć wpisywać tekst. Możemy oczywiście wymusić, aby po załadowaniu ekranu dane pole tekstowe było „sfocusowane” i gotowe do przyjęcia tekstu poprzez zmianę właściwości autofocus na true:

autofocus: true

Pobieranie wartości z pola tekstowego

Nie sposób nie zauważyć, że w przypadku widgetów nie mamy do czynienia z ich ID, w związku z czym nasuwa się pytanie – w jaki sposób odebrać dane od użytkownika? Jak pobrać login i wpisane hasło, aby móc je później wykorzystać jako zmienną ? Otóż można tego dokonać w następujący sposób:

String zmiennaTekstowa = "";

TextField(
  onChanged: (text) {
    zmiennaTekstowa = text;
  },
)

Wykorzystując zdarzenie onChanged TextField’a pobieramy wpisany do naszego pola tekst (text) przy każdej zmianie która nastąpi w polu tekstowym i następnie przypisujemy ją do naszej zmiennej zmiennaTekstowa typu String. Działa tutaj tzw „callback”.

onChanged: (text) {
    zmiennaTekstowa = text;
  },

Drugim sposobem pracy z TextField() jest stworzenie kontrolera TextEditingController, który będzie podpięty pod nasze pole tekstowe i będzie nam pozwalał nasłuchiwać zmiany w tym polu. Aby tego dokonać tworzymy kontroler i podpinamy go jako właściwość w polu tekstowym:

TextEditingController controllerTextField = TextEditingController();

TextField(
  controller: controllerTextField,
)

Teraz, aby zacząć nasłuchiwać zmian w naszym polu tworzymy tzw.: listnera:

controllerTexField.addListner((){
       print(controllerTexField.text); //drukujemy w konsoli zawartość pola
})

Zmiana wyglądu pola tekstowego

W przypadku gdy budujemy aplikację we Flutterze opartą o Material App za wygląd pola tekstowego odpowiada właściwość InputDecoration. Możliwości są ogromne i obejmują nie tylko zmianę koloru, czcionki, kształtu czy wybór ramki, ale również możliwość umieszczenia podpowiedzi do pola czy ikonki w polu tekstowym.

TextField(
                  decoration: InputDecoration(
                    hintText: 'To jest podpowiedź',
                    hintStyle: TextStyle(
                      color: Colors.red,
                      fontStyle: FontStyle.italic,
                      fontSize: 20,
                    ),
                  ),
                ),

Ikonka w polu tekstowym

Pole tekstowe można również wyposażyć w ikonkę, można tego dokonać w bardzo prosty sposób wybierając odpowiednią pozycję z zasobu np. Icons. Następujący kod:

TextField(
                  decoration: InputDecoration(
                    icon: Icon(Icons.shopping_cart),
                  ),
                ),

pozwoli nam na uzyskane następującego efektu:

Pole tekstowe z ramką

Wygląd pola tekstowego możemy edytować na wiele sposobów, jednym z nich jest modyfikacja wyglądu ramki. Mamy możliwość zmiany kształtu, koloru, grubości ramki zarówno pola bez focusa jak i pola klikniętego. Domyślnie w przypadku aplikacji opartej o Material pole tekstowe nie posiada żadnej ramki, możemy to bardzo szybko zmienić za pomocą następującego kodu:

                 TextField(
                          decoration: InputDecoration(
                            enabledBorder: OutlineInputBorder(
                              borderSide:
                                  BorderSide(color: Colors.red, width: 1.0),
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderSide:
                                  BorderSide(color: Colors.orange, width: 5.0),
                            ),
                          ),
                        ),

enabledBorder odpowiada za wygląd ramki domyślnie załadowanego pola tekstowego, a właściwość focusedBorder zmienia wygląd pola w momencie aktywności. Efektem działania powyższego kodu będzie pole z czerwoną ramką w szerokości 1.0px, które w momencie aktywności zmieni się na ramkę o szerokości 5.0px w kolorze pomarańczowym (tak wiem, świetnie połączenie kolorów… 😉 :

Border możemy oczywiście estetycznie zaokrąglić otrzymując efektowne pole, którego nie powstydziłby się żaden projektant:

                        decoration: InputDecoration(
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(25.0),
                            ),
                          ),

Wybór klawiatury dla pola tekstowego

Często zdarza się, że przygotowują poszczególne pola typu TextField np. programując formularz rejestracji chcemy ułatwić użytkownikowi interakcję z aplikacją. Jednym ze sposobów dokonania tego jest usunięcie zbędnych pól klawiatury przy wprowadzaniu numeru telefonu czy kwoty (w takim przypadku wiemy, że user powinien wpisać cyfry). Nasze pole TextField może mieć narzuconą klawiaturę alfanumeryczną (domyślna), numeryczną, telefoniczną etc. za pomocą właściwości keyboardType.

keyboardType: TextInputType.emailAddress,
//dla pola e-mail

keyboardType: TextInputType.number,
//klawiatura numeryczna

keyboardType: TextInputType.multiline,
//klawiatura z przyciskiem enter i przejście do następnej linii

keyboardType: TextInputType.phone
//klawiatura telefoniczna

Pole typu hidden dla haseł

Pole tekstowe typu hidden wykorzystywane jest za każdym razem gdy chcemy, aby użytkownik wprowadził hasło czy to przy rejestracji czy przy logowaniu do aplikacji. Aby zabezpieczyć pole tekstowe i zamiast wpisywanego tekstu zobaczyć w nim czarne kropki wystarczy zmienić domyślna wartość właściwości obscureText z false na true:

obscureText: true,

Stylowanie tekstu i kolor tła

Wygląd pola tekstowego możemy również zmienić za pomocą właściwości Style, która pozwala nam na wybór kroju czcionki, wielkości i np. koloru.

                     style: TextStyle(
                            color: Colors.red,
                            fontSize: 40,
                            fontWeight: FontWeight.bold,
                          ),

W przypadku chęci zmiany koloru tła musimy sięgnąć do wspomnianej już wcześniej właściwości decoration i InputDecoration gdzie wprowadzamy „kolor wypełnienia” oraz wypełniamy pole zmieniając właściwość filled na true:

decoration: InputDecoration(fillColor: Colors.yellow, filled: true),

Owocem powyższego kodu będzie „piękne” żółte pole tekstowe z jeszcze piękniejszym fontem w kolorze czerwonym:

Pozostałe właściwości TextField() które warto znać

textAlign – ustawia kursor we wskazanym miejscu pola tekstowego. Tekst w polu może być wyśrodkowany, wyjustowany, ustawiony po prawej lub lewej stronie pola lub w jego dowolnym miejscu.

TextField(
	  textAlign: TextAlign.center,
	  ),

maxLength – właściwość ta przyda się wszędzie tam, gdzie musimy ograniczyć długość wprowadzanego tekstu, wszelkie maści pola telefon czy np. kod pocztowy powinny być ograniczone

maxLength: 4,

showCursor – za pomocą tej właściwości możemy ukryć w polu tekstowym kursor, nie będzie on widoczny dla użytkownika

showCursor: false
//ukrywa kursor w polu tekstowym

textCapitalization – możemy tak ustawić właściwości pola tekstowego aby odpowiednie wyrazy, litery, lub cały tekst był pisany dużymi literami.

TextField(
 textCapitalization: TextCapitalization.sentences,
),
//tradycyjne ustawienie, w którym zdania rozpoczynają się z wielkiej litery

TextField(
 textCapitalization: TextCapitalization.characters,
),
//wszystkie litery w polu tekstowym pisane jako wielkie

TextField(
 textCapitalization: TextCapitalization.words,
),
//każdy wyraz rozpoczynał się będzie wielką literą

enabled:true,
//ustawienie domyślne, pole jest aktywne

enabled:false
//ustawienie sprawia, że pole tekstowe jest nieaktywne

• Deep dive into Flutter TextField
• TextField class
• Flutter TextField decoration in depth