3

I am currently working on an app design in Flutter, and struggling with this seemingly easy problem. When creating the TextFormField below, the input text is always underlined, no matter of what I've tried. The only thing I want is text without this ugly underline.

Possibly the reason for this issue is that Android (I'm using an Android Emulator) automatically underlines text in input forms like this one, but this is just a thought that came to my mind and I am not sure if this is the real reason behind my struggle with the TextFormField. Anyway, here is my code and what I get.

Here is how my TextFormField looks at the moment

Container(
              margin: EdgeInsets.only(top: 10, left: 20, right: 30),
              child: Card(
                  elevation: 5.0,
                  child: Container(
                    child: TextFormField(
                      style: TextStyle(
                          fontSize: 18.0,
                          color: const Color(0xFF757575),
                          decoration: TextDecoration.none,
                          fontWeight: FontWeight.w500,
                          fontFamily: 'Montserrat'),
                      key: formKey,
                      onSaved: (text) => _input = text,
                      decoration: InputDecoration(
                        focusedBorder: InputBorder.none,
                        enabledBorder: InputBorder.none,
                        border: InputBorder.none,
                        prefixIcon: Icon(
                          Feather.getIconData("search"),
                          color: Colors.orange,
                        ),
                      ),
                    ),
                  ))),
creativecreatorormaybenot
  • 114,516
  • 58
  • 291
  • 402
Matthias Maier
  • 93
  • 2
  • 6
  • can you show an example of actual and desired output? – cccnrc Aug 14 '19 at 16:49
  • That's interesting. `decoration: TextDecoration.none` surely has to do the trick here. Make sure it's not a result of Predictive Text on Android - turn it off from your Keyboard Settings and see if the underline is still there. – mertcanb Aug 14 '19 at 17:07

2 Answers2

9

This is done by the keyboard you are using on Android automatically.

For users who have disabled text correction, this will not show up.

On an Android emulator you can turn it off in the keyboard settings: Settings -> System -> Languages & Input -> Virtual Keyboard -> Gboard -> Text correction.
The specific settings you are looking for are Show suggestion strip and Auto-correction. If you turn these off, you will not be seeing the underlining anymore.

Flutter

Having said that, this is not related to Flutter and you should probably not turn off "this ugly underline" as users expect to have this functionality.
You could probably work about it by using SelectableText widgets instead and manually recording the keyboard input, however, there is not really a point to do that and you would get functionality that does not feel familiar to your users.

creativecreatorormaybenot
  • 114,516
  • 58
  • 291
  • 402
1

Fix in this case:

 autocorrect: false,
 enableSuggestions: false,

...hot restart (is not hot reload)

Full example:

 TextField(
            controller: controller,
            keyboardType: TextInputType.text,
            textInputAction: TextInputAction.search,
            maxLines: 1,
            maxLength: 25,
            autofocus: true,
            cursorHeight: 29,
            cursorWidth: 2,
            autocorrect: false,
            enableSuggestions: false,
            textAlignVertical: TextAlignVertical.center,
            style: TextStyle(
              decoration: TextDecoration.none,
              height: 1.4,
              color: Colors.white,
              fontSize: 19,
            ),
            onChanged: (value) {
              BlocProvider.of<SearchBloc>(context).add(SearchByName(value));
            },
            textAlign: TextAlign.left,
            decoration: new InputDecoration(
              isCollapsed: true,
              counterText: "",
              hintText: "Search",
              contentPadding: const EdgeInsets.only(left: 10),
              alignLabelWithHint: false,
              hintStyle: TextStyle(
                height: 1.5,
                color: Theme.of(context).appBarTheme.actionsIconTheme!.color,
                fontSize: 19,
                fontFamily: "Arial Rounded",
              ),
              fillColor: Colors.transparent,
              filled: false,
              isDense: false,
              border: InputBorder.none
            ),
      ),
Rostyslav N
  • 68
  • 5