cant remove underline while entering text in TextField widget

Issue

while entering text in text field there is an underline which persists till I am typing and goes when I close the keyboard I tried:

 TextField(
                style: TextStyle(
                  decoration: TextDecoration.none,
                  color: Colors.white,
                ),
                cursorColor: Colors.grey.withOpacity(0.8),
                decoration: InputDecoration(
                  labelText: "email",
                  labelStyle: TextStyle(decoration: TextDecoration.none),
                  hintStyle: TextStyle(
                    color: Colors.grey,
                  ),
                  hintText: "email",
                  filled: true,
                  fillColor: Colors.grey.withOpacity(0.5),
                  prefixIcon: Icon(
                    Icons.alternate_email,
                    color: Colors.grey.withOpacity(0.8),
                  ),
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(100),
                    borderSide: BorderSide.none,
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(100),
                    borderSide: BorderSide.none,
                  ),
                ),
              ),

Solution

It’s not a bug, but a default behavior of TextField. The underlining of the text as you type is related to the keyboard which means that it’s acting as a spell-checker so that you can confirm that whatever you are typing is correct. If you still want to hide the underline as you type, you need to use:

autoCorrect: false and enableSuggestions: false properties of the TextField and manually turn-off the virtual keyboard’s text suggestion option from your device / emulator’s settings.

Sample working code below when I did above:

child: TextField(
              enableSuggestions: false,
              autocorrect: false,
              style: TextStyle(
                decoration: TextDecoration.none,
                color: Colors.white,
              ),
              cursorColor: Colors.grey.withOpacity(0.8),
              decoration: InputDecoration(
                labelText: "email",
                labelStyle: TextStyle(decoration: TextDecoration.none),
                hintStyle: TextStyle(
                  color: Colors.grey,
                ),
                hintText: "email",
                filled: true,
                fillColor: Colors.grey.withOpacity(0.5),
                prefixIcon: Icon(
                  Icons.alternate_email,
                  color: Colors.grey.withOpacity(0.8),
                ),
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(100),
                  borderSide: BorderSide.none,
                ),
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(100),
                  borderSide: BorderSide.none,
                ),
              ),
            ),

And then I was able to type in without the underline.

Hope this answers your question.

Answered By – Darshan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0