How to create a fixed Text label in flutter

Question

I would like to create a label on a Textfield that remains fixed in position. I have an app on my phone which has labels as shown below, and am trying to design something similar:

As seen, the labels are always there fixed in position whether someone typed in the field or not. I typed 'Jay' in the Customer Contact Field With my current code the label starts inside the field then moves to hang at the border. Or maybe its not possible with flutter?

child:TextField(
       decoration: InputDecoration(
       labelText: 'Customer Contact')),

Answer 1

Try this code, I hope it helps you

Widget build(BuildContext context) {
   
    GlobalKey<FormState> formstate=GlobalKey<FormState>();
    return Scaffold( 
body:Form(
            key:formstate,
  child:Column(children: [
TextFormField(
         initialValue: "jay",
      readOnly: true,
InputDecoration(
    contentPadding: EdgeInsets.zero,
    label: Container(
        child: Text(
            " Customer Contact",
        ),
    ),
    floatingLabelBehavior: FloatingLabelBehavior.always,
), TextFormField(
                      
                      decoration: InputDecoration(
hintText: "jay",
label: Text("Customer Contact Phone Number"),
 floatingLabelBehavior: FloatingLabelBehavior.always,
),
                      )
])));}

Answer 2

I found some problems with the solutions above. Then, I went to build a Text when, on tap, focus on the TextField. You can see more details on the documentation. The below example is almost a ctrl + c ctrl + v

class _MainAppState extends State<MainApp> {
  late FocusNode input;
  @override
  void initState() {
    input = FocusNode();
  }

  @override
  void dispose() {
    // Clean up the focus node when the Form is disposed.
    input.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
      child: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(43),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              GestureDetector(
                onTap: () => input.requestFocus(),
                child: const Text("Texto"),
              ),
              TextField(
                focusNode: input,
              )
            ],
          ),
        ),
      ),
    )));
  }
}

Answer 3

You should keep everything inside the TextField so that it can manage automatically the validation flow style.

InputDecoration(
    contentPadding: EdgeInsets.zero,
    label: Container(
        child: Text(
            widget.title,
        ),
    ),
    floatingLabelBehavior: FloatingLabelBehavior.always,
)

Answer 4

You can add Text and TextField into Column widget to achieve this:

    Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Text('Customer Contact', textAlign: TextAlign.left),
        TextField(
          cursorColor: Colors.white,
          decoration: InputDecoration(hintText: 'Enter here'),
        )
      ],
    );