CODEWITHSUNDEEP
flutterdart
Cristian F. Bustos
Cristian F. Bustos

Reputation: 503

Flutter - Hide hint text when Text Field have focus

I need to know how to hide the hint text when I focus on the text field. This is my code:

class _ContactoState extends State<Contacto> {
  FocusNode focusMsj;

  @override
  void initState() {
    super.initState();

    focusMsj = FocusNode();
    focusMsj.addListener(() {
      if (!focusMsj.hasFocus) {
        FocusScope.of(context).requestFocus(focusMsj);
      }
    });
  }

TextField(
          focusNode: focusMsj,
            hintText: focusMsj.hasFocus ? ' ' : 'Hint Text',)

return WillPopScope(
          child: Listener(
            onPointerUp: (e) {
              focusMsj.hasFocus ? FocusScope.of(context).requestFocus(FocusNode()): '';
            },

Thank you

Upvotes: 21

Views: 16523

Answers (7)

Alexander Seednov
Alexander Seednov

Reputation: 336

One more answer, but with some clarifications. As in some other answers, you can use floatingLabelBehavior: FloatingLabelBehavior.never to achieve this.

But for this feature you need to use labelText instead of hintText. This property has other appearance place then hintText, but it can be fixed by alignLabelWithHint property. So full example here:

TextField(
   decoration: InputDecoration(
       labelText: ...,  // your label-hint text
       labelStyle: ..., // your label-hint textStyle
       floatingLabelBehavior: FloatingLabelBehavior.never,
       alignLabelWithHint: true,
   ),
),

Or you can use custom widget instead of default label:

TextField(
   decoration: InputDecoration(
       label: ...,  // your label-hint widget
       floatingLabelBehavior: FloatingLabelBehavior.never,
       alignLabelWithHint: true,
   ),
),

Result

Upvotes: 0

TechSatya
TechSatya

Reputation: 339

Simply, don't add the hintText in the InputDecoration and mention only the labelText: 'Label' alongside labelStyle if you want to change the style of the label.

TextField(
    decoration: InputDecoration(
        labelText: "Label",
        labelStyle: TextStyle(
          color: Colors.blueGrey,
        ),
        floatingLabelBehavior: FloatingLabelBehavior.never,
    )
)

Upvotes: 6

Confiance
Confiance

Reputation: 926

This works perfectly for me. Just add on InputDecoration ( floatingLabelBehavior: FloatingLabelBehavior.never) of TextField or TextFormField.

TextFormField( controller:_controller, decoration : InputDecoration( label: Text('Entrer your code here '), floatingLabelBehavior: FloatingLabelBehavior.never, ), );

Upvotes: 0

Elmar
Elmar

Reputation: 4397

My understanding is there is no way to implement it without custom code. Hiding hintText when focused with "border: InputBorder.none," gives perfect login widget example as FloatingLabelBehavior and having animated labelText just won't do. floatingLabelBehavior: FloatingLabelBehavior.never - helps in some situtations but not the exact thing we wanted. If you have labelText and hintText FloatingLabelBehavior.never is helpful to control hiding and showing hintText and animating labelText above the field. WIth custom code we have

String emailHintText = "E-mail";

on the top of state class. Then:

Container(
             decoration: BoxDecoration(
                      border: Border.all(color: white),
                      borderRadius: BorderRadius.circular(5)),
             child: Padding(
                    padding: EdgeInsets.all(10),
                child:      

    Focus(
          onFocusChange: (hasFocus) {
                if (hasFocus) {
                        setState(() {});
                        emailHintText = "";
                      } 
                else {
                        setState(() {});
                        emailHintText = "E-mail";
                      }
                    },
          child: TextFormField(
                     decoration: InputDecoration(    
                                    hintText: emailHintText,
                                    border: InputBorder.none))));

Now, you should know that using setState is a bit costly operation and may not be the best option if not used for very important functionalities.

Upvotes: 1

Tasneem Haider
Tasneem Haider

Reputation: 379

One simple solution you can try is define labelText with FloatingBehavior.never

TextField(
    decoration: InputDecoration(
        labelText: "Search",
        floatingLabelBehavior: FloatingLabelBehavior.never,
    )
)

HintText will be shown when it is not focussed. On focus, hint text will disappear.

Upvotes: 5

fses91
fses91

Reputation: 1870

There is a property for that:

TextField(decoration: InputDecoration(hasFloatingPlaceholder: false));

Edit: The version above is deprecated, the new version is:

TextField(decoration: InputDecoration(floatingLabelBehavior: FloatingLabelBehavior.never,),),

Upvotes: 18

Mohamed Gaber
Mohamed Gaber

Reputation: 1745

For doing that matter you need to make something like that 

class Play extends StatefulWidget {
  @override
  _PlayState createState() => _PlayState();
}

class _PlayState extends State<Play> {
  FocusNode focusNode = FocusNode();
  String hintText = 'Hello , iam Hint';
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    focusNode.addListener(() {
      if (focusNode.hasFocus) {
        hintText = '';
      } else {
        hintText = 'Hello , iam Hint';
      }
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(onPressed: () {
        print(focusNode.hasFocus);
      }),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              focusNode: focusNode,
              decoration: InputDecoration(
                hintText: hintText,
              ),
            ),
            TextField(
              decoration: InputDecoration(
                hintText: '!!',
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Shortly i listened to TextField by its focusNode property . When TextField has focus i make hintText property equal empty String value

Upvotes: 24

Related Questions