How to create a text border with embedded text and how to add multiple text fields inside the box?

Question

I want to achieve the following text box but I'm stuck. I have added the border with the embedded text but I am not able to add multiple text fields like the screenshots within the bordered box. Please help. this is what I want to achieve

Answer 1

Show what you have already tried?

For the Text you could maybe work with a TextSpan

Blockquote

Answer 2

Try This!

       Stack( children: [
          Padding(
            padding: const EdgeInsets.only(top: 10),
            child: Container(height: 180, child: Padding(
              padding: const EdgeInsets.only(top: 35,left: 15),
              child: Column(children: [
                Row(children: [
                  Text("Full Name:",style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),)
                 , Text("Mark"),
                ],),
                SizedBox(height: 15,),
                Row(children: [
                  Text("Email:",style: TextStyle(fontWeight: FontWeight.bold),)
                  , Text("email@gmail.com"),
                ],),
                SizedBox(height: 15,),
                Row(children: [
                  Text("Phone:",style: TextStyle(fontWeight: FontWeight.bold),)
                  , Text("036526494"),
                ],),
                SizedBox(height: 15,),
                Row(children: [
                  Text("Address:",style: TextStyle(fontWeight: FontWeight.bold),)
                  , Text("Random Address,city,Country"),
                ],),

              ],),
            ),
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8),
                  border: Border.all(width: 1)),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 20),
            child: Container(
                color: Colors.white,
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 10),
                  child: Text(
                    "Contact Info",
                    style: TextStyle(
                        fontWeight: FontWeight.bold, fontSize: 18),
                  ),
                )),
          ),
        ],
      )