GitLocker: The Coding Marketplace

Description:

flutter login

Flutter Login #

FlutterLogin is a ready-made login/signup widget with many animation effects to
demonstrate the capabilities of Flutter

Installation #
Follow the install instructions here
Reference #

Property
Type
Description

onSignup
AuthCallback
Called when the user hit the submit button when in sign up mode. It receives a SignupData object, with name, password and, if additionalSignUpFields is not null, the additional fields filled in by the user in a Map<String,String>

onConfirmSignup
ConfirmSignupCallback
Called when the user hits the submit button when confirming signup. If not specified, signup will not be confirmed by user.

confirmSignupRequired
ConfirmSignupRequiredCallback
Additional option to decide in runtime if confirmation is required. If not specified, signup will be confirmed by user if onConfirmSignup is specified.

confirmSignupKeyboardType
TextInputType
The keyboard type of the confirm signup field

onResendCode
AuthCallback
Called when the user hits the resend code button when confirming signup. Only required when onConfirmSignup is provided.

onLogin
AuthCallback
Called when the user hit the submit button when in login mode

onRecoverPassword
RecoverCallback
Called when the user hit the submit button when in recover password mode

onConfirmRecover
ConfirmRecoverCallback
Called when the user submits confirmation code and sets password in recover password mode. If not specified, a confirmation code will not be used to recover password.

title
String
The large text above the login [Card], usually the app or company name. Leave the string empty or null if you want no title.

logo
ImageProvider or String
The image provider or asset path string for the logo image to be displayed

messages
LoginMessages
Describes all of the labels, text hints, button texts and other auth descriptions

theme
LoginTheme
FlutterLogin's theme. If not specified, it will use the default theme as shown in the demo gifs and use the colorsheme in the closest Theme widget

userType
LoginUserType
FlutterLogin's user type. If not specified, it will use the default user type as email

userValidator
FormFieldValidator<String>
User field validating logic, add your custom validation here. The default is email validation logic. Expects to return an error message [String] to be display if validation fails or [null] if validation succeeds

validateUserImmediately
bool
Should email be validated after losing focus [true] or after form submissions [false]. Default: [false]

passwordValidator
FormFieldValidator<String>
Same as userValidator but for password

onSubmitAnimationCompleted
Function
Called after the submit animation's completed. Put your route transition logic here

logoTag
String
Hero tag for logo image. If not specified, it will simply fade out when changing route

titleTag
String
Hero tag for title text. Need to specify LoginTheme.beforeHeroFontSize and LoginTheme.afterHeroFontSize if you want different font size before and after hero animation

showDebugButtons
bool
Display the debug buttons to quickly forward/reverse login animations. In release mode, this will be overridden to false regardless of the value passed in

hideForgotPasswordButton
bool
Hides the Forgot Password button if set to true

hideProvidersTitle
bool
Hides the title above login providers if set to true. In case the providers List is empty this is uneffective, as the title is hidden anyways. The default is false

disableCustomPageTransformer
bool
Disables the custom transition which causes RenderBox was not laid out error. See #97 for more info.

additionalSignUpFields
Map<String, UserFormField>
Used to specify the additional form fields; the form is shown right after signin up. You can provide at most 6 additional fields.

onSwitchToAdditionalFields
AdditionalFieldsCallback
Called when the user switches to additional fields.

navigateBackAfterRecovery
bool
Navigate back to the login page after successful recovery.

savedEmail
String
Prefilled value for user field (ie. saved from previous session via other means, ie. via SharedPreferences)

savedPassword
String
Prefilled value for password field (ie. saved from previous session via other means, ie. via SharedPreferences). Will set also confirmation password in Auth class

termsOfService
TermOfService
List of terms of service to be listed during registration. On onSignup callback LoginData contains a list of TermOfServiceResult

children
[Widget]
List of widgets that can be added to the stack of the login screen. Can be used to show custom banners or logos.

scrollable
bool
When set to true, the login card becomes scrollable instead of resizing when needed.

