Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 617
Ismaeil Ghouneim Avatar asked Jul 14 '19 22:07

Ismaeil Ghouneim


People also ask

How do you fill border color in Flutter?

Flutter – Change Container Border's Color & Width To change the color and width of Container's border, use its decoration property. Set decoration property with BoxDecoration() object. Set the border property of BoxDecoration() object, with required color and width as per your applications specifications.


1 Answers

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",
            ),
like image 96
diegoveloper Avatar answered Oct 12 '22 13:10

diegoveloper