在TextFields中自定义错误信息小部件 - Flutter。

Question

我正试图创建一个具有自定义错误信息样式的自定义输入部件。最终设计 - 最终设计

到目前为止，我已经更新了输入，帮助制作一个自定义的包装器，添加边框和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,
      ),
    );
  }

以及输入的代码------

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,
    ),

但现在我似乎找不到如何能够针对错误栏进行样式设计。当前进度

更新--已解决

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,
          );
        },
      ),
    );
  }
}

Answer 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
       ),
     ],
   ), 
 ),

你可以看看这个 中篇小说 了解更多详情。这里是 是另一个伟大的视频对同一主题从翩翩欧洲

希望对大家有所帮助!