outlined border change to single line when click -flutter error

Question

I'm creating a login page. when I click on email/username field it becomes one line rather than displaying outlined border. how to overcome this issue.

TextFormField(
            controller: emailEditingController,
            enabled: true,
            decoration:  InputDecoration(
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(30.0),
                  borderSide: const BorderSide(color: Colors.blue,),
              ),
              //isDense: true,
              contentPadding: EdgeInsets.fromLTRB(10, 30, 10, 0),

                hintText: "Email/ Username",
                hintStyle: TextStyle(
                    color: textblue, 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

When focused, it uses the focusedBorder. You can specify focusedBorder with the same one as the one you used for enabledBorder.

decoration:  InputDecoration(
  enabledBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(30.0),
    borderSide: const BorderSide(color: Colors.blue),
  ),
  focusedBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(30.0),
    borderSide: const BorderSide(color: Colors.blue),
  ),
  // ...
),

You might also have to specify errorBorder, focusedErrorBorder and disabledBorder

• enabledBorder is used when the field is enabled.
• focusedBorder is used when the field is focused.
• errorBorder is used when the field has an error (from your form validatin)
• focusedErrorBorder is used when the field has an error and is focused
• disabledBorder is used when the field is disabled