Flutter : HintText가 있지만 밑줄이없는 TextField를 만드는 방법은 무엇입니까?

이것이 내가 만들려고하는 것입니다.

텍스트 필드에 대한 Flutter 문서 ( https://flutter.io/text-input/ ) null에서 장식 으로 전달하여 밑줄을 제거 할 수 있다고 말합니다 . 그러나 그것은 또한 힌트 텍스트를 제거합니다.

텍스트 필드의 포커스 여부에 관계없이 밑줄을 원하지 않습니다.

업데이트 : 2020 년 4 월 현재 Flutter SDK의 변경 사항을 반영하기 위해 수락 된 답변이 업데이트되었습니다.

웹 및 데스크톱 지원을 통합 한 후에는 이와 같이 개별적으로 지정해야하기 때문에 위의 답변이 아닌 것은 새로운 flutter sdk에서 작동합니다.

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

다음과 같이하십시오.

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

또는 아이콘과 같은 다른 항목이 필요한 경우 테두리를 InputBorder.none

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

초점을 맞춘 테두리를 없음으로 변경

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

다음은 더 완전한 코드를 보여주는 보충 답변입니다.

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

노트:

• 어두운 배경 (코드가 표시되지 않음)은 Colors.teal입니다.
• InputDecoration또한 filled및 fillColor속성이 있지만 모서리 반경을 가질 수 없으므로 대신 컨테이너를 사용했습니다.

나는 다른 대답이 테두리 반경을 제공하지 않는다는 것을 알았습니다. 이렇게 간단하게 할 수 있습니다. Container

  TextField(
    decoration: InputDecoration(
      border: OutlineInputBorder(
        borderSide: BorderSide.none,
        borderRadius: BorderRadius.circular(20),
      ),
    ),
  );

나는 TextFieldflutter 컨트롤 을 사용하고 있었는데 아래 방법을 사용하여 사용자가 입력 한 입력을 받았습니다.

onChanged:(value){
}

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