headerWidget
Widget
A widget that can be placed on top of the loginCard.

NOTE: It is recommended that the child widget of the Hero widget should be the
same in both places. For title's hero animation use the
LoginThemeHelper.loginTextStyle in the next screen to get the style of the
exact text widget in the login screen. LoginThemeHelper can be accessed by adding
this line
import 'package:flutter_login/theme.dart';
copied to clipboard
LoginMessages #

Property
Type
Description

userHint
String
Hint text of the user field [TextField] (Note: user field can be name, email or phone. For more info check: LoginUserType)

passwordHint
String
Hint text of the password [TextField]

confirmPasswordHint
String
Hint text of the confirm password [TextField]

forgotPasswordButton
String
Forgot password button's label

loginButton
String
Login button's label

signupButton
String
Signup button's label

recoverPasswordButton
String
Recover password button's label

recoverPasswordIntro
String
Intro in password recovery form

recoverPasswordDescription
String
Description in password recovery form, shown when the onConfirmRecover callback is not provided

recoverCodePasswordDescription
String
Description in password recovery form, shown when the onConfirmRecover callback is provided

goBackButton
String
Go back button's label. Go back button is used to go back to to login/signup form from the recover password form

confirmPasswordError
String
The error message to show when the confirm password not match with the original password

recoverPasswordSuccess
String
The success message to show after submitting recover password

confirmSignupIntro
String
The intro text for the confirm signup card

confirmationCodeHint
String
Hint text of the confirmation code [TextField]

confirmationCodeValidationError
String
The error message to show if confirmation code is empty

resendCodeButton
String
Resend code button's label

resendCodeSuccess
String
The success message to show after resending a confirmation code

confirmSignupButton
String
Confirm signup button's label

confirmSignupSuccess
String
The success message to show after confirming signup

confirmRecoverIntro
String
The intro text for the confirm recover password card

recoveryCodeHint
String
Hint text of the recovery code [TextField]

recoveryCodeValidationError
String
The error message to show if recovery code is empty

setPasswordButton
String
Set password button's label for password recovery

confirmRecoverSuccess
String
The success message to show after confirming recovered password

flushbarTitleError
String
The Flushbar title on errors

flushbarTitleSuccess
String
The Flushbar title on successes

providersTitle
String
A string shown above the login Providers, defaults to or login with

LoginTheme #

Property
Type
Description

primaryColor
Color
The background color of major parts of the widget like the login screen and buttons

accentColor
Color
The secondary color, used for title text color, loading icon, etc. Should be contrast with the [primaryColor]

errorColor
Color
The color to use for [TextField] input validation errors

cardTheme
CardTheme
The colors and styles used to render auth [Card]

inputTheme
InputDecorationTheme
Defines the appearance of all [TextField]s

buttonTheme
LoginButtonTheme
A theme for customizing the shape, elevation, and color of the submit button

titleStyle
TextStyle
Text style for the big title

bodyStyle
TextStyle
Text style for small text like the recover password description

textFieldStyle
TextStyle
Text style for [TextField] input text

buttonStyle
TextStyle
Text style for button text

beforeHeroFontSize
double
Defines the font size of the title in the login screen (before the hero transition)

afterHeroFontSize
double
Defines the font size of the title in the screen after the login screen (after the hero transition)

pageColorLight
Color
The optional light background color of login screen; if provided, used for light gradient instead of primaryColor

pageColorDark
Color
The optional dark background color of login screen; if provided, used for dark gradient instead of primaryColor

footerBottomPadding
double
The footer bottom Padding; defaults to 0 if not provided.

switchAuthTextColor
Color
The optional color for the switch authentication text, if nothing is specified [primaryColor] is used.

logoWidth
double
Width of the logo where 1 is the full width of the login card. ; defaults to 0.75 if not provided.

primaryColorAsInputLabel
bool
Set to true if you want to use the primary color for input labels. Defaults to false.

LoginUserType #

Enum
Description

EMAIL
The User Field will be set to be email

NAME
The User Field will be set to be username

