[英]Custom Error Message Widget in TextFields - Flutter
我正在尝试使用自定义错误消息样式创建自定义输入小部件。 最终设计 -最终设计
到目前为止,我已经在制作自定义包装器的帮助下更新了输入,该包装器添加了边框和填充 -
return Padding(
padding: const EdgeInsets.only(bottom: 15.0),
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: colors.grey,
width: 2,
),
borderRadius: BorderRadius.circular(2),
),
padding: const EdgeInsets.symmetric(horizontal: 15.0),
height: 56.0,
child: child,
),
);
}
和输入代码 -
InputWrap(
child: FormBuilderTextField(
style: InputFieldStyle.normalTextStyle,
obscureText: true,
maxLines: 1,
decoration: const InputDecoration(
labelText: 'Password*',
),
validators: <FormFieldValidator>[
FormBuilderValidators.required(),
],
attribute: 'lastName',
),
),
Styles 用于输入
inputDecorationTheme: const InputDecorationTheme(
labelStyle: TextStyle(
color: Colors.BLUE_PRIMARY,
fontSize: 14,
fontWeight: FontWeight.normal,
),
errorStyle: TextStyle(
color: Colors.BLUE_LIGHT,
fontSize: 12,
backgroundColor: Colors.PINK_ERROR_BACKGROUND,
),
border: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
disabledBorder: InputBorder.none,
isDense: true,
),
但现在我似乎无法找到如何定位和设置错误栏。 现在的进展
更新 - 已解决
import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
class CustomTextField extends StatelessWidget {
const CustomTextField({
Key key,
this.attribute,
this.initialValue,
this.labelText,
this.hintText,
this.suffix,
this.readOnly = false,
this.trimOnSave = true,
this.validatorsList = const <String Function(dynamic)>[],
}) : super(key: key);
final String attribute;
final String initialValue;
final String labelText;
final String hintText;
final Widget suffix;
final bool readOnly;
final bool trimOnSave;
final List<String Function(dynamic)> validatorsList;
@override
Widget build(BuildContext context) {
return FormBuilderCustomField<String>(
attribute: attribute,
validators: validatorsList,
valueTransformer: (dynamic value) {
// Trim values before save
return trimOnSave ? value.toString().trim() : value;
},
formField: FormField<String>(
enabled: true,
initialValue: initialValue,
builder: (FormFieldState<String> field) {
return InputWrap(
child: TextFormField(
readOnly: readOnly,
style: InputFieldStyle.normalTextStyle,
decoration: InputFieldStyle.inputFieldStyle(
labelText: labelText,
hintText: hintText,
suffix: suffix,
),
onChanged: (String data) {
field.didChange(data);
},
),
// Show Error Widget below input field if error exist
hasError: field.hasError,
errorText: field.errorText,
);
},
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.