how to implement text field borders flutter - flutter

Question

I want to insert a border to my text field as image showing. how can I do this. here's my code I have implemented so far with no borders.
TextFormField(
controller: emailEditingController,
enabled: typing,
decoration: const InputDecoration(
hintText: "Email",
hintStyle: TextStyle(
color: textGrey, fontFamily: "Dubai", fontSize: 14),
),
validator: (String? UserName) {
if (UserName != null && UserName.isEmpty) {
return "Email can't be empty";
}
return null;
},
onChanged: (String? text) {
email = text!;
// print(email);
},
onSaved: (value) {
loginUserData['email'] = value!;
},
),

Answer 1

you can edit the border by adding a border to the decoration of your field:
TextFormField(
controller: emailEditingController,
enabled: true,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
hintText: "Email",
hintStyle:
TextStyle(color: Colors.grey, fontFamily: "Dubai", fontSize: 14),
),
validator: (String? UserName) {
if (UserName != null && UserName.isEmpty) {
return "Email can't be empty";
}
return null;
},
onChanged: (String? text) {
email = text!;
// print(email);
},
onSaved: (value) {
// loginUserData['email'] = value!;
},
),
the output would look like:

Answer 2

please add Containers padding property and contentPadding property to this code so you can achieve the layout
Container(
padding:
EdgeInsets.only(left: 20, right: 20, top: 20, bottom: 20),
child: TextFormField(
contentPadding: EdgeInsets.fromLTRB(20, 5, 10, 5),
this is my full code
Container(
padding:
EdgeInsets.only(left: 20, right: 20, top: 20, bottom: 20),
child: TextFormField(
controller: emailEditingController,
decoration: InputDecoration(
alignLabelWithHint: true,
floatingLabelBehavior:FloatingLabelBehavior.never,
contentPadding: EdgeInsets.fromLTRB(20, 5, 10, 5),
labelText: "Email/User name",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
hintStyle: TextStyle(
color: textGrey, fontFamily: "Dubai", fontSize: 14),
),
validator: (String? UserName) {
if (UserName != null && UserName.isEmpty) {
return "Email can't be empty";
}
return null;
},
onChanged: (String? text) {
// email = text!;
// print(email);
},
onSaved: (value) {
// loginUserData['email'] = value!;
},
)),
out put will be