[英]Custom Error Message Widget in TextFields - Flutter
I am trying to create a custom Input widget with custom error message styling.我正在尝试使用自定义错误消息样式创建自定义输入小部件。 Final Design - Final Design
最终设计 -最终设计
So far I have updated input with help for making a custom wrapper which add border and padding -到目前为止,我已经在制作自定义包装器的帮助下更新了输入,该包装器添加了边框和填充 -
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,
),
);
}
And code for inputs -和输入代码 -
InputWrap(
child: FormBuilderTextField(
style: InputFieldStyle.normalTextStyle,
obscureText: true,
maxLines: 1,
decoration: const InputDecoration(
labelText: 'Password*',
),
validators: <FormFieldValidator>[
FormBuilderValidators.required(),
],
attribute: 'lastName',
),
),
Styles for inputs 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,
),
But now I cant seem to find how I can target and style error bar.但现在我似乎无法找到如何定位和设置错误栏。 Current Progress
现在的进展
UPDATE - SOLVED更新 - 已解决
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,
);
},
),
);
}
}
I would suggest you use FormField for this design我建议您在此设计中使用 FormField
FormField<String>(
builder: (FormFieldState<String> state) {
return Column(
children: <Widget>[
//Your custom text field
Offstage(
offstage:!state.hasError,
child: //your custom error widget
),
],
),
),
You can check this medium story for more details.您可以查看此媒体故事以获取更多详细信息。 Here is another great video on the same topic from Flutter Europe
这是来自 Flutter Europe 的另一个关于同一主题的精彩视频
Hope this helps!希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.