Flutter - 当文本字段有焦点时隐藏提示文本

Question

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

Answer 1

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

Answer 2

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,),),

Answer 3

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.

Answer 4

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.

Answer 5

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, ), );

Answer 6

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,
    )
)