TextFields 中的自定义错误消息小部件 - Flutter答案

【问题标题】：Custom Error Message Widget in TextFields - FlutterTextFields 中的自定义错误消息小部件 - Flutter
【发布时间】：2020-05-12 12:56:25
【问题描述】：

我正在尝试使用自定义错误消息样式创建自定义输入小部件。最终设计 - 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,
          );
        },
      ),
    );
  }
}

【问题讨论】：

您也可以使用TextFiled下方的一些小部件在某些错误情况下使其可见

标签： forms flutter dart flutter-layout

【解决方案1】：

我建议你在这个设计中使用 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 的另一个关于同一主题的精彩视频

希望这会有所帮助！

【讨论】：