I have created a login screen with textformfield for email id and password using flutter. Also, I have added the validation to check these fields. The code is as below;

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return MaterialApp(
    home: HomePage(),
    theme: ThemeData(
        brightness: Brightness.dark,
    ),
    );
}
}

class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
var _formKey = GlobalKey<FormState>();
var isLoading = false;

void _submit() {
    final isValid = _formKey.currentState.validate();
    if (!isValid) {
    return;
    }
    _formKey.currentState.save();
}

@override
Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
        title: Text("Form Validation"),
        leading: Icon(Icons.filter_vintage),
    ),
    //body
    body: Padding(
        padding: const EdgeInsets.all(16.0),
        //form
        child: Form(
        key: _formKey,
        child: Column(
            children: <Widget>[
            Text(
                "Form-Validation In Flutter ",
                style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
            ),
            //styling
            SizedBox(
                height: MediaQuery.of(context).size.width * 0.1,
            ),
            TextFormField(
                decoration: InputDecoration(labelText: 'E-Mail'),
                keyboardType: TextInputType.emailAddress,
                onFieldSubmitted: (value) {
                //Validator
                },
                validator: (value) {
                if (value.isEmpty ||
                    !RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'* -/=?^_`{|}~] @[a-zA-Z0-9] \.[a-zA-Z] ")
                        .hasMatch(value)) {
                    return 'Enter a valid email!';
                }
                return null;
                },
            ),
            //box styling
            SizedBox(
                height: MediaQuery.of(context).size.width * 0.1,
            ),
            //text input
            TextFormField(
                decoration: InputDecoration(labelText: 'Password'),
                keyboardType: TextInputType.emailAddress,
                onFieldSubmitted: (value) {},
                obscureText: true,
                validator: (value) {
                if (value.isEmpty) {
                    return 'Enter a valid password!';
                }
                return null;
                },
            ),
            SizedBox(
                height: MediaQuery.of(context).size.width * 0.1,
            ),
            RaisedButton(
                padding: EdgeInsets.symmetric(
                vertical: 10.0,
                horizontal: 15.0,
                ),
                child: Text(
                "Submit",
                style: TextStyle(
                    fontSize: 24.0,
                ),
                ),
                onPressed: () => _submit(),
            )
            ],
        ),
        ),
    ),
    );
}
}

The issue I am facing is, I want to validate the fields as soon as the user starts typing the input(dynamically) rather than clicking on the submit button to wait for the validation to happen. I did a lot of research yet could not find a solution. Thanks in advance for any help!

CodePudding user response：

You can do it by checking if the _formKey is empty in the login button

CodePudding user response：

May be this can Help someone. Inside TextFormField use this line of code

 autovalidateMode: AutovalidateMode.onUserInteraction