FIRSTNAME
The User Field will be set to be first name

LASTNAME
The User Field will be set to be last name

PHONE
The User Field will be set to be phone

INTLPHONE
The User Field will be set to be phone with country code selection

TEXT
The User Field will be set to be text

[LoginUserType] will change how the user field [TextField] behaves. Autofills and Keyboard Type will be adjusted automatically for the type of user that you pass.
UserFormField #

Property
Type
Description

keyName
String
The identifier of the fields, it will be the key in the returned map. Please ensure this is unique, otherwise an Error will be thrown

displayName
String
The name of the field displayed on the form. Defaults to keyName if not given

defaultValue
String
The default value of the field, if given the field will be pre-filled in with this

fieldValidator
FormFieldValidator<String>
A function to validate the field. It should return null on success, or a string with the explanation of the error

icon
Icon?
The icon shown on the left of the field. Defaults to the user icon when not provided

userType
LoginUserType
The LoginUserType of the form. The right keyboard and suggestions will be shown accordingly. Defaults to LoginUserType.user

tooltip
InlineSpan
Additional description for that field

LoginProvider #

Property
Type
Description

button
Widget
Used for Buttons for [LoginProvider] - see example uses [SignInButton] package

icon
IconData
Icon that is used for a button for [LoginProvider]

label
String
The label shown under the provider

callback
ProviderAuthCallback
A Function called when the provider button is pressed. It must return null on success, or a String describing the error on failure.

providerNeedsSignUpCallback
ProviderNeedsSignUpCallback?
Optional. Requires that the additionalSignUpFields argument is passed to FlutterLogin. When given, this callback must return a Future<bool>. If it evaluates to true the card containing the additional signup fields is shown, right after the evaluation of callback. If not given the default behaviour is not to show the signup card.

NOTE: Both [button] and [icon] can be added to [LoginProvider], but [button] will take preference over [icon]
TermOfService #

Property
Type
Description

id
String
Used only on Signup callback to identify a single Term Of service if it's optional.

mandatory
bool
If set true and term is not check when form is validate on submit, the validation error message will be shown

text
String
Name of Term to show.

linkUrl
String
Web url link to additional term of services info.

validationErrorMessage
String
Validation error message to show.

initialValue
bool
Specify if checkbox is initialized checked

TermOfServiceResult

Property
Type
Description

term
TermOfService
Contains a termOfServiceObject.

accepted
bool
Indicates whether or not the term of service was selected during registration

Examples #
You can view the complete example in the example project which resulted in the
gif above
Basic example #
import 'package:flutter/material.dart';
import 'package:flutter_login/flutter_login.dart';
import 'dashboard_screen.dart';

const users = {
'dribbble@gmail.com': '12345',
'hunter@gmail.com': 'hunter',
};

class LoginScreen extends StatelessWidget {
const LoginScreen({super.key});

Duration get loginTime => const Duration(milliseconds: 2250);

Future<String?> _authUser(LoginData data) {
debugPrint('Name: ${data.name}, Password: ${data.password}');
return Future.delayed(loginTime).then((_) {
if (!users.containsKey(data.name)) {
return 'User not exists';
}
if (users[data.name] != data.password) {
return 'Password does not match';
}
return null;
});
}

Future<String?> _signupUser(SignupData data) {
debugPrint('Signup Name: ${data.name}, Password: ${data.password}');
return Future.delayed(loginTime).then((_) {
return null;
});
}

Future<String> _recoverPassword(String name) {
debugPrint('Name: $name');
return Future.delayed(loginTime).then((_) {
if (!users.containsKey(name)) {
return 'User not exists';
}
return null;
});
}

@override
Widget build(BuildContext context) {
return FlutterLogin(
title: 'ECORP',
logo: const AssetImage('assets/images/ecorp-lightblue.png'),
onLogin: _authUser,
onSignup: _signupUser,
onSubmitAnimationCompleted: () {
Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (context) => const DashboardScreen(),
));
},
onRecoverPassword: _recoverPassword,
);
}
}
copied to clipboard

