Is there a widget in flutter to show a container with a label embedded in it's border?-CodePudding

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

CodePudding user response：

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.

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

CodePudding user response：

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