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.

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

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

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

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.

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

-1

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

onChanged:(value){
}

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

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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.