How to view validation error in the top of screen using textform field in Flutter

the validation only viewed under the text field and I need to view them in the top of the screen

CodePudding user response：

There's no default way to show a validation error of a form field on the top of the page. However, you can add some code to the validation function to show a snackBar or a toast in case validation fails.

CodePudding user response：

You can do something like this, define two variables, say _error one of a boolean type to store error flag for field validation and the other one, say errorMsg of String type to store the error message. And in the validation method of the form, change the values depending on the user inputted value, if the input is empty change the value of the error flag to true and the errorMsg to some error text of your choice. Now, in your UI part show the errorMsg text at a position in your UI if the error flag is true.

I have given a complete example below:

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