Not able to change TextField Border Color

Question

Asked by Smruti R on May 01, 2018 (source).

I am trying to change color of the border of my TextField using a BorderSide, but it does not work.

This is my code below.

new TextField(
  decoration: new InputDecoration(
    border: new OutlineInputBorder(
      borderSide: new BorderSide(color: Colors.teal)
    ),
    hintText: 'Tell us about yourself',
    helperText: 'Keep it short, this is just a demo.',
    labelText: 'Life story',
    prefixIcon: const Icon(Icons.person, color: Colors.green,),
    prefixText: ' ',
    suffixText: 'USD',
    suffixStyle: const TextStyle(color: Colors.green)),
  )
)

Screenshot of the result is shown below.

Answer

Question answered by Napolean (source).

That is not changing due to the default theme set to the screen.

So just change them for the widget you are drawing by wrapping your TextField with new ThemeData()

child: new Theme(
          data: new ThemeData(
            primaryColor: Colors.redAccent,
            primaryColorDark: Colors.red,
          ),
          child: new TextField(
            decoration: new InputDecoration(
                border: new OutlineInputBorder(
                    borderSide: new BorderSide(color: Colors.teal)),
                hintText: 'Tell us about yourself',
                helperText: 'Keep it short, this is just a demo.',
                labelText: 'Life story',
                prefixIcon: const Icon(
                  Icons.person,
                  color: Colors.green,
                ),
                prefixText: ' ',
                suffixText: 'USD',
                suffixStyle: const TextStyle(color: Colors.green)),
          ),
        ));

enter image description here

DART FLUTTER
SHARE: