如何在 Flutter 中使用 textformfield 在屏幕顶部查看验证错误答案

【问题标题】：How to view validation error in the top of sceen using textform field in Flutter如何在 Flutter 中使用 textformfield 在屏幕顶部查看验证错误
【发布时间】：2022-01-10 21:41:17
【问题描述】：

如何在 Flutter 中使用 textform 字段在屏幕顶部查看验证错误

验证仅在文本字段下查看，我需要在屏幕顶部查看它们

【问题讨论】：

标签： flutter dart

【解决方案1】：

没有默认方式在页面顶部显示表单字段的验证错误。但是，您可以在验证函数中添加一些代码，以在验证失败时显示snackBar 或toast。

【讨论】：

【解决方案2】：

您可以这样做，定义两个变量，例如 _error 一个布尔类型来存储字段验证的错误标志，另一个，例如 errorMsg 字符串类型来存储错误消息。在表单的验证方法中，根据用户输入的值更改值，如果输入为空，则将 error 标志的值更改为 true，将 errorMsg 的值更改为您选择的一些错误文本。现在，如果 error 标志为真，则在您的 UI 部分中，在您的 UI 中的某个位置显示 errorMsg 文本。

我在下面给出了一个完整的例子：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Form Validation Demo';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(appTitle),
        ),
        body: const MyCustomForm(),
      ),
    );
  }
}

// Create a Form widget.
class MyCustomForm extends StatefulWidget {
  const MyCustomForm({Key? key}) : super(key: key);

  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

// Create a corresponding State class.
// This class holds data related to the form.
class MyCustomFormState extends State<MyCustomForm> {
  // Create a global key that uniquely identifies the Form widget
  // and allows validation of the form.
  //
  // Note: This is a GlobalKey<FormState>,
  // not a GlobalKey<MyCustomFormState>.
  final _formKey = GlobalKey<FormState>();
  bool _error = false;
  late String _errorMsg;

  @override
  Widget build(BuildContext context) {
    // Build a Form widget using the _formKey created above.
    return Column(children: [
      
      (_error ? Text(_errorMsg) : Container()), // show the error message
      
      Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextFormField(
            // The validator receives the text that the user has entered.
            validator: (value) {
              if (value == null || value.isEmpty) {
                setState(() {
                  _error = true;
                  _errorMsg = 'Please enter some text';
                });
                return '';
              }
              return null;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: ElevatedButton(
              onPressed: () {
                // Validate returns true if the form is valid, or false otherwise.
                if (_formKey.currentState!.validate()) {
                  // If the form is valid, display a snackbar. In the real world,
                  // you'd often call a server or save the information in a database.
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('Processing Data')),
                  );
                }
              },
              child: const Text('Submit'),
            ),
          ),
        ],
      ))],
    );
  }
}

【讨论】：