android-studioflutterdartuitextfieldflutter-layout

Flutter - how to change TextField border color?


I've tried everything to try and change the border color of textfield but it seems to be ignored.

I've tried sideBorder(even width is ignored too), hintStyle, applying a specific theme to only this widget and they all seem to be ignored.

child: new Theme(
      data: ThemeData(
      primaryColor: Colors.white,
      accentColor: Colors.white,
      hintColor: Colors.white //This is Ignored,
      inputDecorationTheme: InputDecorationTheme(
               border: OutlineInputBorder(
               borderSide: BorderSide(color: Colors.white) //This is Ignored
                    ),
                  ),
              ),
      child: new TextField(
             style: TextStyle(color: Colors.white, decorationColor: Colors.white),
             cursorColor: Colors.white,
             decoration: InputDecoration(
             border: new OutlineInputBorder(
             //borderRadius: const BorderRadius.all(Radius.circular(30.0)),
             borderSide: BorderSide(color: Colors.white, width: 0.0) //This is Ignored,
                      ),
                      hintText: "Search people",
                    ),
                  ),
                  //new Divider(color: Colors.white, height: 20),

          )

I'd like to change that hairline looking black border and alter its color and its width.

Image of what it currently is


Solution

  • Use enabledBorder and focusedBorder (when the textfield is focused)

    InputDecoration(
                  enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                          color: Colors.red, width: 5.0),
                      ),
                  focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                          color: Colors.blue, width: 3.0),
                      ),
                  hintText: "Search people",
                ),