Flutter - how to change TextField border color?

10,286

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",
            ),
Share:
10,286
Ismaeil Ghouneim
Author by

Ismaeil Ghouneim

Updated on June 04, 2022

Comments

  • Ismaeil Ghouneim
    Ismaeil Ghouneim almost 2 years

    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

  • Ismaeil Ghouneim
    Ismaeil Ghouneim almost 5 years
    Thanks, you've been a great help!!