How to show a Hint Text above the Text Field

Question

I am trying to accomplish showing a HintText on top of the textField. I have tried using a Labeltext but I can't get it to do this. This is my code :

@override
Widget build(BuildContext context) {
return TextFormField(
  keyboardType: textInputType,
  controller: controller,
  obscureText: obscureText,
  autocorrect: false,
  autofocus: autofocus,
  textAlign: TextAlign.center,
  cursorColor: BPColor.black,
  style: TextStyle(
    color: textColor,
    fontSize: 16,
  ),
  decoration: InputDecoration(
    hintText: hintText,
    fillColor: color,
    filled: true,
    hintStyle: TextStyle(color: textColor),
    contentPadding: EdgeInsets.all(10),
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.white),
      borderRadius: BorderRadius.circular(0),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.white),
      borderRadius: BorderRadius.circular(0),
    ),
    errorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.white),
      borderRadius: BorderRadius.circular(0),
    ),
    disabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.white),
      borderRadius: BorderRadius.circular(0),
    ),
  ),
);
}

This is the output of my TextField code:

I need to show the Email Hint outside of the TextField Box. Is there a way to accomplish this ? Or do I have to create a label outside of the TextField ?

When I add LabelText:

It shows like this :

Does not show right .

Answer 1

Fot putting lable outside the textfield you can use Column and put Text and TextField as a widget over there. Use below code for reference.

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('blahf blahh'),
        TextFormField(
          keyboardType: textInputType,
          controller: controller,
          obscureText: obscureText,
          autocorrect: false,
          autofocus: autofocus,
          textAlign: TextAlign.center,
          cursorColor: BPColor.black,
          style: TextStyle(
            color: textColor,
            fontSize: 16,
          ),
          decoration: InputDecoration(
            hintText: hintText,
            fillColor: color,
            filled: true,
            hintStyle: TextStyle(color: textColor),
            contentPadding: EdgeInsets.all(10),
            enabledBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.white),
              borderRadius: BorderRadius.circular(0),
            ),
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.white),
              borderRadius: BorderRadius.circular(0),
            ),
            errorBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.white),
              borderRadius: BorderRadius.circular(0),
            ),
            disabledBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.white),
              borderRadius: BorderRadius.circular(0),
            ),
          ),
        )
      ],
    );
  }

Answer 2

What's wrong with this:

TextFormField(
  decoration: InputDecoration(labelText: 'Your hint'),
)