Een diepe duik in flutter-tekstveld

Een tutorial over de kracht van TextFields in Flutter

Dit is het tweede artikel in een reeks artikelen waarin in detail enkele van de widget Flutter-aanbiedingen en tips en trucs voor hen worden uitgelegd. In het laatste artikel hebben we de ListView-widget in detail onderzocht. In dit artikel gaan we uitgebreid in op de Flutter TextField-widget en ontdekken we de functies en mogelijke aanpassingen ervan.

Inleiding tot TextField

Met een TextField-widget kan informatie van de gebruiker worden verzameld. De code voor een standaard TextField is zo eenvoudig als:

TextField ()

Dit creëert een basis TextField:

Informatie ophalen uit een TextField

Omdat TextFields geen ID hebben zoals in Android, kan tekst niet op verzoek worden opgehaald en moet deze in plaats daarvan worden opgeslagen in een variabele of een controller gebruiken.

  1. De eenvoudigste manier om dit te doen, is door de methode onChanged te gebruiken en de huidige waarde op te slaan in een eenvoudige variabele. Hier is de voorbeeldcode ervoor:
String value = "";
TextField (
  onChanged: (tekst) {
    waarde = tekst;
  },
)

2. De tweede manier om dit te doen is om een ​​TextEditingController te gebruiken. De controller is gekoppeld aan het TextField en laat ons de tekst van het TextField beluisteren en besturen.

TextEditingController controller = TextEditingController ();
TextField (
  controller: controller,
)

En we kunnen luisteren naar veranderingen met behulp van

controller.addListener (() {
  // Doe hier iets
});

En krijg of stel waarden in met

druk (controller.text); // Huidige waarde afdrukken
controller.text = "Demotekst"; // Nieuwe waarde instellen

Andere callbacks vanuit het TextField

De TextField-widget biedt ook andere callbacks zoals

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

Dit zijn callbacks die worden opgeroepen bij acties zoals wanneer de gebruiker op de knop "Gereed" op iOS klikt.

Focusgericht werken in TextFields

“Focus” op een TextField betekent dat een TextField actief is en elke invoer vanaf het toetsenbord zal resulteren in gegevens ingevoerd in het gefocuste TextField.

1. Werken met autofocus

Om autofocus op een TextField wanneer de widget wordt gemaakt, stelt u het autofocusveld in op true.

TextField (
  autofocus: waar,
)

Hiermee wordt standaard de focus op het tekstveld ingesteld.

De focus verschuift standaard naar het tekstveld

2. Werken met aangepaste focuswijzigingen

Wat als we de focus op de vraag willen veranderen en niet alleen autofocus? Omdat we een manier nodig hebben om te verwijzen naar welk TextField we ons vervolgens willen concentreren, koppelen we een FocusNode aan het TextField en gebruiken we dit om de focus te schakelen.

// Initialiseren buiten de build-methode
FocusNode nodeOne = FocusNode ();
FocusNode nodeTwo = FocusNode ();
// Doe dit binnen de build-methode
TextField (
  focusNode: nodeOne,
)
TextField (
  focusNode: nodeTwo,
)
RaisedButton (
  onPressed: () {
    FocusScope.of (context) .requestFocus (nodeTwo);
  },
  child: Text ("Next Field"),
)

We maken twee focusknooppunten en koppelen deze aan de TextFields. Wanneer de knop wordt ingedrukt, gebruiken we FocusScope om focus op het volgende TextField te vragen.

De focus verandert wanneer de knop wordt ingedrukt

Toetsenbordeigenschappen voor tekstvelden wijzigen

Met een TextField in Flutter kunt u ook eigenschappen aanpassen die betrekking hebben op het toetsenbord.

1. Toetsenbordtype

Met een TextField kunt u het type toetsenbord aanpassen dat wordt weergegeven wanneer het TextField in beeld wordt gebracht. We veranderen hiervoor de eigenschap keyboardType.

TextField (
  keyboardType: TextInputType.number,
)

