How to style the OutlineInputBorder of InputDecoration?

Question

I am trying to style the border of TextFormField. I'm using it with an OutlineInputBorder. It by default takes an almost black color and on focus takes primary color. I tried to change color of the BorderSide but it ain't worked.

I also tried the workarounds mentioned at Change TextField's Underline in Flutter for UnderlineInputBorder, but nothing changes.

new TextFormField(
    decoration: new InputDecoration(
        labelText: "Email",
        contentPadding: new EdgeInsets.all(12.0),
        filled: true,
        border: new OutlineInputBorder(
            borderSide: new BorderSide(width: 2.0, color: Colors.white),
        )
    ),
),

You only want to change the border color? – Phuc Tran May 31 '18 at 10:50 — Phuc Tran, May 31 '18 at 10:50
Which color you want to set? – Dhrumil Shah - dhuma1981 May 31 '18 at 11:07 — Dhrumil Shah - dhuma1981, May 31 '18 at 11:07
The border and label color. – ryanafrish7 Jun 01 '18 at 09:03 — ryanafrish7, Jun 01 '18 at 09:03

score 2 · Answer 1 · answered Jun 03 '18 at 12:48

After digging deep, it seems like it's only configurable by ThemeData. So I simply added a Theme widget.

body: Theme(data: Theme.of(context).copyWith(
          primaryColor: Colors.white,
          accentColor: Colors.amber
      ), child: new TextFormField(
          decoration: new InputDecoration(
          labelText: "Email",
          contentPadding: new EdgeInsets.all(12.0),
      ),
),

input_decorator.dart#1440-1450

Color _getActiveColor(ThemeData themeData) {
    if (isFocused) {
      switch (themeData.brightness) {
        case Brightness.dark:
          return themeData.accentColor;
        case Brightness.light:
          return themeData.primaryColor;
      }
    }
    return themeData.hintColor;
  }

How to style the OutlineInputBorder of InputDecoration?

1 Answers1

input_decorator.dart#1440-1450

Linked