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