CODEWITHSUNDEEP
flutter
William Chidube
William Chidube

Reputation: 193

How to style TextFormField in a theme in 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)),
      ))
      
      );

Upvotes: 3

Views: 6552

Answers (3)

Shahzaib-online
Shahzaib-online

Reputation: 101

Here is an example

InputDecorationTheme inputDecorationTheme() {
  OutlineInputBorder outlineInputBorder = OutlineInputBorder(
    borderRadius: BorderRadius.circular(28),
    borderSide: BorderSide(color: kTextColor),
    gapPadding: 10,
  );
  return InputDecorationTheme(
    // If  you are using latest version of flutter then lable text and hint text shown like this
    // if you r using flutter less then 1.20.* then maybe this is not working properly
    // if we are define our floatingLabelBehavior in our theme then it's not applayed
    floatingLabelBehavior: FloatingLabelBehavior.always,
    contentPadding: EdgeInsets.symmetric(horizontal: 42, vertical: 20),
    enabledBorder: outlineInputBorder,
    focusedBorder: outlineInputBorder,
    border: outlineInputBorder,
  );
}

Upvotes: 2

Shirsh Shukla
Shirsh Shukla

Reputation: 5973

Try to do this by subhead,

theme: ThemeData( 
brightness: Brightness.dark,
 primaryColor: Colors.orange,
 accentColor: Colors.green,
 textTheme: TextTheme( 
subhead: TextStyle(color: Colors.blue),
 ), 
),

Or directly set subtitle like this,

MaterialApp(
 theme: ThemeData(
 textTheme: TextTheme(
 subtitle1: TextStyle(fontSize: 50,
 fontWeight: FontWeight.bold),
 ),
 );

or you can set directly to particular textformfiled

child: new Theme(
          data: new ThemeData(
            primaryColor: Colors.redAccent,
            primaryColorDark: Colors.red,
          ),
          child: new TextField(
            decoration: new InputDecoration(
                border: new OutlineInputBorder(
                    borderSide: new BorderSide(color: Colors.teal)),
                hintText: 'Enter Currency',
                helperText: 'User Currency',
                labelText: 'User Currency',
                prefixIcon: const Icon(
                  Icons.person,
                  color: Colors.green,
                ),
                prefixText: ' ',
                suffixText: 'USD',
                suffixStyle: const TextStyle(color: Colors.green)),
          ),
        ));

Upvotes: 1

bluenile
bluenile

Reputation: 6029

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),
  ),
);

Upvotes: 10

Related Questions