PricingLoginStart free
Flutter Mobile Development · Lekcja

Fokus, klawiatura i UX wprowadzania danych

Dopracuj formularze Flutter, zarządzając fokusem, typami klawiatury, akcjami wprowadzania danych i dostępnością, aby zapewnić płynne pisanie.

Lekcja 4 z 413 kroki

Fokus, klawiatura i UX wprowadzania danych to bezpłatna lekcja Flutter Mobile Development na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Flutter Mobile Development, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Flutter Mobile Development zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

Why Input UX Matters

A working form is not enough — users expect the keyboard, focus order and actions to feel effortless. This lesson covers the polish that makes forms delightful.

FocusNode Basics

A FocusNode represents the focus state of a field. Create one per field you want to control.

final emailFocus = FocusNode();
final passwordFocus = FocusNode();

Attaching Focus

Pass the node to a TextField via the focusNode property.

TextField(
  focusNode: emailFocus,
  decoration: const InputDecoration(labelText: 'Email'),
);

Moving Focus Programmatically

Request focus on the next field when the user submits the current one.

TextField(
  focusNode: emailFocus,
  onSubmitted: (_) => FocusScope.of(context).requestFocus(passwordFocus),
);

Keyboard Types

Pick the right keyboardType so the keyboard matches the field.

  • TextInputType.emailAddress
  • TextInputType.number
  • TextInputType.phone
TextField(
  keyboardType: TextInputType.emailAddress,
);

Input Actions

The textInputAction controls the keyboard's action button — Next, Done, Search and more.

TextField(
  textInputAction: TextInputAction.next,
);

Obscuring & Toggling Passwords

Use obscureText for passwords, and a suffix icon to toggle visibility.

TextField(
  obscureText: hidden,
  decoration: InputDecoration(
    suffixIcon: IconButton(
      icon: Icon(hidden ? Icons.visibility : Icons.visibility_off),
      onPressed: () => setState(() => hidden = !hidden),
    ),
  ),
);

Input Formatters

inputFormatters restrict or transform input — for example digits only.

TextField(
  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
);

Dismissing the Keyboard

Unfocus to dismiss the keyboard when the user taps elsewhere.

GestureDetector(
  onTap: () => FocusScope.of(context).unfocus(),
  child: const FormBody(),
);

Avoiding the Keyboard Overlap

Wrap your form in a scrollable so fields are not hidden behind the keyboard. A SingleChildScrollView handles this automatically.

SingleChildScrollView(
  padding: const EdgeInsets.all(16),
  child: Column(children: fields),
);

Disposing Focus Nodes

FocusNodes are resources — dispose them to avoid leaks.

@override
void dispose() {
  emailFocus.dispose();
  passwordFocus.dispose();
  super.dispose();
}

Quick Check

Which property sets the keyboard's bottom-right button to say Next?

Odpowiedz w interaktywnej lekcji

Recap

You polished input UX:

  • FocusNode and moving focus on submit
  • keyboardType and textInputAction
  • Password toggles and input formatters
  • Dismissing the keyboard and avoiding overlap

These details turn a functional form into a great one.

Bezpłatny start

Ucz się Dart dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy
22
Lekcje
88
Zacznij naukę bezpłatnieWyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Fokus, klawiatura i UX wprowadzania danych” jest bezpłatna?

Tak — pełny tekst „Fokus, klawiatura i UX wprowadzania danych” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Flutter Mobile Development, przejdź na CoddyKit PRO. Kurs Flutter Mobile Development zawiera 4 lekcji w sumie.

Co nauczysz się w „Fokus, klawiatura i UX wprowadzania danych”?

Dopracuj formularze Flutter, zarządzając fokusem, typami klawiatury, akcjami wprowadzania danych i dostępnością, aby zapewnić płynne pisanie. Ćwiczysz Flutter Mobile Development z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Flutter Mobile Development?

Nie wymagamy żadnego doświadczenia. Flutter Mobile Development w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Fokus, klawiatura i UX wprowadzania danych”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Flutter Mobile Development?

Tak. Każda lekcja Flutter Mobile Development zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Widget Form i kontrolery
  2. Techniki walidacji danych wejściowych
  3. Niestandardowe pola formularzy
  4. Fokus, klawiatura i UX wprowadzania danych
← Powrót do Flutter Mobile Development