Flutter: como fazer um TextField com HintText mas sem sublinhado?

116

Isso é o que estou tentando fazer:

insira a descrição da imagem aqui

Na documentação do Flutter para campos de texto ( https://flutter.io/text-input/ ) diz que você pode remover o sublinhado passando nullpara a decoração. No entanto, isso também elimina o texto da dica.

Não quero sublinhar se o campo de texto está focado ou não.

ATUALIZAÇÃO: resposta aceita atualizada para refletir as alterações no Flutter SDK em abril de 2020.

TeabaggingSanta
fonte

Respostas:

79

Nenhuma das respostas acima funcionará para o novo flutter sdk, uma vez que após a integração do suporte web e desktop você precisa especificar individualmente como este

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
fonte
232

Faça isso deste modo:

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

ou se você precisar de outras coisas como ícone, defina a borda com InputBorder.none

InputDecoration(
    border: InputBorder.none,
    hintText: 'Username',
  ),
),
Made Baruna
fonte
É possível fazer isso sem importar o materialpacote? ou seja, para o Cupertinotema?
Kosiara - Bartosz Kosarzycki
Eu gostaria de evitar: InputDecoration' can't be assigned to the parameter type 'BoxDecoration'erro de tipo
kosiara - Bartosz Kosarzycki
13

mude a borda em foco para nenhum

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
fonte
12

Aqui está uma resposta complementar que mostra um código mais completo:

insira a descrição da imagem aqui

  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:

  • O fundo escuro (código não mostrado) é Colors.teal.
  • InputDecorationtambém tem a propriedade fillede fillColor, mas não consegui que eles tivessem um raio de canto, então usei um contêiner.
Suragch
fonte
3

Não encontrei nenhuma outra resposta que dá um raio de borda, você pode simplesmente fazer assim, sem aninhado Container

  TextField(
    decoration: InputDecoration(
      border: OutlineInputBorder(
        borderSide: BorderSide.none,
        borderRadius: BorderRadius.circular(20),
      ),
    ),
  );
É um
fonte
-1

Eu estava usando o TextFieldcontrole de vibração. O usuário digitou a entrada usando os métodos abaixo.

onChanged:(value){
}
Sachin Mishra
fonte
-2
decoration: InputDecoration(
 border:OutLineInputBorder(
 borderSide:BorderSide.none
 bordeRadius: BordeRadius.circular(20.0)
 )
)
SR Keshav
fonte
Qual é a diferença entre esta resposta e @E. A resposta da Sun de um mês atrás?
Jeremy Caney
Você quer algo novo?
SR Keshav
2
Se uma resposta já foi fornecida, não há necessidade de enviá-la novamente. Isso apenas adiciona ruído para futuros leitores, pois eles precisam classificar várias respostas semelhantes. No futuro, depois de ganhar um pouco mais de reputação, você poderá votar positivamente nas respostas existentes; essa é a forma preferida de validar uma abordagem e afirmar que a solução funciona.
Jeremy Caney
1
Devo observar que, ocasionalmente, os colaboradores ainda postarão um conselho semelhante se tiverem uma maneira diferente de explicá-lo ou se quiserem adicionar mais detalhes consideráveis. Isso é totalmente bom. O problema aqui é que você parece estar fornecendo a mesma resposta, mas com menos detalhes, portanto, não contribui muito para o tópico.
Jeremy Caney