Un tuffo profondo in Flutter TextField

Un tutorial sulla potenza di TextFields in Flutter

Questo è il secondo articolo di una serie di articoli che spiega in dettaglio alcuni dei widget offerti da Flutter e suggerimenti e trucchi per essi. Nell'ultimo articolo, abbiamo esplorato in dettaglio il widget ListView. In questo articolo entriamo nel widget Flutter TextField in modo completo e scopriamo le caratteristiche e le possibili personalizzazioni di esso.

Introduzione a TextField

Un widget TextField consente la raccolta di informazioni dall'utente. Il codice per un TextField di base è semplice come:

Campo di testo()

Questo crea un campo di testo di base:

Recupero di informazioni da un campo di testo

Poiché TextFields non ha un ID come in Android, il testo non può essere recuperato su richiesta e deve invece essere archiviato in una variabile in caso di modifica o utilizzare un controller.

  1. Il modo più semplice per farlo è utilizzare il metodo onChanged e archiviare il valore corrente in una semplice variabile. Ecco il codice di esempio per questo:
Valore stringa = "";
Campo di testo(
  onChanged: (testo) {
    valore = testo;
  },
)

2. Il secondo modo per farlo è utilizzare un TextEditingController. Il controller è collegato a TextField e ci consente di ascoltare e controllare anche il testo di TextField.

TextEditingController controller = TextEditingController ();
Campo di testo(
  controller: controller,
)

E possiamo ascoltare i cambiamenti usando

controller.addListener (() {
  // Fai qualcosa qui
});

E ottieni o imposta valori usando

stampa (controller.text); // Stampa il valore corrente
controller.text = "Testo demo"; // Imposta un nuovo valore

Altri callback da TextField

Il widget TextField fornisce anche altri callback come

  1. onEditingCompleted
  2. onSubmitted
onEditingComplete: () {},
onSubmitted: (valore) {},

Si tratta di callback chiamati su azioni come quando l'utente fa clic sul pulsante "Fine" su iOS.

Lavorare con focus in TextFields

Avere "focus" su un TextField significa avere un TextField attivo e qualsiasi input dalla tastiera comporterà l'inserimento dei dati nel TextField focalizzato.

1. Lavorare con l'autofocus

Per eseguire la messa a fuoco automatica su un campo di testo quando viene creato il widget, impostare il campo di messa a fuoco automatica su true.

Campo di testo(
  autofocus: vero,
),

Questo imposta lo stato attivo su TextField per impostazione predefinita.

Il focus si sposta su TextField per impostazione predefinita

2. Lavorare con cambiamenti di messa a fuoco personalizzati

E se volessimo cambiare l'attenzione sulla domanda e non solo sull'autofocus? Dato che abbiamo bisogno di un modo per fare riferimento a quale campo di testo vogliamo mettere a fuoco in seguito, colleghiamo un FocusNode a TextField e lo usiamo per cambiare lo stato attivo.

// Inizializzazione al di fuori del metodo di generazione
FocusNode nodeOne = FocusNode ();
FocusNode nodeTwo = FocusNode ();
// Fallo nel metodo di compilazione
Campo di testo(
  focusNode: nodeOne,
),
Campo di testo(
  focusNode: nodeTwo,
),
RaisedButton (
  onPressed: () {
    FocusScope.of (contesto) .requestFocus (nodeTwo);
  },
  figlio: testo ("campo successivo"),
),

Creiamo due nodi focus e li colleghiamo ai campi di testo. Quando viene premuto il pulsante, utilizziamo FocusScope per richiedere lo stato attivo al campo di testo successivo.

La messa a fuoco cambia quando si preme il pulsante

Modifica delle proprietà della tastiera per TextFields

Un campo di testo in Flutter consente di personalizzare anche le proprietà relative alla tastiera.

1. Tipo di tastiera

Un TextField consente di personalizzare il tipo di tastiera che viene visualizzato quando FocusField viene messo a fuoco. Per questo cambiamo la proprietà keyboardType.

