Flutter - Changing the border color of the OutlineInputBorder

Question

I'm trying to change the border color of the OutlineInputBorder but tried inumerous ways and failed.

I created the whole Theme configuration through the buildDarkTheme() function but I can not change the border color to yellow

Below is the image and the code:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

const kBlackHalf = const Color(0xFF212121);
const kBlackLight = const Color(0xFF484848);
const kBlack = const Color(0xFF000000);
const kYellow = const Color(0xFFffd600);
const kYellowLight = const Color(0xFFffff52);
const kYellowDark = const Color(0xFFc7a500);
const kWhite = Colors.white;

ThemeData buildDarkTheme() {
  final ThemeData base = ThemeData();
  return base.copyWith(
    primaryColor: kBlack,
    accentColor: kYellow,
    scaffoldBackgroundColor: kBlackHalf,
    primaryTextTheme: buildTextTheme(base.primaryTextTheme, kWhite),
    primaryIconTheme: base.iconTheme.copyWith(color: kWhite),
    buttonColor: kYellow,
    textTheme: buildTextTheme(base.textTheme, kWhite),    
    inputDecorationTheme: InputDecorationTheme(
      border: OutlineInputBorder(
        borderSide: BorderSide(color: kYellow)
      ),
      labelStyle: TextStyle(
        color: kYellow,
        fontSize: 24.0
      ),
    ),
  );
}

TextTheme buildTextTheme(TextTheme base, Color color) {
  return base.copyWith(
    body1: base.headline.copyWith(color: color, fontSize: 16.0),
    caption: base.headline.copyWith(color: color),
    display1: base.headline.copyWith(color: color),
    button: base.headline.copyWith(color: color),
    headline: base.headline.copyWith(color: color),
    title: base.title.copyWith(color: color),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: buildDarkTheme(),
      home: new HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String xp = '0';

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        actions: <Widget>[
          new IconButton(
            icon: Icon(Icons.ac_unit),
            onPressed: () {},
          )
        ],
      ),
      body: new Container(
        padding: new EdgeInsets.only(top: 16.0),
        child: new ListView(
          children: <Widget>[
            new InkWell(
              onTap: () {},
              child: new InputDecorator(
                decoration: new InputDecoration(          
                  labelText: 'XP',
                  border: OutlineInputBorder()
                ),
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    new Text(this.xp),
                  ],
                ),
              ),
            )
          ],
        ),
      )
    );
  }
}

For more references:

Not able to change TextField Border Color

https://github.com/flutter/flutter/issues/17592

As a suggestion, i would be wrong as you want, but this border colors are based on your themes primary colors, it would be always black as your primary color is black. So try another widget other than "OutlineInputBorder". Happy codding! — Jani Devang, Jul 16 '18 at 06:28

score 107 · Answer 1 · edited Jul 13 '22 at 15:05

107

Since July you can now use enabledBorder:

new TextField(
  decoration: new InputDecoration(
    enabledBorder: const OutlineInputBorder(
      // width: 0.0 produces a thin "hairline" border
      borderSide: const BorderSide(color: Colors.grey, width: 0.0),
    ),
    border: const OutlineInputBorder(),
    labelStyle: new TextStyle(color: Colors.green),
    ...
  ),
)

See the full documentation for the new decorators

edited Jul 13 '22 at 15:05

MendelG

14,885
4
25
52

answered Oct 18 '18 at 11:14

Jannie Theunissen

28,256
21
100
127

5

Yep this works, setting just the border doesn't work for colors and neither for the border size, but actually changes it to rounded border! Strange behavior that confuses me! – Daniel Jan 22 '20 at 20:15
This solution did not work for me. I am using Flutter 2.5 version. Thanks a lot. – Kamlesh Sep 20 '21 at 08:57

score 45 · Answer 2 · answered Sep 05 '20 at 04:22

