skip to Main Content

I have one login page .dart that contains 3 seperate object class dart such as : InputEmail , Password and ButtonLogin which its split each other but it’s called together in login page
My problem is how can i validate form input email and password when i submit the button login when field is empty and email not valid

I tried to create Globalkey FormState inside login page and call it on button login class dart though
Onpressed event but nothing give me error message.

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
  final _formKey = GlobalKey<FormState>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              colors: [Colors.redAccent, Colors.lightBlueAccent]),
        ),
        key: _formKey,
        child: ListView(
          children: <Widget>[
            Column(
              children: <Widget>[
                Row(children: const <Widget>[
                  VerticalText(),
                  TextLogin(),
                ]),
                const InputEmail(),
                const PasswordInput(),
                const ButtonLogin(),
                const FirstTime(),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
class ButtonLogin extends StatefulWidget {
  const ButtonLogin({Key? key}) : super(key: key);

  @override
  _ButtonLoginState createState() => _ButtonLoginState();
}

class _ButtonLoginState extends State<ButtonLogin> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 40, right: 50, left: 200),
      child: Container(
        alignment: Alignment.bottomRight,
        height: 50,
        width: MediaQuery.of(context).size.width,
        decoration: BoxDecoration(
          boxShadow: const [
            BoxShadow(
              color: Colors.blue,
              blurRadius: 10.0, // has the effect of softening the shadow
              spreadRadius: 1.0, // has the effect of extending the shadow
              offset: Offset(
                5.0, // horizontal, move right 10
                5.0, // vertical, move down 10
              ),
            ),
          ],
          color: Colors.white,
          borderRadius: BorderRadius.circular(30),
        ),
        child: FlatButton(
          onPressed: () {
            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: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const <Widget>[
              Text(
                'OK',
                style: TextStyle(
                  color: Colors.lightBlueAccent,
                  fontSize: 14,
                  fontWeight: FontWeight.w700,
                ),
              ),
              Icon(
                Icons.arrow_forward,
                color: Colors.lightBlueAccent,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

2

Answers


  1. You can pass the callback of onPressed function of button to Login Page and validate it there.

    class ButtonLogin extends StatefulWidget {
      const ButtonLogin({Key? key, required this.onPressed}) : super(key: key);
      final VoidCallBack onPressed ;
    
    
      @override
      _ButtonLoginState createState() => _ButtonLoginState();
    }
    
    class _ButtonLoginState extends State<ButtonLogin> {
      @override
      Widget build(BuildContext context) {
        return Padding(
          child: Container(
            ....
            child: FlatButton(
              onPressed: widget.onPressed,
              child: Row(
               ...
        );
      }
    }
    

    and change add this onPressed parameter inside ButtonLogin widget on Login page

    const InputEmail(),
    const PasswordInput(),
    const ButtonLogin(onPressed: () {
                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')),
                      );
                    }
              },),
    const FirstTime(),
    
    Login or Signup to reply.
  2. The easy way is to create a single StateFulWidget and within the StateFulWidget, you brake your form Widgets (InputEmail, Password and ButtonLogin) into separate Widget methods(functions). Afterward Wrap them with a Form widget using Row, Column or any Widget that accept list.

    Next you add the _formKey to the Form widget. I will advice the use of controller for your inputs. Below is an example using your code. By the way change FlatButton -> TextButton

    import 'package:flutter/material.dart';
    
    class LoginPage extends StatefulWidget {
      const LoginPage({super.key});
    
      @override
      State<LoginPage> createState() => _LoginPageState();
    }
    
    class _LoginPageState extends State<LoginPage> {
      final _formKey = GlobalKey<FormState>();
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Container(
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.topRight,
                  end: Alignment.bottomLeft,
                  colors: [Colors.redAccent, Colors.lightBlueAccent]),
            ),
            child: Form(
              key: _formKey,
              child: ListView(
                children: [
                  Column(
                    children: [
                      // inputEmail(),
                      // passwordInput(),
                      buttonLogin(),
                    ],
                  ),
                ],
              ),
            ),
          ),
        );
      }
    
      Widget buttonLogin() {
        return Padding(
          padding: const EdgeInsets.only(top: 40, right: 50, left: 200),
          child: Container(
            alignment: Alignment.bottomRight,
            height: 50,
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(30),
              boxShadow: const [
                BoxShadow(
                  color: Colors.blue,
                  blurRadius: 10.0,
                  spreadRadius: 1.0,
                  offset: Offset(5.0, 5.0),
                ),
              ],
            ),
            child: TextButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('Processing Data')),
                  );
                }
              },
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const <Widget>[
                  Text(
                    'OK',
                    style: TextStyle(
                      color: Colors.lightBlueAccent,
                      fontSize: 14,
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                  Icon(
                    Icons.arrow_forward,
                    color: Colors.lightBlueAccent,
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search