Design fresh of login in flutter

login fresh

logifresh helps you build a login easily with a friendly design, and very flexible for its construction.

use demo

first you need to download the github repository and run the following commands:

krysthyan/login_fresh.git
cd login_fresh/demo
flutter run

examples

you can view the complete demo in the demo project

complete code of the example

import 'package:flutter/material.dart';  
import 'package:login_fresh/login_fresh.dart';  
 
void main() {  
 runapp(myapp());  
}  
 
class myapp extends statefulwidget {  
 //you have to create a list with the type of login's that you are going to import into your application  
 
 @override  
 _myappstate createstate() => _myappstate();  
}  
 
class _myappstate extends state<myapp> {  
 @override  
 widget build(buildcontext context) {  
 
 
   return materialapp(  
       title: 'flutter demo',  
       theme: themedata(  
         primaryswatch: colors.blue,  
         visualdensity: visualdensity.adaptiveplatformdensity,  
       ),  
       home: scaffold(  
           body: buildloginfresh()));  
 }  
 
 loginfresh buildloginfresh() {  
 
   list<loginfreshtypeloginmodel> listlogin = [  
     loginfreshtypeloginmodel(  
         callfunction: (buildcontext _buildcontext) {  
           // develop what they want the facebook to do when the user clicks  
 },  
         logo: typelogo.facebook),  
     loginfreshtypeloginmodel(  
         callfunction: (buildcontext _buildcontext) {  
           // develop what they want the google to do when the user clicks  
 },  
         logo: typelogo.google),  
     loginfreshtypeloginmodel(  
         callfunction: (buildcontext _buildcontext) {  
           print("apple");  
           // develop what they want the apple to do when the user clicks  
 },  
         logo: typelogo.apple),  
     loginfreshtypeloginmodel(  
         callfunction: (buildcontext _buildcontext) {  
           navigator.of(_buildcontext).push(materialpageroute(  
             builder: (_buildcontext) => widgetloginfreshuserandpassword(),  
           ));  
         },  
         logo: typelogo.user_password),  
   ];  
 
   return loginfresh(  
           pathlogo: 'assets/logo.png',  
           isexploreapp: true,  
           functionexploreapp: () {  
             // develop what they want the exploreapp to do when the user clicks  
 },  
           isfooter: true,  
           widgetfooter: this.widgetfooter(),  
           typeloginmodel: listlogin,  
           issignup: true,  
           widgetsignup: this.widgetloginfreshsignup(),  
     );  
 }  
 
 widget widgetloginfreshuserandpassword() {  
   return loginfreshuserandpassword(  
             calllogin: (buildcontext _context, function isrequest,  
                 string user, string password) {  
               isrequest(true);  
 
               future.delayed(duration(seconds: 2), () {  
                 print('-------------- function call----------------');  
                 print(user);  
                 print(password);  
                 print('-------------- end call----------------');  
 
                 isrequest(false);  
               });  
             },  
             logo: './assets/logo_head.png',  
             isfooter: true,  
             widgetfooter: this.widgetfooter(),  
             isresetpassword: true,  
             widgetresetpassword: this.widgetresetpassword(),  
             issignup: true,  
             signup: this.widgetloginfreshsignup(),  
           );  
 }  
 
 widget widgetresetpassword() {  
   return loginfreshresetpassword(  
     logo: 'assets/logo_head.png',  
     funresetpassword: (buildcontext _context, function isrequest, string email) {  
       isrequest(true);  
 
       future.delayed(duration(seconds: 2), () {  
         print('-------------- function call----------------');  
         print(email);  
         print('-------------- end call----------------');  
         isrequest(false);  
 
       });  
     },  
 
     isfooter: true,  
     widgetfooter: this.widgetfooter(),  
   );  
 }  
 
 widget widgetfooter() {  
   return loginfreshfooter(  
     logo: 'assets/logo_footer.png',  
     text: 'power by',  
     funfooterlogin: () {  
       // develop what they want the footer to do when the user clicks  
 },  
   );  
 }  
 
