animated login for flutter is a ready-made login/signup screen with soft and pleasant animations.
it is fully responsible to be able to use on both web and mobile apps. you can welcome your users with this beautiful animated screen that gives functionality for both login and sign up.
web view example video
mobile view example video
installation
you can follow the instructions for installation here
reference
property
type
description
onsignup
signupcallback
signup callback that will be called after signup button pressed.
onlogin
logincallback
login callback that will be called after login button pressed.
enum to determine which text form fields should be displayed in addition to the email and password fields: name / confirm password / both.
logintexts
property
type
description
welcome
string
welcome title in signup mode for the informing part.
welcomedescription
string
welcome description in signup mode for the informing part.
signup
string
action button text for sign up mode.
signupformtitle
string
form title for sign up mode.
signupuseemail
string
use email cta for sign up mode.
welcomeback
string
welcome title in login mode for the informing part.
welcomebackdescription
string
welcome description in login mode for the informing part.
login
string
action button text for login mode.
loginformtitle
string
form title for login mode.
loginuseemail
string
use email cta for login mode.
forgotpassword
string
forgot password text for login mode.
nothaveanaccount
string
text above the sign up button to direct users who don’t have an account.
alreadyhaveanaccount
string
text above the login button to direct users who already have an account.
namehint
string
hint text for name [textformfield]
emailhint
string
hint text for email [textformfield]
passwordhint
string
hint text for password [textformfield]
confirmpasswordhint
string
hint text for confirm password [textformfield]
passwordmatchingerror
string
the error text for not matching password and confirm password inputs.
dialogbuttontext
string
the button text of error dialog.
logintheme
property
type
description
formtitlestyle
textstyle
text style for the title of form part.
welcometitlestyle
textstyle
text style for the title of welcome part.
welcomedescriptionstyle
textstyle
text style for the description of welcome part.
changeactionstyle
textstyle
text style for the change action cta of welcome part.
useemailstyle
textstyle
text style for the use email text of form part.
forgotpasswordstyle
textstyle
text style for the forgot password cta of form part.
hinttextstyle
textstyle
text style for hint texts in the text form fields.
errortextstyle
textstyle
text style for error texts in the text form fields.
textformstyle
textstyle
text style for input texts in the text form fields.
actiontextstyle
textstyle
text style for action button text in the form part.
changeactiontextstyle
textstyle
text style for change action button text in the welcome part.
textformfielddeco
inputdecoration
input decoration for the text form fields.
nameicon
widget
prefix widget for name text form field.
emailicon
widget
prefix widget for email text form field.
passwordicon
widget
prefix widget for password text form field.
formfieldelevation
double
elevation for text form fields.
formfieldbackgroundcolor
color
background color for text form fields.
formfieldshadowcolor
color
shadow color for text form fields.
formfieldborderradius
borderradius
border radius for text form fields.
formfieldsize
size
size of text form fields.
formfieldhovercolor
color
hover color for text form fields.
backgroundcolor
color
background color of the login screen.
errorbordercolor
color
error border color for text form fields.
focusederrorbordercolor
color
focused error border color for text form fields.
focusedbordercolor
color
focused border color for text form fields.
enabledbordercolor
color
enabled border color for text form fields.
enabledborder
inputborder
enabled border for text form fields.
errorborder
inputborder
error border for text form fields.
focusederrorborder
inputborder
focused error border for text form fields.
focusedborder
inputborder
focused border for text form fields.
showformfielderrors
bool
indicates whether the error messages should be displayed below the text form fields.
showlabeltexts
bool
indicates whether the labels should be displayed above the text form fields.
socialloginhovercolor
color
hover color for social login widgets.
socialloginborder
borderside
border for social login widgets.
sociallogin
property
type
description
iconpath
string
full asset path of the social platform logo.
callback
sociallogincallback
the callback will be called on click to logo of the social platform.
logindata
property
type
description
email
string
email text the user entered to the email [textformfield]
password
string
password text the user entered to the password [textformfield]
signupdata
property
type
description
name
string
name text the user entered to the name [textformfield]
email
string
email text the user entered to the email [textformfield]
password
string
password text the user entered to the password [textformfield]
confirmpassword
string
confirm password text the user entered to the confirm password [textformfield]
signupmodes
enum
description
name
only displays name text form field, not displays confirm password.
confirmpassword
only displays confirm password form field, not name.
both
displays both name and confirm password text form fields.
sign up modes to determine which text form fields should be displayed.
complete example
you can see the complete example in the example folder with the example project. the video recordings for the example project are shown above via gifs.
basic example
import'package:flutter/material.dart';
import'package:animated_login/animated_login.dart';
classloginscreenextendsstatelesswidget {
constloginscreen({key? key}) :super(key: key);
/// simulates the multilanguage, you will implement your own logic. /// according to the current language, you can display a text message /// with the help of [logintexts] class.finalstring langcode ='en';
@overridewidgetbuild(buildcontext context) {
returnanimatedlogin(
onlogin: onlogin,
onsignup: onsignup,
onforgotpassword: onforgotpassword,
formwidthratio:60,
logo:'images/logo.gif',
// backgroundimage: 'images/background_image.jpg',
signupmode:signupmodes.both,
logintheme: _logintheme,
logintexts: _logintexts,
);
}
/// you can adjust the colors, text styles, button styles, borders /// according to your design preferences. /// you can also set some additional display options such as [showlabeltexts].loginthemeget_logintheme => logintheme(
// showlabeltexts: false,
backgroundcolor:colors.blue, // const color(0xff6666ff),
formfieldbackgroundcolor:colors.white,
changeactiontextstyle:consttextstyle(color:colors.white),
);
logintextsget_logintexts => logintexts(
namehint: _username,
login: _login,
signup: _signup,
);
/// you can adjust the texts in the screen according to the current language /// with the help of [logintexts], you can create a multilanguage scren.stringget_username => langcode =='tr'?'kullanıcı adı':'username';
stringget_login => langcode =='tr'?'giriş yap':'login';
stringget_signup => langcode =='tr'?'kayıt ol':'sign up';
/// login action that will be performed on click to action button in login mode.future<string?>onlogin(logindata logindata) async {
awaitfuture.delayed(constduration(seconds:2));
print('successfully logged in.');
returnnull;
}
/// sign up action that will be performed on click to action button in sign up mode.future<string?>onsignup(signupdata logindata) async {
awaitfuture.delayed(constduration(seconds:2));
print('successfully signed up.');
returnnull;
}
/// action that will be performed on click to "forgot password?" text/cta. /// probably you will navigate user to a page to create a new password after the verification.future<string?>onforgotpassword(string email) async {
awaitfuture.delayed(constduration(seconds:2));
print('successfully navigated.');
returnnull;
}
}
basic example with social login options and data checks
import'package:flutter/material.dart';
import'package:animated_login/animated_login.dart';
classloginscreenextendsstatelesswidget {
constloginscreen({key? key}) :super(key: key);
/// simulates the multilanguage, you will implement your own logic. /// according to the current language, you can display a text message /// with the help of [logintexts] class.finalstring langcode ='en';
@overridewidgetbuild(buildcontext context) {
returnanimatedlogin(
onlogin: onlogin,
onsignup: onsignup,
onforgotpassword: onforgotpassword,
formwidthratio:60,
logo:'images/logo.gif',
// backgroundimage: 'images/background_image.jpg',
signupmode:signupmodes.both,
sociallogins: _sociallogins,
logintheme: _logintheme,
logintexts: _logintexts,
);
}
/// you can adjust the colors, text styles, button styles, borders /// according to your design preferences. /// you can also set some additional display options such as [showlabeltexts].loginthemeget_logintheme => logintheme(
// showlabeltexts: false,
backgroundcolor:colors.blue, // const color(0xff6666ff),
formfieldbackgroundcolor:colors.white,
changeactiontextstyle:consttextstyle(color:colors.white),
);
logintextsget_logintexts => logintexts(
namehint: _username,
login: _login,
signup: _signup,
);
/// you can adjust the texts in the screen according to the current language /// with the help of [logintexts], you can create a multilanguage scren.stringget_username => langcode =='tr'?'kullanıcı adı':'username';
stringget_login => langcode =='tr'?'giriş yap':'login';
stringget_signup => langcode =='tr'?'kayıt ol':'sign up';
/// social login options, you should provide callback function and icon path. /// icon paths should be the full path in the assets /// don't forget to also add the icon folder to the "pubspec.yaml" file.list<sociallogin>get_sociallogins => <sociallogin>[
sociallogin(
callback: () async=>sociallogin('google'),
iconpath:'images/google.png'),
sociallogin(
callback: () async=>sociallogin('facebook'),
iconpath:'images/facebook.png'),
sociallogin(
callback: () async=>sociallogin('linkedin'),
iconpath:'images/linkedin.png'),
];
/// login action that will be performed on click to action button in login mode.future<string?>onlogin(logindata logindata) async {
awaitfuture.delayed(constduration(seconds:2));
print(""" successfully logged in.n email: ${logindata.email}n password: ${logindata.password}""");
returnnull;
}
/// sign up action that will be performed on click to action button in sign up mode.future<string?>onsignup(signupdata signupdata) async {
awaitfuture.delayed(constduration(seconds:2));
print(""" successfully signed up.n username: ${signupdata.name}n email: ${signupdata.email}n password: ${signupdata.password}n confirm password: ${signupdata.confirmpassword}""");
returnnull;
}
/// action that will be performed on click to "forgot password?" text/cta. /// probably you will navigate user to a page to create a new password after the verification.future<string?>onforgotpassword(string email) async {
awaitfuture.delayed(constduration(seconds:2));
print('successfully navigated. email is $email');
returnnull;
}
/// social login callback example.future<string?>sociallogin(string type) async {
awaitfuture.delayed(constduration(seconds:2));
print('successfully logged in with $type.');
returnnull;
}
}
more screenshots
web login
mobile login
web sign up
mobile sign up
color change
without social logins
error example
contributing
contributions are so important for both me and those who want to use this package. i will be very appreciative if you allocate time to push forward the package.
all help is welcomed but if you have questions, bug reports, issues, feature requests, pull requests, etc, please first refer to the contributing guide.