Flutter: как сделать TextField с HintText, но без подчеркивания?

Вот что я пытаюсь сделать:

enter image description here

В документах Flutter для текстовых полей (https://flutter.io/text-input/) говорится, что вы можете удалить подчеркивание, передав null значение декорации. Тем не менее, это также избавляет от текста подсказки.

Я не хочу подчеркивать, сфокусировано ли текстовое поле или нет.

ОБНОВЛЕНИЕ: очевидно, это можно легко сделать с помощью

new InputDecoration.collapsed(...),

который держит подсказку, не рисуя границы.

Ответы

Ответ 1

Сделай это так:

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

или если вам нужны другие вещи, такие как значок, установите границу с помощью InputBorder.none

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

Ответ 2

изменить сфокусированную границу на ноль

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

Ответ 3

Вот дополнительный ответ, который показывает более полный код:

enter image description here

  Container(
    decoration: BoxDecoration(
      color: Colors.tealAccent,
      borderRadius: BorderRadius.all(Radius.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),
      ),
    ),
  ),

Примечание:

  • Темный фон (код не показан) - Colors.teal.
  • У InputDecoration также есть свойства filled и fillColor, но я не мог получить для них angular радиус, поэтому вместо этого я использовал контейнер.