Menu
This is what I'm trying to make:
In the Flutter docs for Text Fields (https://flutter.io/text-input/) it says you can remove the underline by passing null to the decoration. However, that also gets rid of the hint text.
I do not want any underline whether the text field is focused or not.
UPDATE: updated accepted answer to reflect changes in Flutter SDK as of April 2020.
677
To remove TextField underline/border in Flutter, you can simply set the border property to InputBorder. none. This will remove the underline for all states such as Focused, Enabled, Error, Disabled.
You can remove the double yellow lines by placing your Text widget inside a Material widget or a widget that contains Material itself like Scaffold, Card, Dialog, Drawer, etc. Note: Don't forget to import 'package:flutter/material. dart' at the top of your Dart file.
By default, a TextField is decorated with an underline. You can add a label, icon, inline hint text, and error text by supplying an InputDecoration as the decoration property of the TextField . To remove the decoration entirely (including the underline and the space reserved for the label), set the decoration to null.
As of flutter 1.17. 5 (and still the same in 2. X) to completely remove or manipulate the padding manually, first you must set isDense: true and then you can adjust the contentPadding as you wanted or apply padding on the parent widget instead. TextField has not an inputDecorationTheme attribute.
Do it like this:
TextField( decoration: new InputDecoration.collapsed( hintText: 'Username' ), ), or if you need other stuff like icon, set the border with InputBorder.none
InputDecoration( border: InputBorder.none, hintText: 'Username', ), ), new flutter sdk since after integration of web and desktop support you need to specify individually like this
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: "Hint here"), ) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
