Flattern: Wie erstelle ich ein TextField mit HintText, aber ohne Unterstreichung?

Das versuche ich zu machen:

In den Flutter-Dokumenten für Textfelder ( https://flutter.io/text-input/ ) heißt es, dass Sie die Unterstreichung entfernen können, indem Sie nullan die Dekoration übergeben. Dadurch wird jedoch auch der Hinweistext entfernt.

Ich möchte nicht unterstreichen, ob das Textfeld fokussiert ist oder nicht.

UPDATE: Aktualisierte akzeptierte Antwort, um Änderungen im Flutter SDK ab April 2020 widerzuspiegeln.

Keine der oben genannten Antworten funktioniert für neue Flutter-SDKs, da Sie nach der Integration der Web- und Desktop-Unterstützung diese individuell festlegen müssen

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

Mach es so:

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

oder wenn Sie andere Dinge wie Symbol benötigen, setzen Sie den Rahmen mit InputBorder.none

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

Ändern Sie den fokussierten Rand in "Keine"

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

Hier ist eine ergänzende Antwort, die einen vollständigeren Code zeigt:

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

Anmerkungen:

• Der dunkle Hintergrund (Code nicht gezeigt) ist Colors.teal.
• InputDecorationhat auch eine filledund fillColorEigenschaft, aber ich konnte sie nicht dazu bringen, einen Eckradius zu haben, also habe ich stattdessen einen Container verwendet.

Ich fand keine andere Antwort gibt einen Randradius, Sie können es einfach so machen, nicht verschachtelt Container

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

Ich habe die TextFieldFlattersteuerung verwendet. Ich habe die Benutzereingabe mit den folgenden Methoden eingegeben.

onChanged:(value){
}

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