Sobes.tech
Junior

Jakie są sposoby wprowadzania tekstu w aplikacji?

sobes.tech AI

Odpowiedź od AI

Istnieje kilka głównych sposobów wprowadzania tekstu w Flutter:

  1. Widżet TextField:

    • Standardowy widżet do wprowadzania tekstu w jednej linii.
    • Pozwala na dostosowanie wyglądu, zachowania, klawiatury, walidacji i kontrolera.
    • Odpowiedni dla pól takich jak imię, email, hasło itp.
    // Przykład użycia TextField
    TextField(
      decoration: InputDecoration(
        labelText: 'Imię',
        border: OutlineInputBorder(),
      ),
      onChanged: (text) {
        // Obsługa zmiany tekstu
      },
    )
    
  2. Widżet TextFormField:

    • Opakowanie wokół TextField, zintegrowane z Form.
    • Ułatwia walidację wejścia i zapis danych formularza.
    • Często używany w formularzach do zbierania danych użytkownika.
    // Przykład użycia TextFormField
    TextFormField(
      decoration: InputDecoration(
        labelText: 'Email',
      ),
      validator: (value) {
        if (value == null || value.isEmpty) {
          return 'Proszę wprowadzić email';
        }
        return null; // Zwraca null, jeśli walidacja się powiodła
      },
      onSaved: (value) {
        // Zapisanie wartości po walidacji
      },
    )
    
  3. Widżet EditableText:

    • Niskopoziomowy widżet do edytowalnego tekstu.
    • Zapewnia podstawowe możliwości edycji, ale nie ma gotowego stylu (dekoracji).
    • Używany do tworzenia własnych pól wejściowych, np. w edytorach tekstu.
    // Przykład użycia EditableText (wymaga więcej ręcznej konfiguracji)
    EditableText(
      controller: TextEditingController(), // Kontroler do zarządzania tekstem
      focusNode: FocusNode(), // Węzeł fokusu
      style: TextStyle(color: Colors.black), // Styl tekstu
      cursorColor: Colors.blue, // Kolor kursora
      backgroundCursorColor: Colors.grey, // Kolor tła kursora
    )
    
  4. Klawiatura systemowa:

    • Flutter automatycznie zarządza wyświetlaniem klawiatury systemowej po skupieniu na widżetach wejściowych.
    • Typ klawiatury (numeryczna, alfabetyczna, email itp.) może być ustawiony za pomocą właściwości keyboardType w TextField lub TextFormField.
    // Konfiguracja klawiatury numerycznej
    TextField(
      keyboardType: TextInputType.number,
    )
    
  5. Własna klawiatura:

    • Można zaimplementować własną klawiaturę, tworząc widżety przycisków i obsługując ich naciśnięcia, aby zmienić tekst w kontrolerze widżetu wejściowego.
    • Podejście to jest używane w specjalnych przypadkach, np. w aplikacjach bankowych z unikalnym układem.
  6. Wklejanie tekstu ze schowka:

    • Widżety TextField i TextFormField domyślnie obsługują wklejanie tekstu ze schowka przez menu kontekstowe.
    • Programowy dostęp do schowka odbywa się przez klasę Clipboard.
    import 'package:flutter/services.dart';
    
    // Pobieranie tekstu ze schowka
    Future<void> pasteText() async {
      ClipboardData? data = await Clipboard.getData(Clipboard.kTextPlain);
      if (data != null) {
        String? text = data.text;
        // Użyj pobranego tekstu
      }
    }
    

W zależności od zadania i wymagań UI wybiera się odpowiedni sposób wprowadzania tekstu. Dla większości standardowych scenariuszy wystarczają TextField i TextFormField.