CODEWITHSUNDEEP
flutter
nidhi patnaik
nidhi patnaik

Reputation: 49

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

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

Upvotes: 0

Views: 736

Answers (2)

jojo
jojo

Reputation: 21

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

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

for editable TextFild

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

Upvotes: 2

Kaushik Chandru
Kaushik Chandru

Reputation: 17802

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

Upvotes: 0

Related Questions