web-dev-qa-db-fra.com

Comment supprimer le remplissage du contenu de TextField?

Je suis nouveau dans le flottement et je crée un formulaire de connexion, pour cela j'ai utilisé TextField et ajouté une icône de préfixe mais j'obtiens des espaces supplémentaires entre les champs de texte (identifiant et code PIN) et avant l'icône de préfixe. J'ai également essayé InputDecorationTheme mais cela n'a pas fonctionné.

Veuillez me faire savoir comment supprimer ou réduire l'espace. ??

Voici mon code:

TextField(
  maxLength: 8,
  keyboardType: TextInputType.number,
  decoration: InputDecoration(
    hintText: hint,
    hintStyle: TextStyle(fontSize: 12.0),
    prefixIcon: Icon(icon),
    counterText: '',
  ),
)

x

fluttertextfieldflutter-layout
14
Zubair Rehman

Vous pouvez utiliser contentPadding de InputDecoration. Voici un exemple de code

TextField(
   maxLines: 8,
   decoration: InputDecoration(
      contentPadding: EdgeInsets.symmetric(vertical: 5),
      labelText: 'Description',
      labelStyle: txtHintStyle,
   )
 )
7
Ketan Ahir

Je viens un peu en retard, mais la seule chose que vous avez à faire est d'utiliser des rembourrages négatifs:

TextField(
   decoration: InputDecoration(
      contentPadding: EdgeInsets.symmetric(vertical: -5),
      labelText: 'Description',
   )
 )
3
Skyost

En appliquant un remplissage moins en utilisant

transform: Matrix4.translationValues(-10.0, 0.0, 0.0),

mettre au-dessus de la ligne à l'intérieur du conteneur d'icônes

TextFormField(
          keyboardType: TextInputType.number,
          style: new TextStyle(color: Colors.white, fontSize: 17),
          decoration: new InputDecoration(
              prefixIcon: Container(
                transform: Matrix4.translationValues(-10.0, 0.0, 0.0),
                child: Icon(
                  Icons.vpn_key,
                  color: Colors.white,
                ),
              ),
              labelText: "Enter Password",
              labelStyle: new TextStyle(color: Colors.white)),
        ),
2
Brinda Rathod

Ce prefixIcon a déjà contenu le remplissage de 12.0 selon la documentation. Vous n'avez donc pas besoin de fournir de rembourrage supplémentaire.

Voir ci-dessous l'explication et le code que vous pouvez trouver dans input_decorator.Dart.

L'icône de préfixe est limitée par une taille minimale de 48 pixels par 48 pixels, mais peut être étendue au-delà. Tout élément supérieur à 24 pixels nécessitera un remplissage supplémentaire pour garantir qu'il correspond à la spécification de matériau du remplissage 12 pixels entre le bord gauche de l'entrée et le bord avant de l'icône de préfixe. Pour remplir le bord avant de l'icône de préfixe:

prefixIcon: Padding(
     padding: const EdgeInsetsDirectional.only(start: 12.0),
     child: myIcon, // icon is 48px widget.
)

J'espère que cela aidera.

0
dhuma1981

J'ai pu y parvenir facilement en ajoutant des contraintes de préfixe au prefixIcon et en enveloppant le prefixIcon avec un remplissage comme celui-ci

      TextFormField(
         enabled: true,
         decoration: InputDecoration(
         prefixIconConstraints:BoxConstraints(minWidth: 23, maxHeight: 20),
         prefixIcon: Padding(
                       padding: const EdgeInsets.only(right: 20),
                       child: Icon(
                                Icons.email,
                                color: clockColor,
                               ),
                        ),
         hintText:"Email Address"
         hintStyle:TextStyle(color: hintColor, fontSize: 14),
       ),
    ),

voici la sortie, j'espère que cela aide

enter image description here

0
maheshmnj

J'ai dû réaliser quelque chose de similaire mais je n'ai pas pu trouver de solution parfaite. Entré avec et contourner l'utilisation du widget Stack.

Widget _username(context){
  return SizedBox(
    height: 35,
    child: Stack(
      children: <Widget>[
        Align(
          alignment: Alignment.centerLeft,
          child: Icon(
            Icons.mail,
            size: 20,
            color: Theme.of(context).accentColor,
          ),
        ),
        TextField(
          style: TextStyle(
              color: Colors.white
          ),
          decoration: InputDecoration(
            contentPadding: const EdgeInsets.symmetric(vertical: 11.0, horizontal: 33.0),
            hasFloatingPlaceholder: false,
            labelText: 'Username',
            labelStyle: TextStyle(
                color: Colors.white
            ),
            enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(
                  color: Theme.of(context).accentColor,
                )
            ),
            focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(
                color: Theme.of(context).accentColor,
              ),
            ),
          ),
        ),
      ]
    ),
  );
}

SizedBox est utilisé pour contrôler le remplissage vertical. Pour le remplissage horizontal, Icon et TextField sont empilés. Cela entraîne le chevauchement de l'étiquette de TextField au-dessus de l'icône, la propriété contentPadding est donc utilisée pour déplacer l'étiquette vers la droite. Avec cela, j'ai atteint le look suivant.

enter image description here

0
Lama Madan