TextField label border position

Question

I am making a form with several text fields. I need to have a label above each field displayed.I don't want to have to click in the field to show the text above each field. They need to be fixed.

Using label text, the label only shows when the user clicks in the field, I need that to be fixed.

I tried:

static TextField user_name() {
            return TextField(
                maxLines: 2,
                decoration: InputDecoration(
                  labelText: 'Full Name',
                  border: OutlineInputBorder(),          
                ));
}

But only shows 'Full Name' when the user clicks on the field.

Answer 1

You could use a TextFormFied like so:

TextFormField(
  decoration: InputDecoration(
    floatingLabelBehavior:FloatingLabelBehavior.always,
  ),
);

Answer 2

 static TextField user_name(){
    return TextField(
        maxLines: 2,
        decoration: InputDecoration(
        // lableText:"Full name",
          hintText:'Full name',

          border: OutlineInputBorder(),

        ));
  }

You can get your answer through hinttext.

Answer 3

I am also new to flutter. I just suggest another approach may possible do that.

I used a Stack to allow the label(Text) to cover the TextField. But there is a problem after as the Text color will not change after I focus the TextField. Then I use the FocusNode to listen the focus change and call setState to update.

class _MyHomePageState extends State<MyHomePage> {
  FocusNode _focusNode = new FocusNode();

  @override
  void initState() {
    super.initState();
    //Add Listener to know when is updated focus
    _focusNode.addListener(_onLoginUserNameFocusChange);
  }

  @override
  void dispose() {
    //Dispose Listener to know when is updated focus
    _focusNode.addListener(_onLoginUserNameFocusChange);
    super.dispose();
  }

  void _onLoginUserNameFocusChange() {
    //Force updated once if focus changed
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(children: <Widget>[

            //original one, just to check the style
            Padding(
                padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
                child: TextField(
                    maxLines: 2,
                    decoration: InputDecoration(
                      labelText: 'Full Name',
                      border: OutlineInputBorder(),
                    ))),

            //The 5,5,5,5 padding just for easier look, you can start from the Stack
            Padding(
                padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
                child: Stack( //try to allow drawing label Text over the container
                  children: <Widget>[
                    Padding(
                      // this padding is to allow the Text draw on the top of the border
                      //since default font size is 12, half of it
                        padding: EdgeInsets.fromLTRB(0, 6, 0, 0),
                        child: TextField(// the main TextField
                          maxLines: 2,
                          decoration: InputDecoration(
                            border: OutlineInputBorder(),
                          ),
                          //This is used to listen the focus of this TextField
                          focusNode: _focusNode,
                        )),
                    Container(
                      //position label
                      margin: EdgeInsets.fromLTRB(7, 0, 0, 0),
                      padding: EdgeInsets.fromLTRB(4, 0, 4, 0), // input outline default seems using 4.0 as padding from their source
                      child: Text(
                        'Full Name',
                        style: TextStyle(
                          fontSize: 12,
                          color: _focusNode.hasFocus ? Colors.blue : Colors.grey,
                        ),
                      ),
                      color: Colors.white, //just to cover the intercepted border 
                    )
                  ],
                )),
          ]),
        ));
  }
}