Flutter InputDecoration - how to position the label over the border?

Question

I have flutter app with text field. I need to position the label above the borders like in this picture.

I have two options:

1.write this completely as a new widget

2.use TextFormField + InputDecoration

I tried the second way, this is my code:

      TextFormField(
      controller: _controller,
      decoration: InputDecoration(
                     border: OutlineInputBorder(

            borderRadius: BorderRadius.zero,
            borderSide: BorderSide(color: AppColors.borderColor, width: 1.0),
          ),
          
          floatingLabelBehavior: FloatingLabelBehavior.always,
          labelText: widget.hint
      ));

But I am unable to achieve the desired result. Is this possible or only option 1?

Solution

I'd prefer writing this completely as a new widget like

Column(
    children:[
     Text('label'),
     TextFormField(//.....),
 ],
),

Comments

[towhid]

why don't you just add another text widget above your TextFormField, it's much more painless in that way