how to implement text field borders flutter

Issue

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!;
                },
          ),

Solution

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:

Answered By – tareq albeesh

Answer Checked By – Katrina (FlutterFixes Volunteer)