Email Password Validation and API Request POST Method Using { Dio } in flutter

login.dart

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:segurosapp/constant/app_constant.dart';
import 'package:segurosapp/constant/colors.dart';
import 'package:segurosapp/pages/firstPage.dart';
import 'package:segurosapp/pages/registration.dart';

//import 'package:flutter_signin_button/flutter_signin_button.dart';

class Login extends StatefulWidget {
  //Login({Key? key}) : super(key: key);

  const Login({Key? key}) : super(key: key);

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

class _Login extends State<Login> {
  TextEditingController email_textField = TextEditingController();
  TextEditingController pwd_textField = TextEditingController();
  GlobalKey<FormState> ?_formKey;


  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _formKey = GlobalKey();
  }

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Stack(
        // ignore: prefer_const_literals_to_create_immutables
        children: [
          Image(
            width: width,
            height: height,
            image: AssetImage('asset/images/background.png'),
            fit: BoxFit.cover,
          ),
          Padding(
            padding: EdgeInsets.only(
              left: width * 0.05,
            ),
            //padding: EdgeInsets.only(left: width * 0.05, top: height * 0.4),
            child: SingleChildScrollView(
              child: Form(
                key: _formKey,
                child: Column(
                  //mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(
                      height: height * 0.395,
                    ),
                    Container(
                      child: Text(
                        'Login',
                        style: TextStyle(
                            fontSize: 40,
                            fontWeight: FontWeight.w700,
                            color: AppColors.font_color),
                      ),
                    ),
                    SizedBox(
                      height: height * 0.05,
                    ),
                    Text(
                      'Email',
                      style: TextStyle(
                          // fontSize: 40,
                          fontWeight: FontWeight.w600,
                          color: AppColors.font_color),
                    ),
                    SizedBox(
                      height: height * 0.01,
                    ),
                    Container(
                      height: height * 0.055,
                      width: width * 0.78,
                      child: TextFormField(
                        controller: email_textField,
                        validator: (value){
                          if(value!.isEmpty){
                            return 'email is required!';
                          }
                          if (!RegExp(
                              r"^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$")
                              .hasMatch(value)) {
                            return 'Please enter a valid Email';
                          }
                          return null;
                        },
                        cursorColor: AppColors.font_color,
                        style: TextStyle(color: AppColors.font_color),
                        decoration: InputDecoration(
                          fillColor: AppColors.font_color,
                          enabledBorder: new OutlineInputBorder(
                            borderRadius: new BorderRadius.circular(10.0),
                            borderSide: BorderSide(color: AppColors.font_color),
                          ),
                          focusedBorder: new OutlineInputBorder(
                            borderRadius: new BorderRadius.circular(10.0),
                            borderSide: BorderSide(color: AppColors.font_color),
                          ),
                        ),
                      ),
                    ),
                    SizedBox(
                      height: height * 0.035,
                    ),
                    Text(
                      'Password',
                      style: TextStyle(
                          //fontSize: 40,
                          fontWeight: FontWeight.w600,
                          color: AppColors.font_color),
                    ),
                    SizedBox(
                      height: height * 0.01,
                    ),
                    Container(
                      height: height * 0.055,
                      width: width * 0.78,
                      child: TextFormField(
                        obscureText: true,
                        validator: (value){
                          if(value!.isEmpty){
                            return 'Password is required!';
                          }
                          if (!RegExp(
                              r"^(?=.*[A-Z])(?=.*[!@#$&*])(?=.*[0-9])(?=.*[a-z]).{8,}$")
                              .hasMatch(value)) {
                            return 'Please enter a valid Password';
                          }
                          return null;
                        },
                        controller: pwd_textField,
                        cursorColor: AppColors.font_color,
                        style: TextStyle(color: AppColors.font_color),
                        decoration: InputDecoration(
                          fillColor: AppColors.font_color,
                          enabledBorder: new OutlineInputBorder(
                            borderRadius: new BorderRadius.circular(10.0),
                            borderSide: BorderSide(color: AppColors.font_color),
                          ),
                          focusedBorder: new OutlineInputBorder(
                            borderRadius: new BorderRadius.circular(10.0),
                            borderSide: BorderSide(color: AppColors.font_color),
                          ),
                        ),
                      ),
                    ),
                    SizedBox(
                      height: height * 0.02,
                    ),
                    Padding(
                      padding: EdgeInsets.only(left: width * 0.53),
                      child: Text(
                        'Olvidaste Password?',
                        style: TextStyle(
                            // fontSize: 40,
                            fontWeight: FontWeight.w600,
                            color: AppColors.font_color),
                      ),
                    ),
                    // SizedBox(
                    //   height: 15,
                    // ),
                    Row(
                      children: [
                        Container(
                          height: height * 0.065,
                          width: height * 0.065,
                          //color: Colors.red,
                          // child: Image(
                          //   image: AssetImage(
                          //     'assets/images/google.jpg',
                          //   ),
                          // ),
                          child: Container(
                              margin: EdgeInsets.all(10),
                              // height: 30,
                              // width: 30,
                              child: Image(
                                image: AssetImage(
                                  'asset/images/google.jpg',
                                ),
                              )),
                          decoration: BoxDecoration(
                            // image: DecorationImage(
                            //   // image: AssetImage(
                            //   //   'assets/images/google.jpg',
                            //   // ),
                            // ),
                            color: Colors.white,
                            boxShadow: [
                              BoxShadow(
                                color: Colors.grey.withOpacity(0.2),
                                spreadRadius: 2,
                                blurRadius: 4,
                                offset:
                                    Offset(3, 3), // changes position of shadow
                              ),
                            ],
                          ),
                        ),
                        SizedBox(
                          width: width * 0.045,
                        ),
                        Container(
                          height: height * 0.065,
                          width: height * 0.065,
                          //color: Colors.red,
                          child: Image(
                            image: AssetImage('asset/images/facebook.jpg'),
                          ),
                          decoration: BoxDecoration(
                            color: Colors.white,
                            boxShadow: [
                              BoxShadow(
                                color: Colors.grey.withOpacity(0.2),
                                spreadRadius: 2,
                                blurRadius: 4,
                                offset:
                                    Offset(3, 3), // changes position of shadow
                              ),
                            ],
                          ),
                        ),
                        SizedBox(
                          width: width * 0.045,
                        ),
                        Container(
                          height: height * 0.065,
                          width: height * 0.065,
                          //color: Colors.red,
                          child: Image(
                            image: AssetImage('asset/images/apple.jpg'),
                          ),
                          decoration: BoxDecoration(
                            color: Colors.white,
                            boxShadow: [
                              BoxShadow(
                                color: Colors.grey.withOpacity(0.2),
                                spreadRadius: 2,
                                blurRadius: 4,
                                offset:
                                    Offset(3, 3), // changes position of shadow
                              ),
                            ],
                          ),
                        )
                      ],
                    ),
                    SizedBox(
                      height: height * 0.08,
                    ),
                    Row(
                      children: [
                        Container(
                          //padding: EdgeInsets.only(top: height * 0.97),
                          child: Row(
                            children: [
                              Text(
                                'Nuevo Aqui? ',
                                style:
                                    TextStyle(color: Colors.white, fontSize: 15),
                              ),
                              InkWell(
                                onTap: () {
                                  // Navigator.push(
                                  //     context,
                                  //     MaterialPageRoute(
                                  //         builder: (context) => Registration()));

                                  Navigator.of(context).push(
                                    PageRouteBuilder(
                                      transitionDuration:
                                          Duration(milliseconds: 1000),
                                      pageBuilder: (BuildContext context,
                                          Animation<double> animation,
                                          Animation<double> secondaryAnimation) {
                                        return Registration();
                                      },
                                      transitionsBuilder: (BuildContext context,
                                          Animation<double> animation,
                                          Animation<double> secondaryAnimation,
                                          Widget child) {
                                        return Align(
                                          child: FadeTransition(
                                            opacity: animation,
                                            child: child,
                                          ),
                                        );
                                      },
                                    ),
                                  );
                                },
                                child: Text(
                                  'Registro',
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold,
                                      fontSize: 16),
                                ),
                              )
                            ],
                          ),
                        ),
                        SizedBox(
                          width: width * 0.199,
                        ),
                        InkWell(
                          onTap: () {
                            validateCredential();
                            // callLoginAPI();
                            // Navigator.push(
                            //     context,
                            //     MaterialPageRoute(
                            //         builder: (context) => HomePage()));
                          },
                          child: Padding(
                            padding: const EdgeInsets.only(bottom: 30.0),
                            child: Container(
                              //padding: EdgeInsets.only(top: height * 0.7),
                              //alignment: Alignment.bottomRight,
                              height: height * 0.07,
                              width: width * 0.3,
                              //color: Colors.red,
                              decoration: BoxDecoration(
                                  border:
                                      Border.all(width: 1, color: Colors.white),
                                  borderRadius: BorderRadius.circular(8)),
                              child: Center(
                                child: Text(
                                  'Login',
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontSize: width * 0.055),
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                    SizedBox(
                      height: height * 0.2,
                    )
                  ],
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

  callLoginAPI() async {
    try {
      // static const domain_seguro_dio = 'http://ec2-3-130-14-198.us-east-2.compute.amazonaws.com:8000'; This is use inside the post method
      var response = await Dio()
          .post(App_Constant.domain_seguro_dio + '/user/login', data: {
        "email": email_textField.text,
        "password": pwd_textField.text
      });
      if (response.statusCode == 200) {
        print(response.data);
        Navigator.of(context).push(PageRouteBuilder(
            transitionDuration: Duration(milliseconds: 1000),
            pageBuilder: (BuildContext context, Animation<double> animation,
                Animation<double> secondaryAnimation) {
              return HomePage();
            },
            transitionsBuilder: (BuildContext context,
                Animation<double> animation,
                Animation<double> secondaryAnimation,
                Widget child) {
              return Align(
                child: FadeTransition(
                  opacity: animation,
                  child: child,
                ),
              );
            }));
      } else {
        print(response.statusCode);
      }
    } catch (e) {
      print("error try catch block");
    }
  }

  validateCredential() async{
    _formKey!.currentState!.save();
    if(!_formKey!.currentState!.validate()){
      print("not Validation !");
    }else{
      await callLoginAPI();
    }
  }
}