how to do this kind of UI in flutter - flutter

Question

Container( child: Column(children: [
TextFormField(
style: TextStyle(color: Colors.white.withOpacity(0.5)),
decoration: InputDecoration(
hintText: "Company",
hintStyle: TextStyle(color: Color(0xff676767)),
filled: true,
fillColor: Color(0xff1e1e1e),
border: OutlineInputBorder(
// borderRadius: BorderRadius.circular(18),
),
),
),
TextFormField(
style: TextStyle(color: Colors.white.withOpacity(0.5)),
decoration: InputDecoration(
hintText: "Title",
hintStyle: TextStyle(color: Color(0xff676767)),
filled: true,
fillColor: Color(0xff1e1e1e),
border: OutlineInputBorder(
// borderRadius: BorderRadius.circular(18),
),
),
),
]),
),
enter image description here
here is my code and a sample image of the problem. couldn't figure out how to do this

Answer 1

You can wrap the container with a cliprrect and adda border radius to it
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
child: Column(
children: [
TextField(),
TextField()
]
)
)
),

Answer 2

Use TextFormField's onFieldSubmitted() & onTap() to dynamically change border using FocusNode for Company & Title TextFormField
Initialize FocusNode for both TextField's before build().
Make sure your parent widget is a stateful widget
Color borderColor = Colors.transparent;
return Scaffold(
appBar: AppBar(),
// backgroundColor: Colo,
body: Column(
children: [
Container(
color: Colors.black,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[800],
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: companyFN.hasFocus || titleFN.hasFocus
? Colors.blue
: Colors.transparent)
// border: Border.all(color: borderColor)
),
child: Column(children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
focusNode: companyFN,
onTap: () {
setState(() {
borderColor = Colors.blue;
});
},
onFieldSubmitted: (_) {
setState(() {
borderColor = Colors.transparent;
});
},
decoration: const InputDecoration.collapsed(
hintText: "Company",
hintStyle: TextStyle(color: Colors.grey),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
focusNode: titleFN,
decoration: const InputDecoration.collapsed(
hintText: "Title",
hintStyle: TextStyle(color: Colors.grey),
),
onTap: () {
setState(() {
borderColor = Colors.blue;
});
},
onFieldSubmitted: (_) {
setState(() {
borderColor = Colors.transparent;
});
},
),
),
])),
),
),
],
));
}
OUTPUT: