Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to style TextFormField in a theme in flutter

Tags:

flutter

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)),
      ))
      
      );
like image 745
William Chidube Avatar asked Oct 17 '25 05:10

William Chidube


1 Answers

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),
  ),
);
like image 98
bluenile Avatar answered Oct 20 '25 16:10

bluenile



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!