Flutter - Changing the border color of the OutlineInputBorder
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
),
),
);
}
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
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 ),
),
You need to simply give the "enabledBorder" parameter in the InputDecoration
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.yellow),
),