flutterflutter-textformfield

how to add textstyle for textformfield theme in flutter?


I have a register form where I have used many TextFormField. instead of designing all TextFormField I have created InputDecoration theme for it, but I don't know how to add textStyle to it.

I mean like default TextFormField, fontsize and color instead of adding textstyle to all textformfield.

is there any way that we can add with theme of it

Expanded(
  child: TextFormField(
  style: const TextStyle(fontSize: 18,color:Colors.blue),//it should be added in theme
  controller: controller.firstName,
  decoration: const InputDecoration(
    hintText: 'First Name',
    prefixIcon: Icon(Icons.person),
  ),
  validator: (text)=>MyValidator.validateEmtpyText('FirstName', text),
  ),
),

here is my input decoration theme

class MyTextFormFieldTheme {
  static InputDecorationTheme lightInputDecorarationTheme =
      InputDecorationTheme(
    errorMaxLines: 3,
    prefixIconColor: Colors.grey,
    suffixIconColor: Colors.grey,
    labelStyle: const TextStyle().copyWith(fontSize: 14, color: Colors.black),
    hintStyle: const TextStyle().copyWith(fontSize: 14, color: Colors.black),
    errorStyle: const TextStyle().copyWith(fontStyle: FontStyle.normal),
    floatingLabelStyle:
        const TextStyle().copyWith(color: Colors.black.withOpacity(0.8)),
    border: OutlineInputBorder().copyWith(
      borderRadius: BorderRadius.circular(14),
      borderSide: BorderSide(width: 1, color: Colors.grey),
    ),
    enabledBorder: OutlineInputBorder().copyWith(
      borderRadius: BorderRadius.circular(14),
      borderSide: BorderSide(width: 1, color: Colors.grey),
    ),
    focusedBorder: OutlineInputBorder().copyWith(
      borderRadius: BorderRadius.circular(14),
      borderSide: BorderSide(width: 1, color: Colors.black12),
    ),
    errorBorder: OutlineInputBorder().copyWith(
      borderRadius: BorderRadius.circular(14),
      borderSide: BorderSide(width: 1, color: Colors.red),
    ),
    focusedErrorBorder: OutlineInputBorder().copyWith(
      borderRadius: BorderRadius.circular(14),
      borderSide: BorderSide(width: 2, color: Colors.orange),
    ),
  );

Solution

  • You can change the style of the text being written in the TextField using the Theme as following:

    In your theme define a textTheme specially subtitle1, which is the default text theme for TextField

    ThemeData(
        textTheme: TextTheme(
            subtitle1: const TextStyle(fontSize: 18,color:Colors.blue),
        ),
        inputDecoration: // pass it here
    )
    

    by having a Theme, you should now pass that Text field's input decoration to it. don't define it as a variable any more.