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

113

Das versuche ich zu machen:

Geben Sie hier die Bildbeschreibung ein

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.

Teebeutel Santa
quelle

Antworten:

74

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),
  )
Sourav Pandit
quelle
231

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',
  ),
),
Baruna gemacht
quelle
Ist es möglich, ohne das materialPaket zu importieren ? dh für CupertinoThema?
Kosiara - Bartosz Kosarzycki
Ich möchte vermeiden: InputDecoration' can't be assigned to the parameter type 'BoxDecoration'Typ Fehler
kosiara - Bartosz Kosarzycki
12

Ä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'
      ),
    ),
Sarthak Singhal
quelle
11

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

Geben Sie hier die Bildbeschreibung ein

  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.
Suragch
quelle
3

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),
      ),
    ),
  );
E. Sun.
quelle
-1

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

onChanged:(value){
}
Sachin Mishra
quelle
-2
decoration: InputDecoration(
 border:OutLineInputBorder(
 borderSide:BorderSide.none
 bordeRadius: BordeRadius.circular(20.0)
 )
)
SR Keshav
quelle
Was ist der Unterschied zwischen dieser Antwort und @E. Suns Antwort von vor einem Monat?
Jeremy Caney
Du willst etwas Neues?
SR Keshav
2
Wenn bereits eine Antwort gegeben wurde, muss diese nicht erneut gesendet werden. Dies fügt zukünftigen Lesern nur Rauschen hinzu, da sie mehrere ähnliche Antworten sortieren müssen. Wenn Sie in Zukunft ein bisschen mehr Ansehen erlangt haben, können Sie vorhandene Antworten positiv bewerten. Dies ist die bevorzugte Methode, um einen Ansatz zu validieren und zu bestätigen, dass die Lösung funktioniert.
Jeremy Caney
1
Ich möchte darauf hinweisen, dass Mitwirkende gelegentlich immer noch ähnliche Ratschläge veröffentlichen, wenn sie eine andere Art der Erklärung haben oder wesentlich mehr Details hinzufügen möchten. Das ist völlig in Ordnung. Das Problem hierbei ist, dass Sie anscheinend die gleiche Antwort geben, jedoch mit weniger Details, sodass dies nicht viel zum Thread beiträgt.
Jeremy Caney