Question: I tried creating a widget with label embedded in it's border by using stack to combine a container and another container position in it's boundary.
But, the result is not very clean as I need different color to be filled in both the containers.

Flutter widget that I am trying to create

[![](https://i.stack.imgur.com/cXSup.png)](https://i.stack.imgur.com/cXSup.png)

Answer: 
with a TextField it is possible to create a widget that can hold a text and have a border with a text embedded in it.

for **not editable** TextFile

```dart
TextField(
  decoration: InputDecoration(
    label: Text("label", style: TextStyle(color: Colors.black),),
    disabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.blue, width: 2)
    ),
    isDense: true,
    enabled: false
  ),
  controller: TextEditingController(text: "some Text"),
)

```

Pickture of TextField
[![](https://i.stack.imgur.com/aZokA.png)](https://i.stack.imgur.com/aZokA.png)

for **editable** TextFild

```dart
TextField(
  decoration: InputDecoration(
    label: Text("label", style: TextStyle(color: Colors.black),),
    focusedBorder: OutlineInputBorder( // for setting focus collor
      borderSide: BorderSide(color: Colors.blue, width: 2)
    ),
    border: OutlineInputBorder(),
    isDense: true,
  ),
  controller: TextEditingController(text: "some Text"),
)

```
Try this

```
TextField(
 decoration: InputDecoration(
 hintText: "Hint text here",
 floatingLabelBehavior: FloatingLabelBehavior.always,   
  label: Text("label",
   style: TextStyle(
     color: Colors.black),),
  disabledBorder:OutlineInputBorder(
    borderSide: BorderSide(
    color: Colors.blue,
     width: 2)),
  enabledBorder:OutlineInputBorder(
    borderSide: BorderSide(
    color: Colors.blue,width: 2),),
  border: OutlineInputBorder(
   borderSide: BorderSide(color: Colors.blue,
      width: 2),),
  isDense: true,
  enabled: true),
),

```