Basic example with sign in providers #
import 'package:flutter/material.dart';
import 'package:flutter_login/flutter_login.dart';
import 'dashboard_screen.dart';

const users = {
'dribbble@gmail.com': '12345',
'hunter@gmail.com': 'hunter',
};

class LoginScreen extends StatelessWidget {
const LoginScreen({super.key});

Duration get loginTime => const Duration(milliseconds: 2250);

Future<String?> _authUser(LoginData data) {
debugPrint('Name: ${data.name}, Password: ${data.password}');
return Future.delayed(loginTime).then((_) {
if (!users.containsKey(data.name)) {
return 'User not exists';
}
if (users[data.name] != data.password) {
return 'Password does not match';
}
return null;
});
}

Future<String?> _signupUser(SignupData data) {
debugPrint('Signup Name: ${data.name}, Password: ${data.password}');
return Future.delayed(loginTime).then((_) {
return null;
});
}

Future<String> _recoverPassword(String name) {
debugPrint('Name: $name');
return Future.delayed(loginTime).then((_) {
if (!users.containsKey(name)) {
return 'User not exists';
}
return null;
});
}

@override
Widget build(BuildContext context) {
return FlutterLogin(
title: 'ECORP',
logo: const AssetImage('assets/images/ecorp-lightblue.png'),
onLogin: _authUser,
onSignup: _signupUser,

loginProviders: <LoginProvider>[
LoginProvider(
icon: FontAwesomeIcons.google,
label: 'Google',
callback: () async {
debugPrint('start google sign in');
await Future.delayed(loginTime);
debugPrint('stop google sign in');
return null;
},
),
LoginProvider(
icon: FontAwesomeIcons.facebookF,
label: 'Facebook',
callback: () async {
debugPrint('start facebook sign in');
await Future.delayed(loginTime);
debugPrint('stop facebook sign in');
return null;
},
),
LoginProvider(
icon: FontAwesomeIcons.linkedinIn,
callback: () async {
debugPrint('start linkdin sign in');
await Future.delayed(loginTime);
debugPrint('stop linkdin sign in');
return null;
},
),
LoginProvider(
icon: FontAwesomeIcons.githubAlt,
callback: () async {
debugPrint('start github sign in');
await Future.delayed(loginTime);
debugPrint('stop github sign in');
return null;
},
),
],
onSubmitAnimationCompleted: () {
Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (context) => const DashboardScreen(),
));
},
onRecoverPassword: _recoverPassword,
);
}
}
copied to clipboard

Theming via ThemeData #
Login theme can be customized indectly by using ThemeData like this
// main.dart
import 'package:flutter/material.dart';
import 'login_screen.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Login Demo',
theme: ThemeData(
primarySwatch: Colors.deepPurple,
accentColor: Colors.orange,
cursorColor: Colors.orange,
textTheme: const TextTheme(
headline3: TextStyle(
fontFamily: 'OpenSans',
fontSize: 45.0,
color: Colors.orange,
),
button: TextStyle(
fontFamily: 'OpenSans',
),
subtitle1: TextStyle(fontFamily: 'NotoSans'),
bodyText2: TextStyle(fontFamily: 'NotoSans'),
),
),
home: LoginScreen(),
);
}
}

// login_screen.dart
import 'package:flutter/material.dart';
import 'package:flutter_login/flutter_login.dart';
import 'dashboard_screen.dart';

class LoginScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return FlutterLogin(
title: 'ECORP',
logo: const AssetImage('assets/images/ecorp.png'),
onLogin: (_) => Future(null),
onSignup: (_) => Future(null),
onSubmitAnimationCompleted: () {
Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (context) => const DashboardScreen(),
));
},
onRecoverPassword: (_) => Future(null),
);
}
}
copied to clipboard

Custom labels #
import 'package:flutter/material.dart';
import 'package:flutter_login/flutter_login.dart';
import 'dashboard_screen.dart';

