Flutter: comment créer un TextField avec HintText mais pas de soulignement?

117

Voici ce que j'essaye de faire:

Dans la documentation Flutter pour les champs de texte ( https://flutter.io/text-input/ ), il est dit que vous pouvez supprimer le soulignement en passant nullà la décoration. Cependant, cela élimine également le texte de l'indice.

Je ne veux aucun soulignement, que le champ de texte soit focalisé ou non.

MISE À JOUR: réponse acceptée mise à jour pour refléter les modifications apportées au SDK Flutter à partir d'avril 2020.

flutter

— Thé en sachets
source

80

Aucune des réponses ci-dessus ne fonctionnera pour le nouveau sdk flutter car après l'intégration du support Web et de bureau, vous devez spécifier individuellement comme ceci

TextFormField(
    cursorColor: Colors.black,
    keyboardType: inputType,
    decoration: new InputDecoration(
        border: InputBorder.none,
        focusedBorder: InputBorder.none,
        enabledBorder: InputBorder.none,
        errorBorder: InputBorder.none,
        disabledBorder: InputBorder.none,
        contentPadding:
            EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
        hintText: sLabel),
  )

— sourav pandit
source

233

Fais-le comme ça:

TextField(
  decoration: new InputDecoration.collapsed(
    hintText: 'Username'
  ),
),

ou si vous avez besoin d'autres éléments comme l'icône, définissez la bordure avec InputBorder.none

InputDecoration(
    border: InputBorder.none,
    hintText: 'Username',
  ),
),

— Fait Baruna
source

Est-il possible de le faire sans importer le materialpackage? c'est-à-dire pour le Cupertinothème?

— kosiara - Bartosz Kosarzycki

Je voudrais éviter: InputDecoration' can't be assigned to the parameter type 'BoxDecoration'erreur de type

— kosiara - Bartosz Kosarzycki

13

changer la bordure focalisée sur aucune

TextField(
      decoration: new InputDecoration(
          border: InputBorder.none,
          focusedBorder: InputBorder.none,
          contentPadding: EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
          hintText: 'Subject'
      ),
    ),

— Sarthak Singhal
source

12

Voici une réponse supplémentaire qui montre un code plus complet:

  Container(
    decoration: BoxDecoration(
      color: Colors.tealAccent,
      borderRadius:  BorderRadius.circular(32),
    ),
    child: TextField(
      decoration: InputDecoration(
        hintStyle: TextStyle(fontSize: 17),
        hintText: 'Search your trips',
        suffixIcon: Icon(Icons.search),
        border: InputBorder.none,
        contentPadding: EdgeInsets.all(20),
      ),
    ),
  ),

Remarques:

Le fond sombre (code non affiché) est Colors.teal.
InputDecorationa également une propriété filledand fillColor, mais je ne pouvais pas leur donner un rayon de coin, alors j'ai utilisé un conteneur à la place.

— Suragch
source

3

Je n'ai trouvé aucune autre réponse donnant un rayon de bordure, vous pouvez simplement le faire comme ça, non imbriqué Container

  TextField(
    decoration: InputDecoration(
      border: OutlineInputBorder(
        borderSide: BorderSide.none,
        borderRadius: BorderRadius.circular(20),
      ),
    ),
  );

— E. Soleil
source

-1

J'utilisais le TextFieldcontrôle de flutter.J'ai obtenu l'entrée saisie par l'utilisateur en utilisant les méthodes ci-dessous.

onChanged:(value){
}

— Sachin Mishra
source

-2

decoration: InputDecoration(
 border:OutLineInputBorder(
 borderSide:BorderSide.none
 bordeRadius: BordeRadius.circular(20.0)
 )
)

— SR Keshav
source

Quelle est la différence entre cette réponse et @E. La réponse de Sun il y a un mois?

— Jeremy Caney

Tu veux quelque chose de nouveau?

— SR Keshav le

2

Si une réponse a déjà été fournie, il n'est pas nécessaire de la soumettre à nouveau. Cela ne fait qu'ajouter du bruit pour les futurs lecteurs, car ils doivent trier plusieurs réponses similaires. À l'avenir, une fois que vous aurez gagné un peu plus de réputation, vous pourrez voter pour les réponses existantes; c'est la manière préférée de valider une approche et d'affirmer que la solution fonctionne.

— Jeremy Caney le

1

Je dois noter que, à l'occasion, les contributeurs publieront toujours un avis similaire s'ils ont une manière différente de l'expliquer ou s'ils souhaitent ajouter beaucoup plus de détails. C'est très bien. Le problème ici est que vous semblez fournir la même réponse, mais avec moins de détails, donc cela ne contribue pas beaucoup au fil.

— Jeremy Caney