Esto es lo que estoy tratando de hacer:

enter image description here

En los documentos de Flutter para campos de texto (https://flutter.io/text-input/) dice que puede eliminar el subrayado pasando null a la decoración. Sin embargo, eso también elimina el texto de la pista.

No quiero subrayar si el campo de texto está enfocado o no.

ACTUALIZACIÓN: respuesta aceptada actualizada para reflejar los cambios en Flutter SDK a partir de abril de 2020.

99
TeabaggingSanta 1 mar. 2018 a las 03:07

5 respuestas

La mejor respuesta

Ninguna de las respuestas anteriores funcionará para el nuevo flutter sdk ya que después de la integración de la compatibilidad con la web y el escritorio, debe especificar individualmente de esta manera

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),
  )
37
sourav pandit 2 nov. 2019 a las 06:53

Cambiar el borde enfocado a ninguno

TextField(
      decoration: new InputDecoration(
          border: InputBorder.none,
          focusedBorder: InputBorder.none,
          contentPadding: EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
          hintText: 'Subject'
      ),
    ),
10
Sarthak Singhal 13 jul. 2019 a las 14:11

Aquí hay una respuesta complementaria que muestra un código más completo:

enter image description here

  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),
      ),
    ),
  ),

Notas:

  • El fondo oscuro (código no mostrado) es Colors.teal.
  • InputDecoration también tiene una propiedad filled y fillColor, pero no pude hacer que tuvieran un radio de esquina, así que utilicé un contenedor.
9
Yushin 3 abr. 2020 a las 06:26

Estaba usando el control de aleteo TextField. Obtuve la entrada escrita por el usuario usando los siguientes métodos.

onChanged:(value){
}
0
Sachin Mishra 24 abr. 2020 a las 13:51

No encontré ninguna otra respuesta que ofrezca un radio de borde, simplemente puede hacerlo así, sin anidar Container

  TextField(
    decoration: InputDecoration(
      border: OutlineInputBorder(
        borderSide: BorderSide.none,
        borderRadius: BorderRadius.circular(20),
      ),
    ),
  );
0
E. Sun 26 abr. 2020 a las 15:01