class LoginScreen extends StatelessWidget {
const LoginScreen({super.key});

@override
Widget build(BuildContext context) {
return FlutterLogin(
title: 'ECORP',
logo: const AssetImage('assets/images/ecorp.png'),
onLogin: (_) => Future(null),
onSignup: (_) => Future(null),
onSubmitAnimationCompleted: () {
Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (context) => const DashboardScreen(),
));
},
onRecoverPassword: (_) => Future(null),
messages: LoginMessages(
userHint: 'User',
passwordHint: 'Pass',
confirmPasswordHint: 'Confirm',
loginButton: 'LOG IN',
signupButton: 'REGISTER',
forgotPasswordButton: 'Forgot huh?',
recoverPasswordButton: 'HELP ME',
goBackButton: 'GO BACK',
confirmPasswordError: 'Not match!',
recoverPasswordDescription:
'Lorem Ipsum is simply dummy text of the printing and typesetting industry',
recoverPasswordSuccess: 'Password rescued successfully',
),
);
}
}

copied to clipboard

Login/Signup
Password Recovery

Theme customization #

import 'package:flutter/material.dart';
import 'package:flutter_login/flutter_login.dart';
import 'dashboard_screen.dart';

class LoginScreen extends StatelessWidget {
const LoginScreen({super.key});

@override
Widget build(BuildContext context) {
const inputBorder = BorderRadius.vertical(
bottom: Radius.circular(10.0),
top: Radius.circular(20.0),
);

return FlutterLogin(
title: 'ECORP',
logo: const AssetImage('assets/images/ecorp-lightgreen.png'),
onLogin: (_) => Future(null),
onSignup: (_) => Future(null),
onSubmitAnimationCompleted: () {
Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (context) => const DashboardScreen(),
));
},
onRecoverPassword: (_) => Future(null),
theme: LoginTheme(
primaryColor: Colors.teal,
accentColor: Colors.yellow,
errorColor: Colors.deepOrange,
titleStyle: const TextStyle(
color: Colors.greenAccent,
fontFamily: 'Quicksand',
letterSpacing: 4,
),
bodyStyle: const TextStyle(
fontStyle: FontStyle.italic,
decoration: TextDecoration.underline,
),
textFieldStyle: const TextStyle(
color: Colors.orange,
shadows: [Shadow(color: Colors.yellow, blurRadius: 2)],
),
buttonStyle: const TextStyle(
fontWeight: FontWeight.w800,
color: Colors.yellow,
),
cardTheme: CardTheme(
color: Colors.yellow.shade100,
elevation: 5,
margin: const EdgeInsets.only(top: 15),
shape: ContinuousRectangleBorder(
borderRadius: BorderRadius.circular(100.0)),
),
inputTheme: InputDecorationTheme(
filled: true,
fillColor: Colors.purple.withOpacity(.1),
contentPadding: EdgeInsets.zero,
errorStyle: const TextStyle(
backgroundColor: Colors.orange,
color: Colors.white,
),
labelStyle: const TextStyle(fontSize: 12),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.blue.shade700, width: 4),
borderRadius: inputBorder,
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.blue.shade400, width: 5),
borderRadius: inputBorder,
),
errorBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.red.shade700, width: 7),
borderRadius: inputBorder,
),
focusedErrorBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.red.shade400, width: 8),
borderRadius: inputBorder,
),
disabledBorder: const UnderlineInputBorder(
borderSide: BorderSide(color: Colors.grey, width: 5),
borderRadius: inputBorder,
),
),
buttonTheme: LoginButtonTheme(
splashColor: Colors.purple,
backgroundColor: Colors.pinkAccent,
highlightColor: Colors.lightGreen,
elevation: 9.0,
highlightElevation: 6.0,
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
// shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
// shape: CircleBorder(side: BorderSide(color: Colors.green)),
// shape: ContinuousRectangleBorder(borderRadius: BorderRadius.circular(55.0)),
),
),
);
}
}
copied to clipboard

Inspiration #

VNPAY App Interactions
Flat UI Login animated

License #

MIT License