Flutter: How to show or hide a label/text widget when a textformfield get or lost focus?

Question

I am new with flutter.

I am making a user registration form, I want to achieve the following visual effect:

When a TextFormField is normal on the form, it looks like this:

But I want the following, when the textformfield is in "focus". When the user is typing it looks like this:

This is my average textFormField

TextFormField(
                                    initialValue: name,
                                    onChanged: (val) {
                                      setState(() {
                                        name = val;
                                        print(name);
                                      });
                                    },
                                    decoration: InputDecoration(
                                      hintText: "Nombres",
                                      hintStyle: TextStyle(
                                          fontSize: scalador.setSp(22) * 2.63,
                                          color: Color(0xFF949494)),
                                    ),
                                    style: TextStyle(
                                      color: Color(0xFF242427),
                                      fontSize: scalador.setSp(22) * 2.63,
                                    ),
                                    validator: (value) {
                                      if (value.isEmpty) {
                                        return 'Por favor ingrese su(s) Nombre(s)';
                                      } else {
                                        if (value.length < 4)
                                          return 'El nombre debe tener mas de 4 caracteres';
                                      }
                                      return null;
                                    }),

any ideas?

Answer 1

add labelText: 'Nombres', Property into InputDecoration:

decoration: InputDecoration(
                                  hintText: "Nombres",
                                  hintStyle: TextStyle(
                                      fontSize: scalador.setSp(22) * 2.63,
                                      color: Color(0xFF949494)),
                                ),
                                 labelText: 'Nombres',
                             )

source: https://api.flutter.dev/flutter/material/TextFormField-class.html

Answer 2

To add the desired textformfield in "focus" detail, you will need to include several things. To begin with, you will need a labelText which will be set to the string of your choice. In your case, it would probably be: labelText: "Nombres". Next, you will need an enabledBorder: which you can assign to OutlineInputBorder(in which you can specify border radius, border Side(color)) to your liking. Once you have the enabledBorder for when the user does not have it in "focus" then you will need focusedBorder: in which again you will assign to OutlineInputBorder() similar to enabledBorder. Lastly, you will need border: in which you can give it OutlineInputBorder(and your desired borderRadius inside).

This is an example for your reference

Padding(
  padding: EdgeInsets.all(10),
  child: new TextFormField(
    decoration: new InputDecoration(
      labelText: "Name",
      labelStyle: TextStyle(
        color: Color(0xFF264653),
      ),
      fillColor: Colors.white,
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(25.0),
        borderSide: BorderSide(
          color: Color(0xFF264653),
        ),
      ),
      focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(25.0),
          borderSide: BorderSide(color: Color(0xFF264653))),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(25.0),
      ),
    ),
  ),
),

Depending on what you will be doing, I recommend checking out this article: https://medium.com/swlh/working-with-forms-in-flutter-a176cca9449a and/or
https://medium.com/@mahmudahsan/how-to-create-validate-and-save-form-in-flutter-e80b4d2a70a4