 widget widgetloginfreshsignup() {  
   return loginfreshsignup(  
     isfooter: true,  
       widgetfooter: this.widgetfooter(),  
       logo: 'assets/logo_head.png',  
       funsignup: (buildcontext _context, function isrequest,  
           signupmodel signupmodel) {  
         isrequest(true);  
 
         print(signupmodel.email);  
         print(signupmodel.password);  
         print(signupmodel.repeatpassword);  
         print(signupmodel.surname);  
         print(signupmodel.name);  
 
         isrequest(false);  
       });  
 }  
}

login with user and password

widget widgetloginfreshuserandpassword() {  
  return loginfreshuserandpassword(  
            calllogin: (buildcontext _context, function isrequest,  
                string user, string password) {  
              isrequest(true);  
  
              future.delayed(duration(seconds: 2), () {  
                print('-------------- function call----------------');  
                print(user);  
                print(password);  
                print('--------------   end call   ----------------');   
  
                isrequest(false);  
              });  
            },  
            logo: './assets/logo_head.png',  
            isfooter: true,  
            widgetfooter: this.widgetfooter(),  
            isresetpassword: true,  
            widgetresetpassword: this.widgetresetpassword(),  
            issignup: true,  
            signup: this.widgetloginfreshsignup(),  
          );  
}

the moment the user clicks the login button, loginfreshuserandpassword calls the function added incalllogin, it receives 4 parameters buildcontext _context, function isrequest, string user, string password.
isrequest serves to add a loading in the part of the login button when it has been clicked, to enable this functionality withincalllogin invoke said method with the true parameter isrequest (true), after developing all the necessary code you must disable isresquest (false) so that the login button appears again (it is used for cases such as when the credentials were incorrect or when you query an api and have to wait until the response server), you can see the example where i have put a timer (future.delayed), where calllogin is called and after 2 seconds the login button is enabled again.

in logifresh you can include a footer widget, for this case you can useloginfreshfooter or build yourself the widget you want to put in that part.

widget widgetfooter() {  
  return loginfreshfooter(  
    logo: 'assets/logo_footer.png',  
    text: 'power by',  
    funfooterlogin: () {  
      // develop what they want the footer to do when the user clicks  
  },  
  );  
}

additionally, you can enable the functionality of registering users, where you capture user information such as (email, name, surname, password, repeat password). to achieve that part you must put in the variable issignup: true and insignup call the widget loginfreshsingup. below you can see an example of how to build the widget. this must be passed a function that receives 3 parameters buildcontext _context, function isrequest, signupmodel signupmodel, the isrequest method has the same functionality explained above,signupmodel contains the information of the inputs when the user clicks on the register button.

widget widgetloginfreshsignup() {  
  return loginfreshsignup(  
    isfooter: true,  
      widgetfooter: this.widgetfooter(),  
      logo: 'assets/logo_head.png',  
      funsignup: (buildcontext _context, function isrequest, signupmodel signupmodel) {  
        isrequest(true);  
  
        print(signupmodel.email);  
	print(signupmodel.password);  
	print(signupmodel.repeatpassword);  
	print(signupmodel.surname);  
	print(signupmodel.name);  
  
        isrequest(false);  
      });  
}

finally we have the widget loginfreshresetpassword, it serves to give the user the functionality to request a password change from the email. in the return function of this widget you must add 3 parameters buildcontext _context, function isrequest, string email, isrequest has the functionality explained above and email is the string that the widget returns.

widget widgetresetpassword() {  
  return loginfreshresetpassword(  
    logo: 'assets/logo_head.png',  
    funresetpassword: (buildcontext _context, function isrequest, string email) {  
      isrequest(true);  
  
      future.delayed(duration(seconds: 2), () {  
        print('-------------- function call----------------');  
        print(email);  
        print('--------------   end call   ----------------');  
        isrequest(false);  
      });  
    },  
  
    isfooter: true,  
    widgetfooter: this.widgetfooter(),  
  );  
}

