web-dev-qa-db-fra.com

Textfield de coin arrondi sans couleur de bordure

J'ai besoin d'un coin arrondi TextField, je suis capable de le faire, mais il montre la couleur frontière par défaut. J'ai essayé de changer borderSide mais n'a pas pu changer la couleur (il était toujours noir):

       TextFormField(
                decoration: InputDecoration(
                    prefixIcon: Icon(
                      Icons.person,
                      color: Colors.white,
                    ),
                    border: OutlineInputBorder(
                      // width: 0.0 produces a thin "hairline" border
                      borderRadius: BorderRadius.all(Radius.circular(90.0)),
                      borderSide: BorderSide(color: Colors.white24)
                      //borderSide: const BorderSide(),
                    ),

                    hintStyle: TextStyle(color: Colors.white,fontFamily: "WorkSansLight"),
                    filled: true,
                    fillColor: Colors.white24,
                    hintText: 'Password'),
              ),

J'ai besoin de cela et je ne veux pas la ligne de mise au point, mais le curseur doit être blanc. J'ai essayé de tout changer en border paramètre mais toujours pas de changement.

Je veux:

enter image description here

Je reçois ça:

enter image description here

9
Farhana

Créer une bordure transparente:

      final border = OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(90.0)),
            borderSide: BorderSide(
              color: Colors.transparent,
            )
            );

Et utilisez-le dans focusedBorder et border propriétés, ajoutez également un thème pour définir le curseur et les couleurs de l'indice:

    Theme(
                  data: Theme.of(context).copyWith(
                    cursorColor: Colors.red,
                    hintColor: Colors.transparent,
                  ),
                  child: TextFormField(
                    decoration: InputDecoration(
                        focusedBorder: border,
                        border: border,
                        prefixIcon: Icon(
                          Icons.person,
                          color: Colors.white,
                        ),
                        hintStyle: TextStyle(
                            color: Colors.white, fontFamily: "WorkSansLight"),
                        filled: true,
                        fillColor: Colors.white24,
                        hintText: 'Password'),
                  ),
                ),
3
diegoveloper

Régler:

borderSide: BorderSide.none,

Un péché:

   TextFormField(
            decoration: InputDecoration(
                prefixIcon: Icon(
                  Icons.person,
                  color: Colors.white,
                ),
                border: OutlineInputBorder(
                  // width: 0.0 produces a thin "hairline" border
                  borderRadius: BorderRadius.all(Radius.circular(90.0)),
                  borderSide: BorderSide.none,
                  //borderSide: const BorderSide(),
                ),

                hintStyle: TextStyle(color: Colors.white,fontFamily: "WorkSansLight"),
                filled: true,
                fillColor: Colors.white24,
                hintText: 'Password'),
          ),
6
Nae