Campo di testo(
  keyboardType: TextInputType.number,
),

I tipi sono:

  1. TextInputType.text (tastiera completa normale)
  2. TextInputType.number (Una tastiera numerica)
  3. TextInputType.emailAddress (tastiera normale con una "@")
  4. TextInputType.datetime (Tastiera numerica con un "/" e ":")
  5. TextInputType.numberWithOptions (Tastiera numerica con opzioni per abilitare la modalità firmata e decimale)
  6. TextInputType.multiline (ottimizzato per informazioni su più righe)

2. TextInputAction

Modifica textInputAction di TextField consente di modificare il pulsante di azione della tastiera stessa.

Come esempio:

Campo di testo(
  textInputAction: TextInputAction.continueAction,
),

Questo fa sì che il pulsante "Fine" venga sostituito da un pulsante "Continua":

O

Campo di testo(
  textInputAction: TextInputAction.send,
),

Le cause

L'elenco completo è troppo grande per essere visualizzato qui, ma assicurati di verificarlo.

3. Correzione automatica

Abilita o disabilita la correzione automatica per lo specifico TextField. Utilizzare il campo di correzione automatica per impostare questo.

Campo di testo(
  correzione automatica: false,
),

Questo disabiliterà anche i suggerimenti.

4. Capitalizzazione del testo

TextField offre alcune opzioni su come capitalizzare le lettere nell'input dell'utente.

Campo di testo(
  textCapitalization: TextCapitalization.sentences,
),

I tipi sono:

  1. TextCapitalization.sentences

Questo è il normale tipo di capitalizzazione che ci aspettiamo, essendo la prima lettera di ogni frase in maiuscolo.

2. TextCapitalization.characters

Mette in maiuscolo tutti i personaggi nelle frasi.

3. TextCapitalization.words

Mette in maiuscolo la prima lettera di ogni parola.

Opzioni di stile, allineamento e cursore di testo

Flutter consente la personalizzazione relativa allo stile e all'allineamento del testo all'interno di TextField nonché al cursore all'interno di TextField.

Allineamento del testo all'interno di TextField

Utilizzare la proprietà textAlign per regolare la posizione del cursore all'interno di TextField.

Campo di testo(
  textAlign: TextAlign.center,
),

Ciò provoca l'avvio del cursore e del testo nel mezzo di TextField.

Questo ha le solite proprietà di allineamento: inizio, fine, sinistra, destra, centro, giustificazione.

Stile del testo all'interno di TextField

Usiamo la proprietà style per cambiare l'aspetto del testo all'interno di TextField. Usalo per cambiare il colore, la dimensione del carattere, ecc. Questo è simile alla proprietà style nel widget Text quindi non passeremo troppo tempo ad esplorarlo.

Campo di testo(
  stile: TextStyle (color: Colors.red, fontWeight: FontWeight.w300),
),

Modifica del cursore in TextField

Il cursore è personalizzabile direttamente dal widget TextField.

Puoi modificare il colore del cursore, la larghezza e il raggio degli angoli. Ad esempio, qui creo un cursore rosso circolare senza motivo apparente.

Campo di testo(
  cursorColor: Colors.red,
  cursoreRadius: Radius.circular (16.0),
  cursoreLarghezza: 16.0,
),

Controllo delle dimensioni e della lunghezza massima in un campo di testo

TextFields può controllare il numero massimo di caratteri scritti al suo interno, il numero massimo di righe ed espandersi man mano che si digita il testo.

Controllo dei caratteri massimi

Campo di testo(
  maxLength: 4,
),

Impostando la proprietà maxLength, viene applicata una lunghezza massima e un contatore viene aggiunto per impostazione predefinita a TextField.

Creare un campo di testo espandibile

A volte, abbiamo bisogno di un campo di testo che si espande al termine di una riga. In Flutter è leggermente strano (ma facile) da fare. Per fare ciò, impostiamo maxLines su null, che è 1 per impostazione predefinita. L'impostazione su null non è qualcosa a cui siamo abituati, ma è comunque facile da fare.