in parameters of each widget there are some that are options but that help to personalize your login. the functionality of each is explained below:

• logo -> this parameter is to enter the url of the image that we want to put in our login
• textcolor -> the texts set in the login you can specify the color, for examplecolor (0xffe7004c)
• backgroundcolor -> it is the customization of the main login color, you can specify the color you want as for examplecolor (0xffe7004c)
• loginfreshwords -> it is a class where you can specify or customize the strings that are in your login, for exampleloginfreswords (login: 'login fesh', signup: 'sign up fresh', ...)

login with social networks

loginfresh gives you the functionality to add various types of login, the same ones that you can program them as you wish, below i present an example and an explanation of how it works.

loginfresh buildloginfresh() {  
  list<loginfreshtypeloginmodel> listlogin = [  
    loginfreshtypeloginmodel(  
        callfunction: (buildcontext _buildcontext) {  
          // develop what they want the facebook to do when the user clicks  
  },  
        logo: typelogo.facebook),  
    loginfreshtypeloginmodel(  
        callfunction: (buildcontext _buildcontext) {  
          // develop what they want the google to do when the user clicks  
  },  
        logo: typelogo.google),  
    loginfreshtypeloginmodel(  
        callfunction: (buildcontext _buildcontext) {  
          print("apple");  
          // develop what they want the apple to do when the user clicks  
  },  
        logo: typelogo.apple),  
    loginfreshtypeloginmodel(  
        callfunction: (buildcontext _buildcontext) {  
          navigator.of(_buildcontext).push(materialpageroute(  
            builder: (_buildcontext) => widgetloginfreshuserandpassword(),  
          ));  
        },  
        logo: typelogo.user_password),  
  ];  
  return loginfresh(  
          pathlogo: 'assets/logo.png',  
          isexploreapp: true,  
          functionexploreapp: () {  
            // develop what they want the exploreapp to do when the user clicks  
  },  
          isfooter: true,  
          widgetfooter: this.widgetfooter(),  
          typeloginmodel: listlogin,  
          issignup: true,  
          widgetsignup: this.widgetloginfreshsignup(),  
    );  
}

the first thing we must do to create our loginfresh is create a list of the types of login’s that we will have in our application. next i explain what is loginfreshtypeloginmodel

loginfreshtypeloginmodel(  
        callfunction: (buildcontext _buildcontext) {  
          // develop what they want the facebook to do when the user clicks  
  },  
        logo: typelogo.facebook),

there are two parameters callfunction, logo, the first is the function that will be executed when the user clicks that type of login, you can program your code as for example if you want to build a login forfacebook within this you do all the functionality and import the necessary libraries. and in addition to this there is the logo parameter, this is used to use theloginfresh logos but you can put the logo you want, logo is a string where you can put the path of where your image is to put.

within this you can also add the user login and password, like this in the following example widgetloginfreshuserandpassword () is a function that is specified previously, where it is explained how to build the loginfreshuserandpassword widget.

loginfreshtypeloginmodel(  
   callfunction: (buildcontext _buildcontext) {  
     navigator.of(_buildcontext).push(materialpageroute(  
       builder: (_buildcontext) => widgetloginfreshuserandpassword(),  
     ));  
   },  
   logo: typelogo.user_password),

feedback