De typen zijn:

  1. TextInputType.text (Normaal volledig toetsenbord)
  2. TextInputType.number (Een numeriek toetsenbord)
  3. TextInputType.emailAddress (Normaal toetsenbord met een "@")
  4. TextInputType.datetime (Numeriek toetsenbord met een “/” en “:”)
  5. TextInputType.numberWithOptions (Numeriek toetsenbord met opties voor ondertekende en decimale modus)
  6. TextInputType.multiline (Optimaliseert voor meerregelige informatie)

2. TextInputAction

TextInputAction van het TextField wijzigen laat je de actieknop van het toetsenbord zelf veranderen.

Als voorbeeld:

TextField (
  textInputAction: TextInputAction.continueAction,
)

Hierdoor wordt de knop 'Gereed' vervangen door een knop 'Doorgaan':

Of

TextField (
  textInputAction: TextInputAction.send,
)

Oorzaken

De volledige lijst is te groot om hier te worden weergegeven, maar vergeet deze niet te bekijken.

3. Autocorrectie

Schakelt autocorrectie in of uit voor het specifieke TextField. Gebruik het autocorrectie veld om dit in te stellen.

TextField (
  autocorrectie: onwaar,
)

Hiermee worden ook suggesties uitgeschakeld.

4. Hoofdlettergebruik van tekst

Het TextField biedt een paar opties voor het gebruik van hoofdletters in de invoer van de gebruiker.

TextField (
  textCapitalization: TextCapitalization.sentences,
)

De typen zijn:

  1. TextCapitalization.sentences

Dit is het normale type hoofdlettergebruik dat we verwachten, waarbij de eerste letter van elke zin een hoofdletter is.

2. TextCapitalization.characters

Hoofdletters alle tekens in de zinnen.

3. TextCapitalization.words

Hoofdletters voor de eerste letter van elk woord.

Tekststijl, uitlijning en cursoropties

Flutter maakt aanpassing mogelijk met betrekking tot de stijl en uitlijning van tekst in het TextField evenals de cursor in het TextField.

Tekstuitlijning binnen het TextField

Gebruik de eigenschap textAlign om aan te passen waar de cursor zich in het TextField bevindt.

TextField (
  textAlign: TextAlign.center,
)

Hierdoor beginnen de cursor en tekst in het midden van het tekstveld.

Dit heeft de gebruikelijke uitlijningseigenschappen: start, einde, links, rechts, midden, rechtvaardigen.

De tekst in het TextField stileren

We gebruiken de eigenschap style om het uiterlijk van de tekst in het TextField te wijzigen. Gebruik het om de kleur, lettergrootte, enz. Te wijzigen. Dit is vergelijkbaar met de stijleigenschap in de Tekstwidget, dus we zullen niet te veel tijd besteden aan het verkennen ervan.

TextField (
  stijl: TextStyle (kleur: Colors.red, fontWeight: FontWeight.w300),
)

De cursor in het tekstveld wijzigen

De cursor kan rechtstreeks vanuit de TextField-widget worden aangepast.

U mag de cursor kleur, breedte en straal van de hoeken wijzigen. Hier maak ik bijvoorbeeld zonder duidelijke reden een cirkelvormige rode cursor.

TextField (
  cursorColor: Colors.red,
  cursorRadius: Radius.circular (16.0),
  cursorbreedte: 16.0,
)

De grootte en maximale lengte in een tekstveld regelen

TextFields kan het maximale aantal tekens dat erin wordt geschreven, het maximale aantal regels bepalen en uitbreiden naarmate tekst wordt getypt.

Maximale tekens beheren

TextField (
  max. lengte: 4,
)

Door de eigenschap maxLength in te stellen, wordt een maximale lengte afgedwongen en wordt standaard een teller aan het tekstveld toegevoegd.

Een uitbreidbaar tekstveld maken

Soms hebben we een TextField nodig dat groter wordt wanneer een regel is voltooid. In Flutter is het een beetje vreemd (maar toch eenvoudig) om te doen. Om dit te doen, stellen we maxLines in op null, wat standaard 1 is. Op nul zetten is niet iets dat we heel gewend zijn, maar het is toch gemakkelijk om te doen.

