skip to Main Content

I have a form with several fields, at the end of the form there is a Login button which validates the whole form before submit. Within the form there is a "Send Code" button which requires only the email address as mandatory field. How can I just highlight the email address field without highlighting the password field when the Send Code button is pressed?
enter image description here

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Form(
              key: _formKey,
              child: Column(children: [
                Row(children: [
                  Expanded(
                    child: TextFormField(
                      decoration: InputDecoration(
                          border: OutlineInputBorder(),
                          labelText: 'Email Address'),
                      controller: _EmailAddressController,
                      validator: (value) {
                        if (value == null || value.isEmpty) {
                          return 'Please enter email';
                        }
                        return null;
                      },
                    ),
                  ),
                  Expanded(
                    child: TextButton(
                      onPressed: () {
                        if (_formKey.currentState!.validate()) {
                          ScaffoldMessenger.of(context).showSnackBar(
                            const SnackBar(content: Text('Processing Data')),
                          );
                        }
                      },
                      child: Text('Send Code',
                          style: TextStyle(
                              fontSize: 24,
                              color: Colors.green[800],
                              fontWeight: FontWeight.bold)),
                    ),
                  )
                ]),
                SizedBox(height: 10),
                TextFormField(
                  obscureText: true,
                  decoration: InputDecoration(
                      border: OutlineInputBorder(), labelText: 'Password'),
                  controller: _PasswordController,
                  validator: (value) {
                    if (value == null || value.isEmpty) {
                      return 'Please enter password';
                    }
                    return null;
                  },
                ),
                TextButton(
                  onPressed: () {
                    if (_formKey.currentState!.validate()) {
                      ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(content: Text('Processing Data')),
                      );
                    }
                  },
                  child: Text('Login',
                      style: TextStyle(
                          fontSize: 24,
                          color: Colors.grey[800],
                          fontWeight: FontWeight.bold)),
                ),
              ]
              ),
          ),
        ),
      ),
    );
  }

2

Answers


  1. Please try this code
            
    @override
          Widget build(BuildContext context) {
            return Scaffold(
              appBar: AppBar(
                title: Text(widget.title),
              ),
              body: Center(
                child: Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: Form(
                    key: _formKey,
                    child: Column(children: [
                      Row(children: [
                        Expanded(
                          child: TextFormField(
                            decoration: InputDecoration(border: OutlineInputBorder(), labelText: 'Email Address'),
                            controller: _EmailAddressController,
                            validator: (value) {
                              if (value == null || value.isEmpty) {
                                return 'Please enter email';
                              }
                              return null;
                            },
                          ),
                        ),
                        Expanded(
                          child: TextButton(
                            onPressed: () {
                              if (_formKey.currentState!.validate()) {
                                ScaffoldMessenger.of(context).showSnackBar(
                                  const SnackBar(content: Text('Processing Data')),
                                );
                              }
                            },
                            child: Text('Send Code', style: TextStyle(fontSize: 24, color: Colors.green[800], fontWeight: FontWeight.bold)),
                          ),
                        )
                      ]),
                      const SizedBox(height: 10),
                      TextFormField(
                        obscureText: true,
                        decoration: const InputDecoration(border: OutlineInputBorder(), labelText: 'Password'),
                        controller: _PasswordController,
                      ),
                      TextButton(
                        onPressed: () {
                          if (_formKey.currentState!.validate()) {
                            ScaffoldMessenger.of(context).showSnackBar(
                              const SnackBar(content: Text('Processing Data')),
                            );
                          }
                        },
                        child: Text('Login', style: TextStyle(fontSize: 24, color: Colors.grey[800], fontWeight: FontWeight.bold)),
                      ),
                    ]),
                  ),
                ),
              ),
            );
          }
    
    Login or Signup to reply.
  2. You can check if _EmailAddressController has the text then validate for password.

    Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: Form(
                  key: _formKey,
                  child: Column(children: [
                    Row(children: [
                      Expanded(
                        child: TextFormField(
                          decoration: InputDecoration(
                              border: OutlineInputBorder(),
                              labelText: 'Email Address'),
                          controller: _EmailAddressController,
                          validator: (value) {
                            if (value == null || value.isEmpty) {
                              return 'Please enter email';
                            }
                            return null;
                          },
                        ),
                      ),
                      Expanded(
                        child: TextButton(
                          onPressed: () {
                            if (_formKey.currentState!.validate()) {
                              ScaffoldMessenger.of(context).showSnackBar(
                                const SnackBar(content: Text('Processing Data')),
                              );
                            }
                          },
                          child: Text('Send Code',
                              style: TextStyle(
                                  fontSize: 24,
                                  color: Colors.green[800],
                                  fontWeight: FontWeight.bold)),
                        ),
                      )
                    ]),
                    SizedBox(height: 10),
                    TextFormField(
                      obscureText: true,
                      decoration: InputDecoration(
                          border: OutlineInputBorder(), labelText: 'Password'),
                      controller: _PasswordController,
                      validator: (value) {
                        if (!_EmailAddressController.text.isEmpty && (value == null || value.isEmpty)) {//You can also add condition for valid email.
                          return 'Please enter password';
                        }
                        return null;
                      },
                    ),
                    TextButton(
                      onPressed: () {
                        if (_formKey.currentState!.validate()) {
                          ScaffoldMessenger.of(context).showSnackBar(
                            const SnackBar(content: Text('Processing Data')),
                          );
                        }
                      },
                      child: Text('Login',
                          style: TextStyle(
                              fontSize: 24,
                              color: Colors.grey[800],
                              fontWeight: FontWeight.bold)),
                    ),
                  ]
                  ),
              ),
            ),
          ),
        );
      }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search