How to create a fixed Text label in flutter

Viewed 5731

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:

enter image description here

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')),
2 Answers

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

enter image description here

enter image description here

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