Opmerking: als u de maxLines instelt op een directe waarde, wordt deze standaard uitgebreid naar dat aantal regels.

TextField (
  maxLines: 3,
)

Tekst verdoezelen

Als u tekst in een TextField wilt verbergen, stelt u obscureText in op true.

TextField (
  obscureText: waar,
)

En tot slot, Decorating the TextField

Tot nu toe hebben we ons gericht op de functies die Flutter biedt voor invoer. Nu gaan we echt een fraai tekstveld ontwerpen en geen nee zeggen tegen uw ontwerper.

Voor het decoreren van het TextField gebruiken we de eigenschap decoration die een InputDecoration gebruikt. Aangezien de klasse InputDecoration enorm is, zullen we proberen de belangrijkste belangrijke eigenschappen snel door te nemen.

Gebruik de hint- en labeleigenschappen om informatie aan de gebruiker te geven

Zowel de hint als het label zijn tekenreeksen die de gebruiker helpen de informatie te begrijpen die in het tekstveld moet worden ingevoerd. Het verschil is dat een hint verdwijnt zodra de gebruiker begint te typen terwijl een label over het tekstveld zweeft.

wenkLabel

U kunt pictogrammen toevoegen met "icon", "prefixIcon" en "suffixIcon"

U kunt pictogrammen rechtstreeks toevoegen aan TextFields. U kunt in plaats daarvan ook prefixText en suffixText voor tekst gebruiken.

TextField (
  decoratie: InputDecoration (
    icon: Icon (Icons.print)
  )
)
Pictogram met de pictogrameigenschap
TextField (
  decoratie: InputDecoration (
    prefixIcon: Icon (Icons.print)
  )
)
Pictogram met de eigenschap prefixIcon

Gebruik voor elke andere widget 'prefix' in plaats van 'prefixIcon'

Gebruik het veld voorvoegsel om een ​​generieke widget in plaats van een pictogram te gebruiken. Nogmaals, zonder duidelijke reden, laten we een circulaire voortgangsindicator toevoegen aan een tekstveld.

TextField (
  decoratie: InputDecoration (
    voorvoegsel: CircularProgressIndicator (),
  )
)

Elke eigenschap zoals hint, label, enz. Heeft zijn respectieve stijlvelden

Gebruik een hintStyle om een ​​hint op te maken. Gebruik een labelstijl om een ​​label te stijlen.

TextField (
  decoratie: InputDecoration (
    hintText: "Demo Text",
    hintStyle: TextStyle (fontWeight: FontWeight.w300, kleur: Colors.red)
  )
)

Opmerking: hoewel ik het in dit voorbeeld heb gedaan, verander de hintkleur over het algemeen niet omdat dit verwarrend is voor gebruikers.

Gebruik "helperText" als u geen label wilt, maar een permanent bericht voor de gebruiker wilt.

TextField (
  decoratie: InputDecoration (
    helperText: "Hallo"
  )
)

Gebruik "decoration: null" of InputDecoration.collapsed om de standaard onderstreping op een TextField te verwijderen

Gebruik deze om de standaard onderstreping op een TextField te verwijderen.

TextField (
  decoratie: InputDecoration.collapsed (hintText: "")
)

Gebruik "border" om een ​​rand te geven aan het TextField

TextField (
  decoratie: InputDecoration (
    border: OutlineInputBorder ()
  )
)

Er is een enorme hoeveelheid decoratie die je verder kunt doen, maar we kunnen niet op alles in één artikel ingaan. Maar ik hoop dat dit duidelijk maakt hoe gemakkelijk het is om Flutter TextFields aan te passen.

Dat is het voor dit artikel! Ik hoop dat je ervan genoten hebt en laat een paar klappen achter als je dat deed. Volg mij voor meer Flutter-artikelen en commentaar voor eventuele feedback over dit artikel.

Bekijk ook mijn andere profielen en artikelen:

tjilpen

GitHub

Enkele van mijn andere artikelen