Flutter augmenter la hauteur de TextFormField

Question

Je crée une application Flutter. j'ai fait le design comme ça.

Mon champ de formulaire TextFormField pour les hauteurs de courrier électronique et de mot de passe est petit. Je veux que ce soit la même taille que le bouton.

final email = TextFormField(
    keyboardType: TextInputType.emailAddress,
    autofocus: false,
    initialValue: '[email protected]', 
    style: new TextStyle(fontWeight: FontWeight.normal, color: Colors.white),
    decoration: InputDecoration(
      hintText: 'Email', 
      contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(32.0)
      ),
    ),
  );

Quelle est la syntaxe de la hauteur dans le champ de formulaire texte.

Answer 1

Il existe une autre alternative à l'ajout d'un rembourrage permanent supplémentaire pour couvrir le errorText - ce qui gâcherait probablement le projet original de nombreux concepteurs.

Vous pouvez créer une version modifiée de la source TextFormField .

Pour y parvenir, vous pouvez:

1. Copiez-collez tout le contenu dans le la source TextFormField .
2. Renommez votre TextFormField personnalisé afin d'éviter les conflits de noms avec l'original.
   • Vous devriez probablement également renommer la classe d'état interne.
   • Dans VS Code, vous pouvez utiliser Ctrl + H pour remplacer TextFormField pour, disons, TextFormFieldWithErrorTextOption.
3. Ajoutez un autre paramètre au constructeur de TextFormField (ci-dessous cette ligne ), disons, errorTextPresent:

   // `true` is the current implicit default, i.e., showing the `errorText`
   bool errorTextPresent = true 
   

4. Modifiez le initialisation de la décoration pour le TextField: Interne
   1. De:

      decoration: effectiveDecoration.copyWith(field.errorText)
      

   2. À:

      decoration: effectiveDecoration.copyWith(
          errorText: errorTextPresent ? field.errorText : null)
      

5. Ensuite, vous pouvez utiliser votre nouveau TextFormField de la même manière que vous utilisez n'importe quel TextFormField:

   TextFormFieldWithErrorTextOption(
     errorTextPresent: false, // `false` will disable the `errorText`
     ...
   ),