I am trying to center a text vertically in custom TextFormField which looks like this:
class CustomTextFormField extends StatelessWidget {
final TextEditingController controller;
final String? hintText;
final String? counterText;
final String? Function(String?)? validator;
final FocusNode? nextFocusNode;
final int? maxLength;
final bool onFieldSubmittedEnabled;
final TextInputType? keyboardType;
final FocusNode? focusNode;
final TextInputAction textInputAction;
final int? maxLines;
final void Function(String?)? onSaved;
final void Function(String)? onChanged;
final bool editable;
final Function()? onTap;
final double borderRadius;
final Widget? prefixIcon;
final Widget? suffixIcon;
final String? suffixText;
final String? prefixText;
final String? errorText;
final bool obscureText;
final AutovalidateMode? autoValidateMode;
final TextDirection? textDirection;
final List<TextInputFormatter>? inputFormatters;
final BoxConstraints? prefixIconConstraints;
const CustomTextFormField(
{super.key,
required this.controller,
this.hintText,
this.counterText,
this.validator,
this.nextFocusNode,
this.maxLength,
this.onFieldSubmittedEnabled = true,
this.keyboardType,
this.focusNode,
this.textInputAction = TextInputAction.next,
this.maxLines,
this.onSaved,
this.onTap,
this.borderRadius = 10.0,
this.editable = true,
this.prefixIcon,
this.obscureText = false,
this.autoValidateMode = AutovalidateMode.onUserInteraction,
this.textDirection,
this.suffixIcon,
this.suffixText,
this.prefixText,
this.errorText,
this.onChanged,
this.inputFormatters,
this.prefixIconConstraints});
@override
Widget build(BuildContext context) {
return textField(context);
}
Widget textField(BuildContext context) => TextFormField(
controller: controller,
maxLength: maxLength,
maxLines: maxLines,
textDirection: textDirection,
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration(
counterText: counterText,
isDense: true,
filled: true,
fillColor: Palette.textFieldBackground,
prefixIcon: prefixIcon,
suffixIcon: suffixIcon,
suffixText: suffixText?.tr,
prefixText: prefixText?.tr,
errorText: errorText?.tr,
hintText: hintText?.tr,
prefixIconConstraints: prefixIconConstraints,
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.all(Radius.circular(borderRadius))),
errorMaxLines: 3),
textInputAction: textInputAction,
focusNode: focusNode,
autovalidateMode: autoValidateMode,
inputFormatters: inputFormatters,
keyboardType: keyboardType,
onFieldSubmitted: onFieldSubmittedEnabled
? (_) => FocusScope.of(context).requestFocus(nextFocusNode)
: null,
onEditingComplete: () {
FocusScope.of(context).nextFocus();
},
validator: validator,
onSaved: onSaved,
onChanged: onChanged,
readOnly: !editable,
onTap: onTap,
obscureText: obscureText);
}
I am using it this way:
Widget customFormField(
TextEditingController controller, String label, String hintText,
{dynamic Function()? onTap,
bool editable = true,
String? Function(String?)? validator,
TextInputType keyboardType = TextInputType.text}) {
return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
CustomTextFormField(
controller: controller,
prefixIcon: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: CustomTextWidget(dataKey: label)),
suffixIcon: onTap != null ? Icon(Icons.arrow_forward_ios) : null,
prefixIconConstraints: BoxConstraints(minWidth: 150.0, maxWidth: 150),
hintText: hintText.tr,
onTap: onTap,
editable: editable,
keyboardType: keyboardType,
validator: validator,
),
const SpaceWidget(10.0),
]);
}
Example:
customFormField(
controller.maritalStatusTEC,
LangKeys.MARITAL_STATUS,
LangKeys.SELECT_MARITAL_STATUS,
onTap: () => controller.selectMaritalStatus(),
editable: false,
validator: Validators.selectorValidator,
),
I tried using this:
textAlignVertical: TextAlignVertical.center,
but still it would not be centered vertically. There are some text fields that have a 2-line hints, and in these fields the same problem would happen. you can see the output in the picture below:
I am trying to center a text vertically in custom TextFormField which looks like this:
class CustomTextFormField extends StatelessWidget {
final TextEditingController controller;
final String? hintText;
final String? counterText;
final String? Function(String?)? validator;
final FocusNode? nextFocusNode;
final int? maxLength;
final bool onFieldSubmittedEnabled;
final TextInputType? keyboardType;
final FocusNode? focusNode;
final TextInputAction textInputAction;
final int? maxLines;
final void Function(String?)? onSaved;
final void Function(String)? onChanged;
final bool editable;
final Function()? onTap;
final double borderRadius;
final Widget? prefixIcon;
final Widget? suffixIcon;
final String? suffixText;
final String? prefixText;
final String? errorText;
final bool obscureText;
final AutovalidateMode? autoValidateMode;
final TextDirection? textDirection;
final List<TextInputFormatter>? inputFormatters;
final BoxConstraints? prefixIconConstraints;
const CustomTextFormField(
{super.key,
required this.controller,
this.hintText,
this.counterText,
this.validator,
this.nextFocusNode,
this.maxLength,
this.onFieldSubmittedEnabled = true,
this.keyboardType,
this.focusNode,
this.textInputAction = TextInputAction.next,
this.maxLines,
this.onSaved,
this.onTap,
this.borderRadius = 10.0,
this.editable = true,
this.prefixIcon,
this.obscureText = false,
this.autoValidateMode = AutovalidateMode.onUserInteraction,
this.textDirection,
this.suffixIcon,
this.suffixText,
this.prefixText,
this.errorText,
this.onChanged,
this.inputFormatters,
this.prefixIconConstraints});
@override
Widget build(BuildContext context) {
return textField(context);
}
Widget textField(BuildContext context) => TextFormField(
controller: controller,
maxLength: maxLength,
maxLines: maxLines,
textDirection: textDirection,
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration(
counterText: counterText,
isDense: true,
filled: true,
fillColor: Palette.textFieldBackground,
prefixIcon: prefixIcon,
suffixIcon: suffixIcon,
suffixText: suffixText?.tr,
prefixText: prefixText?.tr,
errorText: errorText?.tr,
hintText: hintText?.tr,
prefixIconConstraints: prefixIconConstraints,
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.all(Radius.circular(borderRadius))),
errorMaxLines: 3),
textInputAction: textInputAction,
focusNode: focusNode,
autovalidateMode: autoValidateMode,
inputFormatters: inputFormatters,
keyboardType: keyboardType,
onFieldSubmitted: onFieldSubmittedEnabled
? (_) => FocusScope.of(context).requestFocus(nextFocusNode)
: null,
onEditingComplete: () {
FocusScope.of(context).nextFocus();
},
validator: validator,
onSaved: onSaved,
onChanged: onChanged,
readOnly: !editable,
onTap: onTap,
obscureText: obscureText);
}
I am using it this way:
Widget customFormField(
TextEditingController controller, String label, String hintText,
{dynamic Function()? onTap,
bool editable = true,
String? Function(String?)? validator,
TextInputType keyboardType = TextInputType.text}) {
return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
CustomTextFormField(
controller: controller,
prefixIcon: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: CustomTextWidget(dataKey: label)),
suffixIcon: onTap != null ? Icon(Icons.arrow_forward_ios) : null,
prefixIconConstraints: BoxConstraints(minWidth: 150.0, maxWidth: 150),
hintText: hintText.tr,
onTap: onTap,
editable: editable,
keyboardType: keyboardType,
validator: validator,
),
const SpaceWidget(10.0),
]);
}
Example:
customFormField(
controller.maritalStatusTEC,
LangKeys.MARITAL_STATUS,
LangKeys.SELECT_MARITAL_STATUS,
onTap: () => controller.selectMaritalStatus(),
editable: false,
validator: Validators.selectorValidator,
),
I tried using this:
textAlignVertical: TextAlignVertical.center,
but still it would not be centered vertically. There are some text fields that have a 2-line hints, and in these fields the same problem would happen. you can see the output in the picture below:
Share Improve this question asked 19 hours ago Steinhammer71Steinhammer71 1251 gold badge2 silver badges8 bronze badges1 Answer
Reset to default 0To center text inside a TextFormField, use the contentPadding property of the InputDecoration class.
Example:
decoration: InputDecoration(
counterText: counterText,
isDense: true,
filled: true,
contentPadding: EdgeInsets.all(8.0),
fillColor: Palette.textFieldBackground,
prefixIcon: prefixIcon,
suffixIcon: suffixIcon,
suffixText: suffixText?.tr,
prefixText: prefixText?.tr,
errorText: errorText?.tr,
hintText: hintText?.tr,
prefixIconConstraints: prefixIconConstraints,
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.all(Radius.circular(borderRadius))),
errorMaxLines: 3),
By adjusting the contentPadding, you can control the vertical and horizontal positioning of the text inside the field.