flutter - 如何在颤动中从文本字段中显示验证错误消息

Question

如何从框中显示“此字段为必填项”消息。此消息将在按钮单击时显示。

这是文本字段代码

-------------------编辑的问题-------------------

这是您的代码，并通过添加一个 textformfield 对其进行了修改

import 'package:flutter/material.dart';



class ExperimentApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.white,
      ),
      home: ExperimentHome(),
    );
  }
}

class ExperimentHome extends StatelessWidget {
  final GlobalKey<FormFieldState> formFieldKey = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          children: [
            Expanded(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: RoundedInputField(
                  formFieldKey: formFieldKey,
                  icon: Icons.edit,
                  labelText: 'Label',
                  validate: (value) {
                    if (value == null || value.isEmpty) {
                      return "This field is required";
                    }
                    return null;
                  },
                ),
              ),
            ),
//this is one more TextFormField
            RoundedInputField(
                  formFieldKey: formFieldKey,
                  icon: Icons.edit,
                  labelText: 'Label1',
                  validate: (value) {
                    if (value == null || value.isEmpty) {
                      return "This field is required";
                    }
                    return null;
                  },
                ),
            
            IconButton(
              icon: Icon(Icons.check),
              onPressed: () {
                // you need to call `.validate` to actually validate the field.
                formFieldKey.currentState.validate();
              },
            )
          ],
        ),
      ),
    );
  }
}

class RoundedInputField extends StatelessWidget {
  final IconData icon;
  final FormFieldValidator<String> validate;
  final String labelText;

  final GlobalKey<FormFieldState> formFieldKey;

  // (before flutter 2.0) drop `required`
  const RoundedInputField({
    Key key,
    @required this.formFieldKey,
    
    
    @required this.labelText,
    @required this.icon,
    @required this.validate,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      key: formFieldKey,
      validator: validate,
      decoration: InputDecoration(
        icon: Icon(
          icon,
          color: Colors.blue,
        ),
        labelText: labelText,
      ),
    );
  }
}

这是错误

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderTransform#3842d NEEDS-LAYOUT NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1940 pos 12: 'hasSize'

The relevant error-causing widget was
TextFormField-[LabeledGlobalKey<FormFieldState<dynamic>>#a4b32]
lib\abc.dart:87
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
Multiple widgets used the same GlobalKey.
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
Multiple widgets used the same GlobalKey.
════════════════════════════════════════════════════════════════════════════════

它显示一个纯白屏幕作为输出

标签： fluttervalidation

Answer 1

这对你有用。

 decoration: InputDecoration(
                                      focusedBorder: UnderlineInputBorder(
                                        borderSide: BorderSide(
                                            color: Colors.anyColor,
                                            width: 2),
                                      ),
                                      focusedErrorBorder: UnderlineInputBorder(
                                        borderSide: BorderSide(
                                            color: Colors.anyColor,
                                            width: 2),
                                      ),
                                      errorBorder:
                                          (value.isEmpty)
                                              ? UnderlineInputBorder(
                                                  borderSide: BorderSide(
                                                      color: Colors.anyColor),
                                                )
                                              : InputBorder.none,
                                      errorText:
                                          (value.isEmpty)
                                              ? "Minimum 3 characters required"
                                              : null,
                                      errorStyle: anyTextStyle(),
                                      hintText: "Name",
                                      hintStyle:
                                          anyTextStyle()),