Flutter - Changing the border color of the OutlineInputBorder
DartFlutterDart Problem Overview
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:
Dart Solutions
Solution 1 - Dart
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
Solution 2 - Dart
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
),
),
);
}
Solution 3 - Dart
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 ),
),
Solution 4 - Dart
You need to simply give the "enabledBorder" parameter in the InputDecoration
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.yellow),
),
Solution 5 - Dart
This will change the outline color of the button to blue
new OutlineButton(
borderSide: BorderSide(color: Colors.blue),
)
Solution 6 - Dart
Wrap your TextField in Theme widget.
Theme(
data: Theme.of(context).copyWith(accentColor: Colors.white), // set color here
child: TextField(),
)
Solution 7 - Dart
Just change the hintColor property for the ThemeData, something like this:
Theme(
data: ThemeData(
primaryColor: kYellowDark,
hintColor: kYellow,
),
child: Material(....),
);
Solution 8 - Dart
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"))
Solution 9 - Dart
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.