I can't seem to figure out how to style my TextFormFields inside my theme file. Research led me to the inputDecorationTheme class to achieve this but I can't figure out how to implement this in my theme file.
The code of my theme file I am working with is as follows (Notice the inputDecorationTheme:):
final ThemeData base = ThemeData.light();
return base.copyWith(
inputDecorationTheme: InputDecorationTheme(border: ***InputBorder.borderSide***()),
textTheme: _mainTextTheme(base.textTheme),
primaryColor: Color(0xff666666),
appBarTheme: _avoAppBar(base.appBarTheme),
iconTheme: IconThemeData(color: Colors.black, size: 16.0),
primaryIconTheme:
const IconThemeData.fallback().copyWith(color: fontColor),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(buttonColor),
foregroundColor: MaterialStateProperty.all(Colors.white),
minimumSize: MaterialStateProperty.all(Size(300, 50)),
))
);
Please see below a couple examples of how to use InputDecorationTheme :
var textColor = Colors.black;
var errorColor = Colors.red;
var primaryColor = Colors.blue;
var dividerColor = Colors.blueGrey;
var disabledColor = Colors.grey;
InputDecorationTheme(
focusedErrorBorder: UnderlineInputBorder(
borderSide: BorderSide(width: 0.7, color: errorColor)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(width: 0.5, color: primaryColor)),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(width: 2.0, color: dividerColor)),
border: UnderlineInputBorder(
borderSide: BorderSide(width: 2.0, color: dividerColor)),
disabledBorder: UnderlineInputBorder(
borderSide: BorderSide(width: 2.0, color: disabledColor)),
);
InputDecorationTheme(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(28),
borderSide: BorderSide(color: textColor),
),
);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With