How to always show hint in text field not only when it is clicked in flutter?

Question

I have a custom text field but as shown in the picture, the bottom text fields looks so vague and empty, I'd like to keep the hint showing even if the field is not focused, how do I achieve that in flutter?

here is my widget code:

 Container(
                    margin: EdgeInsets.all(20),
                    child: TextFormField(
                      autofocus: true,
                      textAlign: TextAlign.right,
                      decoration: InputDecoration(
                          enabledBorder: const OutlineInputBorder(
                            borderSide: const BorderSide(color: Color(0xff0E9447), width: 2.0),
                          ),
                          focusedBorder: const OutlineInputBorder(
                            borderSide: const BorderSide(color: Color(0xff0E9447), width: 2.0),
                          ),
                          hintText: AppStrings.email,
                          labelText: AppStrings.email,
                          alignLabelWithHint: true,

                          hintStyle: TextStyle(color: AppColors.primaryColorLight),
                          ),
                    ),
                  ),

Answer 1

If you would like the label to be visible at the top of the TextField, and the hint displayed at the same time you can simply add:

floatingLabelBehavior: FloatingLabelBehavior.always

to the TextFields InputDecoration (decoration).

(At the time of writing this, there is a bug that will only show the hint and suffix upon focus, this has been fixed in a very recent PR and will be available shortly, see GitHub issue)

Full Example

TextFormField(
      controller: textController,
      style: theme.textTheme.bodyText2,
      keyboardType: keyboardType ?? TextInputType.number,
      enableInteractiveSelection: false,
      decoration: InputDecoration(
          labelText: labelText,
          labelStyle: theme.textTheme.headline6,
          suffixText: suffixText ?? '',
          border: OutlineInputBorder(
            borderSide:
                BorderSide(color: theme.textTheme.bodyText2.color, width: 2),
          ),
          hintText: '0.0',
          floatingLabelBehavior: FloatingLabelBehavior.always),
      validator: (value) {
        if (value.isEmpty) {
          return 'Please enter some text';
        }
        return null;
      },
      onChanged: (String text) => onChange(text),
    );

Answer 2

There is a way around this. Use the labelText property and set floatingLabelBehavior: FloatingLabelBehavior.never.

This way you will always see the hint and when the User clicks on the TextField, it goes away.

Answer 3

Ideally in Flutter you cannot do this as both hintText and labelText behave in two different ways. labelText is shown as hintText as long as the user does not focus on it. As soon as the user clicks on the TextField, the labelText animates to a specific position whereas a hintText remains visible until the user types something.

So using labelText and hintText together, does not make any sense as the TextField will wipe of the hintText while animating the label.

However with some extra effort, you can use Stack widget to solve your problem.

Declare a class variable (a variable within the concerned class, outside any block of code) to store a TextEditingController.

TextEditingController _controller;

And initialize in your class' initState(),

_controller= TextEditingController();

Solution Code:

    Container(
                    margin: EdgeInsets.all(20),
                    child: Stack(
                        children : <Widget>[
                          TextFormField(
                            autofocus: true,
                            textAlign: TextAlign.right,
                            decoration: InputDecoration(
                            enabledBorder: const OutlineInputBorder(
                            borderSide: const BorderSide(color: Color(0xff0E9447), width: 2.0),
                          ),
                          focusedBorder: const OutlineInputBorder(
                            borderSide: const BorderSide(color: Color(0xff0E9447), width: 2.0),
                          ),
                          labelText: AppStrings.email,
                          alignLabelWithHint: true,

                          hintStyle: TextStyle(color: AppColors.primaryColorLight),
                          ),
                    ),
                   (_controller.text=="")
            ?
            Text(
              AppStrings.email,
              style: TextStyle(
                color: Colors.grey
           // Style it according to your requirement / To make it look like hintText
         ),
       )
            :
            Container();
               ],
             ),
                  ),

Basic Logic of the above code: If the TextField does not have any text then display the (hint) Text widget else don't display anything.