your comments and suggestions are very important for the growth of loginfresh, for that reason you can leave them in the [github] repository (https://github.com/krysthyan/login_fresh) or you can create forks to improve the package, i appreciate your collaboration: smiley:: smiley: if you need help write to me at [email protected]

ejemplos

puedes ver el demo completo aquí demo project

código completo del ejemplo

import 'package:flutter/material.dart';  
import 'package:login_fresh/login_fresh.dart';  
 
void main() {  
 runapp(myapp());  
}  
 
class myapp extends statefulwidget {  
 //you have to create a list with the type of login's that you are going to import into your application  
 
 @override  
 _myappstate createstate() => _myappstate();  
}  
 
class _myappstate extends state<myapp> {  
 @override  
 widget build(buildcontext context) {  
 
 
   return materialapp(  
       title: 'flutter demo',  
       theme: themedata(  
         primaryswatch: colors.blue,  
         visualdensity: visualdensity.adaptiveplatformdensity,  
       ),  
       home: scaffold(  
           body: buildloginfresh()));  
 }  
 
 loginfresh buildloginfresh() {  
 
   list<loginfreshtypeloginmodel> listlogin = [  
     loginfreshtypeloginmodel(  
         callfunction: (buildcontext _buildcontext) {  
           // develop what they want the facebook to do when the user clicks  
 },  
         logo: typelogo.facebook),  
     loginfreshtypeloginmodel(  
         callfunction: (buildcontext _buildcontext) {  
           // develop what they want the google to do when the user clicks  
 },  
         logo: typelogo.google),  
     loginfreshtypeloginmodel(  
         callfunction: (buildcontext _buildcontext) {  
           print("apple");  
           // develop what they want the apple to do when the user clicks  
 },  
         logo: typelogo.apple),  
     loginfreshtypeloginmodel(  
         callfunction: (buildcontext _buildcontext) {  
           navigator.of(_buildcontext).push(materialpageroute(  
             builder: (_buildcontext) => widgetloginfreshuserandpassword(),  
           ));  
         },  
         logo: typelogo.user_password),  
   ];  
 
   return loginfresh(  
           pathlogo: 'assets/logo.png',  
           isexploreapp: true,  
           functionexploreapp: () {  
             // develop what they want the exploreapp to do when the user clicks  
 },  
           isfooter: true,  
           widgetfooter: this.widgetfooter(),  
           typeloginmodel: listlogin,  
           issignup: true,  
           widgetsignup: this.widgetloginfreshsignup(),  
     );  
 }  
 
 widget widgetloginfreshuserandpassword() {  
   return loginfreshuserandpassword(  
             calllogin: (buildcontext _context, function isrequest,  
                 string user, string password) {  
               isrequest(true);  
 
               future.delayed(duration(seconds: 2), () {  
                 print('-------------- function call----------------');  
                 print(user);  
                 print(password);  
                 print('-------------- end call----------------');  
 
                 isrequest(false);  
               });  
             },  
             logo: './assets/logo_head.png',  
             isfooter: true,  
             widgetfooter: this.widgetfooter(),  
             isresetpassword: true,  
             widgetresetpassword: this.widgetresetpassword(),  
             issignup: true,  
             signup: this.widgetloginfreshsignup(),  
           );  
 }  
 
 widget widgetresetpassword() {  
   return loginfreshresetpassword(  
     logo: 'assets/logo_head.png',  
     funresetpassword: (buildcontext _context, function isrequest, string email) {  
       isrequest(true);  
 
       future.delayed(duration(seconds: 2), () {  
         print('-------------- function call----------------');  
         print(email);  
         print('-------------- end call----------------');  
         isrequest(false);  
 
       });  
     },  
 
     isfooter: true,  
     widgetfooter: this.widgetfooter(),  
   );  
 }  
 
 widget widgetfooter() {  
   return loginfreshfooter(  
     logo: 'assets/logo_footer.png',  
     text: 'power by',  
     funfooterlogin: () {  
       // develop what they want the footer to do when the user clicks  
 },  
   );  
 }  
 
 widget widgetloginfreshsignup() {  
   return loginfreshsignup(  
     isfooter: true,  
       widgetfooter: this.widgetfooter(),  
       logo: 'assets/logo_head.png',  
       funsignup: (buildcontext _context, function isrequest,  
           signupmodel signupmodel) {  
         isrequest(true);  
 
         print(signupmodel.email);  
         print(signupmodel.password);  
         print(signupmodel.repeatpassword);  
         print(signupmodel.surname);  
         print(signupmodel.name);  
 
         isrequest(false);  
       });  
 }  
}

login with user and password

widget widgetloginfreshuserandpassword() {  
  return loginfreshuserandpassword(  
            calllogin: (buildcontext _context, function isrequest,  
                string user, string password) {  
              isrequest(true);  
  
              future.delayed(duration(seconds: 2), () {  
                print('-------------- function call----------------');  
                print(user);  
                print(password);  
                print('--------------   end call   ----------------');   
  
                isrequest(false);  
              });  
            },  
            logo: './assets/logo_head.png',  
            isfooter: true,  
            widgetfooter: this.widgetfooter(),  
            isresetpassword: true,  
            widgetresetpassword: this.widgetresetpassword(),  
            issignup: true,  
            signup: this.widgetloginfreshsignup(),  
          );  
}

al momento que el usuario de click en el botón de login, loginfreshuserandpassword llama la función agregada en calllogin, esta recibe 4 parametros buildcontext _context, function isrequest, string user, string password.
isrequest sirve para agregar un loading en la parte del botón de login cuando ha sido pulsado, para habilitar esta funcionalidad dentro de calllogininvocar dicho metodo con el parametro true isrequest(true), despues de desarrollar todo el codigo necesario debes deshablitar isresquest(false) para que vuelva aparecer el botón de login (sirve para casos como cuando las credenciales fueron incorrectas o cuando haces consultas a una api y toca esperar hasta que el servidor de respuesta), puedes ver el ejemplo donde he puesto un timer (future.delayed), donde se llama calllogin y luego de 2 segundos vuelve habilitarse el botón de login.
en loginfresh tu puedes incluir un widget de footer, para este caso se puede utilizar loginfreshfooter o puedes contruir tu propio widget e incluirlo en el login

widget widgetfooter() {  
  return loginfreshfooter(  
    logo: 'assets/logo_footer.png',  
    text: 'power by',  
    funfooterlogin: () {  
      // develop what they want the footer to do when the user clicks  
  },  
  );  
}

adicional puedes habilitar la funcionalidad de registar usuarios, donde capturas información del usuario como (email, nombre, apellido, contraseña, repetir contraseña). para lograr esa parte debes poner en la variable issignup: true y en signup llamar el widget loginfreshsingup. a continuación puedes ver un ejemplo de como construir el widget. este se le debe pasar una función que recibe 3 parametros buildcontext _context, function isrequest, signupmodel signupmodel, el metodo isrequest tiene la misma funcionalidad explicada anteriormente, signupmodel contiene la información de los inputs cuando el usuario de click en el botón registrar.

widget widgetloginfreshsignup() {  
  return loginfreshsignup(  
    isfooter: true,  
      widgetfooter: this.widgetfooter(),  
      logo: 'assets/logo_head.png',  
      funsignup: (buildcontext _context, function isrequest, signupmodel signupmodel) {  
        isrequest(true);  
  
        print(signupmodel.email);  
	print(signupmodel.password);  
	print(signupmodel.repeatpassword);  
	print(signupmodel.surname);  
	print(signupmodel.name);  
  
        isrequest(false);  
      });  
}

por ultimo tenemos el widget loginfreshresetpassword, nos sirve para dar la funcionaldiad al usuario de solicitar un cambio de contraseña a partir del email. en la función de retorno de este widget se debe agregar 3 parametros buildcontext _context, function isrequest, string email, isrequest tiene la funcionalidad explicada anteriormente y email es el string que retorna el widget.

widget widgetresetpassword() {  
  return loginfreshresetpassword(  
    logo: 'assets/logo_head.png',  
    funresetpassword: (buildcontext _context, function isrequest, string email) {  
      isrequest(true);  
  
      future.delayed(duration(seconds: 2), () {  
        print('-------------- function call----------------');  
        print(email);  
        print('--------------   end call   ----------------');  
        isrequest(false);  
      });  
    },  
  
    isfooter: true,  
    widgetfooter: this.widgetfooter(),  
  );  
}

en parametros de cada widget existen algunos que son opciones pero que ayuda a la personalización de tu login. a continuación se explica la funcionalidad de cada uno:

• logo -> este parametro es para ingresar la url de la imagen que deseamos poner en nuestro login
• textcolor -> los textos puestos en el login tu puedes especificar el color, como por ejemplo color(0xffe7004c)
• backgroundcolor -> es la personalización del color principal del login, tu puedes especificar el color que desees como por ejm color(0xffe7004c)
• loginfreshwords -> es una clase donde tu puedes especificar o personalizar los strings que estan en tu login, por ejemplo loginfreswords(login: 'login fesh', signup: 'sign up fresh', ...)

login con redes sociales

loginfresh te da la funcionalidad de agregar varios tipos de login, los mismos que tu puedes pogramarlos como desees, a continuación te presento un ejemplo y la explicación de como es su funcionamiento.

loginfresh buildloginfresh() {  
  list<loginfreshtypeloginmodel> listlogin = [  
    loginfreshtypeloginmodel(  
        callfunction: (buildcontext _buildcontext) {  
          // develop what they want the facebook to do when the user clicks  
  },  
        logo: typelogo.facebook),  
    loginfreshtypeloginmodel(  
        callfunction: (buildcontext _buildcontext) {  
          // develop what they want the google to do when the user clicks  
  },  
        logo: typelogo.google),  
    loginfreshtypeloginmodel(  
        callfunction: (buildcontext _buildcontext) {  
          print("apple");  
          // develop what they want the apple to do when the user clicks  
  },  
        logo: typelogo.apple),  
    loginfreshtypeloginmodel(  
        callfunction: (buildcontext _buildcontext) {  
          navigator.of(_buildcontext).push(materialpageroute(  
            builder: (_buildcontext) => widgetloginfreshuserandpassword(),  
          ));  
        },  
        logo: typelogo.user_password),  
  ];  
  return loginfresh(  
          pathlogo: 'assets/logo.png',  
          isexploreapp: true,  
          functionexploreapp: () {  
            // develop what they want the exploreapp to do when the user clicks  
  },  
          isfooter: true,  
          widgetfooter: this.widgetfooter(),  
          typeloginmodel: listlogin,  
          issignup: true,  
          widgetsignup: this.widgetloginfreshsignup(),  
    );  
}

lo primero que debemos hacer para crear nuestro loginfreshes crear una lista de los tipos de login’s que vamos a tener en nuestra aplicación. a continuación te explico que es loginfreshtypeloginmodel

loginfreshtypeloginmodel(  
        callfunction: (buildcontext _buildcontext) {  
          // develop what they want the facebook to do when the user clicks  
  },  
        logo: typelogo.facebook),

existen dos parametros callfunction, logo, el primero es la función que se va a ejecutar cuando el usuario pulse ese tipo de login, puedes pogramar tu código como por ejemplo si quieres construir un login para facebook dentro de esta realizas toda la funcionalidad e importas las librerias necesarias. y adicional a esto hay el parametro logo, esto sirve para utilizar los logos de loginfresh pero tu puedes poner el logo que desees, logo es un string donde puedes poner el path de donde esta tu imagen a poner.

dentro de esto tu puedes agregar tambien el login de usuario y contraseña, como esta en el siguiente ejemplo widgetloginfreshuserandpassword() es una función que se encuentra especificada anteriormente, donde se explica como construir el widget de loginfreshuserandpassword.

loginfreshtypeloginmodel(  
   callfunction: (buildcontext _buildcontext) {  
     navigator.of(_buildcontext).push(materialpageroute(  
       builder: (_buildcontext) => widgetloginfreshuserandpassword(),  
     ));  
   },  
   logo: typelogo.user_password),