我正在尝试创建一个具有自定义错误消息样式的自定义输入小部件。最终设计 - Final Design
到目前为止,我已经更新了输入,并帮助制作了添加边框和填充的自定义包装器 -
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',
),
),
输入样式
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,
),
但现在我似乎无法找到如何定位和设置错误栏的样式。 Current Progress
更新 - 已解决
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,
);
},
),
);
}
}
最佳答案
我建议您使用 FormField 进行此设计
FormField<String>(
builder: (FormFieldState<String> state) {
return Column(
children: <Widget>[
//Your custom text field
Offstage(
offstage:!state.hasError,
child: //your custom error widget
),
],
),
),
您可以查看这个medium story更多细节。 Here这是来自 Flutter Europe 的关于同一主题的另一个精彩视频
希望这有帮助!
关于forms - TextFields 中的自定义错误消息小部件 - Flutter,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61752313/