This is the solution for the mentioned problem use enabledBorder if the TextField is not clicked by the user and use focusedBorder if the TextField is clicked by the user.

 enabledBorder: new OutlineInputBorder(
        borderRadius: new BorderRadius.circular(25.0),
        borderSide:  BorderSide(color: Colors.pinkAccent ),

      ),
      focusedBorder: new OutlineInputBorder(
        borderRadius: new BorderRadius.circular(25.0),
        borderSide:  BorderSide(color: Colors.pinkAccent ),

      ),

`focusedBorder` will use the app primary color by default. – markhorrocks Mar 03 '22 at 04:31 — markhorrocks, Mar 03 '22 at 04:31

score 38 · Accepted Answer · answered May 15 '18 at 03:01

Add hintColor to your theme like this and it should change the OutlineInputBorder color.

ThemeData buildDarkTheme() {
  final ThemeData base = ThemeData();
  return base.copyWith(
    primaryColor: kBlack,
    accentColor: kYellow,
    scaffoldBackgroundColor: kBlackHalf,
    primaryTextTheme: buildTextTheme(base.primaryTextTheme, kWhite),
    primaryIconTheme: base.iconTheme.copyWith(color: kWhite),
    buttonColor: kYellow,
    hintColor: YOUR_COLOR,
    textTheme: buildTextTheme(base.textTheme, kWhite),    
    inputDecorationTheme: InputDecorationTheme(
      border: OutlineInputBorder(),
      labelStyle: TextStyle(
        color: kYellow,
        fontSize: 24.0
      ),
    ),
  );
}

it also changes the hinted text – guillaumearnx Mar 19 '22 at 18:53 — guillaumearnx, Mar 19 '22 at 18:53

score 12 · Answer 4 · answered Feb 02 '21 at 09:24

12

You need to simply give the "enabledBorder" parameter in the InputDecoration

enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.yellow),
              ),

answered Feb 02 '21 at 09:24

David Machara

559
9
13

score 5 · Answer 5 · edited Oct 10 '18 at 03:31

5

This will change the outline color of the button to blue

new OutlineButton(
   borderSide: BorderSide(color: Colors.blue),
)

edited Oct 10 '18 at 03:31

SomeGuyOnAComputer

5,414
6
40
72

answered Oct 09 '18 at 20:13

cindy

476
6
8

10

this doesn't work and has never worked. Why even suggest it? Did you ever test it? https://github.com/flutter/flutter/issues/18751 – Axes Grinds Mar 09 '20 at 11:48

score 2 · Answer 6 · answered Aug 08 '19 at 08:26

2

Wrap your TextField in Theme widget.

Theme(
  data: Theme.of(context).copyWith(accentColor: Colors.white), // set color here
  child: TextField(),
)

answered Aug 08 '19 at 08:26

CopsOnRoad

237,138
77
654
440

score 1 · Answer 7 · answered Jan 31 '19 at 17:53

1

Just change the hintColor property for the ThemeData, something like this:

Theme(
    data: ThemeData(
      primaryColor: kYellowDark,
      hintColor: kYellow,
    ),
    child: Material(....),
);

answered Jan 31 '19 at 17:53

Luis Fernando Pazmiño

49
1

score 0 · Answer 8 · answered Jan 02 '19 at 12:33

To change the border color of a Card use the code below

new Card(
      shape: const RoundedRectangleBorder(
        side: BorderSide(color: Colors.blue),
        borderRadius: BorderRadius.all(Radius.circular(15.0)),
      ),
      child: Container(new Text("Text in a card"))

score 0 · Answer 9 · answered Apr 09 '20 at 16:07

Most specific and easiest answer to the original question:

 Theme(
          data: Theme.of(context).copyWith(primaryColor: Colors.blue),
          child: TextField(
            decoration: InputDecoration(
                border: OutlineInputBorder(), labelText: 'Some Label'),
          ),
        ),

The primary color defines the border color for the OutlineInputBorder widget. Just wrap your TextField with the Theme widget and overwrite the primary color.

Flutter - Changing the border color of the OutlineInputBorder

9 Answers9