Login Fresh
LogiFresh helps you build a login easily with a friendly design, and very flexible for its construction.
Installation
Follow the install instructions here
Use demo
First you need to download the github repository and run the following commands:
git clone https://github.com/Krysthyan/login_fresh.git cd login_fresh/example flutter run
 |  |
|---|---|
 |  |
Languages docs
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.userPassword),
];
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 in callLogin, 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 within callLogin 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 use LoginFreshFooter 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 in signUp 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 logintextColor-> 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.userPassword),
];
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 for Facebook 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 the LoginFresh 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.userPassword),
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 cristhian.hernandez@softnux.io
Examples
You can see the full demo here 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.userPassword),
];
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 on the login button, he LoginFreshUserAndPasswordcalls the function added in callLogin, it receives 4 parameters BuildContext _context, Function isRequest, String user, String password. isRequestIt is used to add a loading in the part of the login button when it has been pressed, to enable this functionality within callLogininvoking said method with the true parameter isRequest(true), after developing all the necessary code you must disable it isResquest(false) so that the login button appears again (it serves 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 button is enabled again login. InLoginFreshYou can include a footer widget, for this case you can use it LoginFreshFooteror you can build your own widget and include it in the 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
},
);
}
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: trueand signUpcall 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, it signUpModelcontains 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 helps us 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 logintextColor-> the texts put in the login you can specify the color, for exampleColor(0xFFE7004C)backgroundColor-> It is the customization of the main color of the login, 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.userPassword),
];
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 LoginFreshis create a list of the types of login’s that we will have in our application. Then I explain what it isLoginFreshTypeLoginModel
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 is going to be executed when the user clicks that type of login, you can program your code, for example if you want to build a login, Facebookwithin this you perform all the functionality and import the necessary libraries. And in addition to this there is the parameter logo, this is used to use the logos of LoginFreshbut you can put the logo you want, it logois a string where you can put the path of where your image is to be put.
Within this you can also add the user login and password, as in the following example it widgetLoginFreshUserAndPassword()is a function that is specified previously, where it is explained how to build the widget LoginFreshUserAndPassword.
LoginFreshTypeLoginModel(
callFunction: (BuildContext _buildContext) {
Navigator.of(_buildContext).push(MaterialPageRoute(
builder: (_buildContext) => widgetLoginFreshUserAndPassword(),
));
},
logo: TypeLogo.userPassword),
Download Flutter Login UI source code on GitHub
https://github.com/Krysthyan/login_fresh
Provides the list of the opensource Flutter apps collection with GitHub repository.