Change the default border color of TextFormField in FLUTTER

Question

Unable to change the default border color when TextFormField is not active. When TextFormField is not active this shows DarkGrey-Border color. So, how to change that.

Theme(
              data: new ThemeData(
                primaryColor: Colors.red,
                primaryColorDark: Colors.black,
              ),
              child: TextFormField(
                decoration: new InputDecoration(
                  labelText: "Enter Email",
                  fillColor: Colors.white,
                  border: new OutlineInputBorder(
                    borderRadius: new BorderRadius.circular(25.0),
                    borderSide: new BorderSide(),
                  ),
                  //fillColor: Colors.green
                ),
                validator: (val) {
                  if (val.length == 0) {
                    return "Email cannot be empty";
                  } else {
                    return null;
                  }
                },
                keyboardType: TextInputType.emailAddress,
                style: new TextStyle(
                  fontFamily: "Poppins",
                ),
              ),
            ),

score 144 · Accepted Answer · answered Jun 24 '19 at 05:45

Use enabledBorder of the InputDecoration, don't forget you can also use the focusedBorder, like this :

InputDecoration(
                labelText: "Enter Email",
                fillColor: Colors.white,
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(25.0),
                  borderSide: BorderSide(
                    color: Colors.blue,
                  ),
                ),
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(25.0),
                  borderSide: BorderSide(
                    color: Colors.red,
                    width: 2.0,
                  ),
                ),
)

Here you have more info: https://api.flutter.dev/flutter/material/InputDecoration/enabledBorder.html

score 0 · Answer 2 · edited Feb 08 '23 at 14:50

0

    OutlineInputBorder(
                    borderSide: BorderSide(
                    color: AppColor.secondaryBackground)),
                    focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: 
                    AppColor.secondaryBackground)),
                    enabledBorder: OutlineInputBorder(
                    borderSide:  BorderSide(color: 
                    AppColor.secondaryBackground),
    ),

edited Feb 08 '23 at 14:50

HannesH

932
2
12

answered Feb 03 '23 at 07:55

user21103955

1
3

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 11 '23 at 11:00

Change the default border color of TextFormField in FLUTTER

2 Answers2