Nota: l'impostazione di maxLines su un valore diretto lo espande a quel numero di righe per impostazione predefinita.

Campo di testo(
  maxLines: 3,
)

Testo oscuro

Per oscurare il testo in un campo di testo, impostare obscureText su true.

Campo di testo(
  obscureText: true,
),

E infine, decorare TextField

Fino ad ora ci siamo concentrati sulle funzionalità offerte da Flutter per l'input. Ora passeremo alla progettazione di un TextField di fantasia e senza dire di no al tuo designer.

Per decorare TextField, usiamo la proprietà decoration che accetta InputDecoration. Poiché la classe InputDecoration è enorme, proveremo a esaminare rapidamente la maggior parte delle proprietà importanti.

Utilizzare le proprietà del suggerimento e dell'etichetta per fornire informazioni all'utente

Sia il suggerimento che l'etichetta sono stringhe che aiutano l'utente a comprendere le informazioni da inserire in TextField. La differenza è che un suggerimento scompare quando l'utente inizia a digitare mentre un'etichetta si sposta su TextField.

SuggerimentoEtichetta

Puoi aggiungere icone usando “icon”, “prefixIcon” e “suffixIcon”

È possibile aggiungere icone direttamente a TextFields. Puoi anche usare prefixText e suffixText per il testo.

Campo di testo(
  decorazione: InputDecoration (
    icon: Icon (Icons.print)
  ),
),
Icona usando la proprietà icon
Campo di testo(
  decorazione: InputDecoration (
    prefixIcon: Icon (Icons.print)
  ),
),
Icona che utilizza la proprietà prefixIcon

Allo stesso modo per qualsiasi altro widget, utilizzare "prefix" anziché "prefixIcon"

Per utilizzare un widget generico anziché un'icona, utilizzare il campo prefisso. Ancora una volta senza motivo apparente, aggiungiamo un indicatore di progresso circolare in un campo di testo.

Campo di testo(
  decorazione: InputDecoration (
    prefisso: CircularProgressIndicator (),
  ),
),

Ogni proprietà come suggerimento, etichetta, ecc ha i suoi rispettivi campi di stile

Per modellare un suggerimento, utilizzare un suggerimento. Per dare uno stile a un'etichetta, usa labelStyle.

Campo di testo(
  decorazione: InputDecoration (
    hintText: "Demo Text",
    hintStyle: TextStyle (fontWeight: FontWeight.w300, color: Colors.red)
  ),
),

Nota: anche se in questo esempio l'ho fatto, in genere non cambia il colore del suggerimento poiché confonde gli utenti.

Utilizzare "helperText" se non si desidera un'etichetta ma si desidera un messaggio persistente per l'utente.

Campo di testo(
  decorazione: InputDecoration (
    helperText: "Ciao"
  ),
),

Utilizzare "decoration: null" o InputDecoration.collapsed per rimuovere la sottolineatura predefinita su un campo di testo

Utilizzare questi per rimuovere la sottolineatura predefinita su un campo di testo.

Campo di testo(
  decorazione: InputDecoration.collapsed (hintText: "")
),

Usa "bordo" per dare un bordo a TextField

Campo di testo(
  decorazione: InputDecoration (
    bordo: OutlineInputBorder ()
  )
),

C'è una grande quantità di decorazioni che puoi fare ulteriormente, ma non possiamo approfondire tutto in un articolo. Spero che questo chiarisca quanto sia facile personalizzare Flutter TextFields.

Questo è tutto per questo articolo! Spero ti sia piaciuto e lasciare qualche applauso se lo facessi. Seguimi per altri articoli di Flutter e commenta per qualsiasi feedback tu possa avere su questo articolo.

Sentiti libero di dare un'occhiata anche ai miei altri profili e articoli:

cinguettio

GitHub

Alcuni dei miei altri articoli