How to make a TextField with HintText but no Underline

0 votes

This is what I'm trying to make:

enter image description here

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.

Mar 21, 2023 in Flutter by Ashwini
• 5,430 points
1,599 views

1 answer to this question.

0 votes

You can achieve this by using the InputDecoration class to customize the appearance of your TextField. Here's an example:

TextField(
  decoration: InputDecoration(
    hintText: "Enter your text here",
    border: InputBorder.none,
    focusedBorder: InputBorder.none,
    enabledBorder: InputBorder.none,
    errorBorder: InputBorder.none,
    disabledBorder: InputBorder.none,
  ),
);
 

By setting all the borders to InputBorder.none, you can remove the underline from your TextField. The hintText will still be visible as expected.

answered Mar 21, 2023 by Anushi

Related Questions In Flutter

0 votes
1 answer

How to change textField underline color?

You can change the color of the ...READ MORE

answered Mar 30, 2023 in Flutter by venky
10,519 views
0 votes
1 answer

How do you change the value inside of a textfield flutter?

To change the value inside a TextField ...READ MORE

answered Mar 26, 2023 in Flutter by Tej
6,598 views
0 votes
1 answer

How to dismiss an AlertDialog on a FlatButton click?

To dismiss the AlertDialog when the FlatButton ...READ MORE

answered Mar 26, 2023 in Flutter by pooja
1,615 views
0 votes
1 answer

How to create number input field in Flutter?

Yes, Flutter has a built-in widget called ...READ MORE

answered Mar 1, 2023 in Android by vishalini
3,616 views
0 votes
1 answer

How do I supply an initial value to a text field?

To supply an initial value to a ...READ MORE

answered Mar 9, 2023 in Android by pooja
5,281 views
0 votes
1 answer

Dart_LoadScriptFromKernel: The binary program does not contain 'main'.

Hi@akhtar, You need to add the main() function ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
3,215 views
0 votes
1 answer

How to install Dart in Windows system?

Hi@akhtar, Dart is the programming language used to code Flutter apps. ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
784 views
0 votes
1 answer

How can I change the app display name build with Flutter?

Yes, you can change the app display ...READ MORE

answered Mar 21, 2023 in Flutter by venky
1,940 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP