The code in which you change the color of the primaryColor
andprimaryColorDark
does not change the color inicial of the border, only after tap the color stay black
The attribute that must be changed is hintColor
BorderSide
should not be used for this, you need to change Theme.
To make the red color default to put the theme in MaterialApp(theme: ...)
and to change the theme of a specific widget, such as changing the default red color to the yellow color of the widget, surrounds the widget with:
new Theme(
data: new ThemeData(
hintColor: Colors.yellow
),
child: ...
)
Below is the code and gif:
Note that if we define the primaryColor
color as black, by tapping the widget it is selected with the color black
But to change the label and text inside the widget, we need to set the theme to InputDecorationTheme
The widget that starts with the yellow color has its own theme and the widget that starts with the red color has the default theme defined with the function buildTheme()

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
ThemeData buildTheme() {
final ThemeData base = ThemeData();
return base.copyWith(
hintColor: Colors.red,
primaryColor: Colors.black,
inputDecorationTheme: InputDecorationTheme(
hintStyle: TextStyle(
color: Colors.blue,
),
labelStyle: TextStyle(
color: Colors.green,
),
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
theme: buildTheme(),
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(),
body: new Container(
padding: new EdgeInsets.only(top: 16.0),
child: new ListView(
children: <Widget>[
new InkWell(
onTap: () {},
child: new Theme(
data: new ThemeData(
hintColor: Colors.yellow
),
child: new TextField(
decoration: new InputDecoration(
border: new OutlineInputBorder(),
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)),
)
)
),
new InkWell(
onTap: () {},
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)),
)
)
],
),
)
);
}
}
var outlineInputBorder = OutlineInputBorder( borderSide: BorderSide(color: Colors.black87, width: 1.5)); var outlineInputBorder2 = OutlineInputBorder( borderSide: BorderSide(color: Colors.indigoAccent,width: 2), ); =======> child: TextFormField(decoration: InputDecoration( focusedBorder: outlineInputBorder2, enabledBorder: outlineInputBorder, border: OutlineInputBorder( borderSide: BorderSide(color: Colors.deepPurple)), hintText: 'Info',),)