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
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
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';
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
I cannot use this package because it has an outdated version of provider as a dependency, Could you update the dependency please? Because every version of flutter_login depends on provider ^3.1.0 and flygyfs depends on provider ^4.0.1, flutter_login is forbidden.
When toggling signup mode on, the confirm field shows up correctly.
But when focusing any of the fields be it Email, Password, or Confirm password, it shows, and hides the keyboard instantly, while also disabling the Confirm Password field.
Even when I enable Desktop-mode, it still happens.
This does not happen in the browser. on my laptop.
Please let me know if you need more information on how to debug this.
I love your code for flutter_login and am using it in my application along with Firebase for authentication. Firebase supports enabling other auth providers beyond user/pass, including Google, Twitter, Facebook, etc. I'd really love it if I could incorporate those into my login widget, perhaps triggering an alternate event (onOAuth as opposed to onLogin?)
What I'm envisioning is a bar either above or below the login/pass fields that has a Column() populated with Button(Icon())'s of the services, and upon hitting the button we'd get a triggered onOAuth with an argument that specifies which service?
I have tried using the library. I wanted to know if I only want to use Sign In option and not SignUp option then how can I hide the SignUp button and forget password button
Describe the bug
isInitialRoute is deprecated in newer versions of flutter and is resulting to the following error The getter 'isInitialRoute' isn't defined for the class 'RouteSettings' clear and concise description of what the bug is.
Hi guys,
this looks great. But have an issue juster after installation.
This is the output of the terminal:
`Unable to find modules for some sources, this is usually the result of either a
bad import, a missing dependency in a package (or possibly a dev_dependency
needs to move to a real dependency), or a build failure (if importing a
generated file).
Please check the following imports:
import 'package:flutter_login/flutter_login.dart'; from project|lib/pages/login/index.dart at 2:1
`
I'm using the beta Channel of Flutter and the plugin installation is done (no error from VSCode) and no error from flutter doctor.
Could you please help me ?
As you can see, in the dark theme the readability of some of the texts is not very good. I've tried changing the theme and almost every TextTheme attribute I could find, and the most I can do is change the primaryColor of the Theme, and it only changes the "Register" button.
I do not know, if it's a OS issue or a flutter one. So, if it's not a flutter one, let me know.
I'm facing the problem, that everytime I click into the password textfield to enter my password, my keyboard locks the shift for the capital letter for the first letter. So i have to manually disable it.
I'm working with this awesome plugin since few days and I really enjoy it but I found out some issues that I don't know how to fix.
When the field are empty there are these error messages that unfortunately I'm not able to change or translate even if there is the class LoginMessages that somehow already implement this mechanism:
The second question that I would like to ask is: is there any possibility to add a Padding to the image above the title of the widget so that is not to close to the top of the screen?
It would be cool if this plugin allowed login through biometric authentication. So after the first login the user password could be stored inside biometric_storage and reused for later logins.
It should be configurable wether or not that feature is enabled. If interested i could attempt doing a PR for this.
Additional context
Works fine in the simulator, bug happens when compiled in release mode an running on the real device (I distributed it via TestFlight).
Only the theme, logo and company name was changed, login data was taken locally (as in the example).
Currently the width of the AnimatedButton is fixed. Ideally its width should grow if needed to fit the button's label text. See the button in the screenshot, which was taken with PR #14.
This is a Great login screen 👍.
I would like add, on bottom of screen, the Facebook login button.
Is is possible ?
I am new in Flutter Dev and I am not sure it is possible to add another widget or Flat button in the screen...
So I have an FirebaseAuth onStatechanged at the beginnig of my Application. When I am logged in I see my HomePage otherwise I go to the LoginScreen wich is implemented with flutter_login. However when I am logged in, I still get an error wich looks like this and is from this package.
The text in the login button for flutter for the web isn't positioning right. This is the only issue I have found when using this with the latest version of Flutter Master Channel.
I need to trigger the button to login twice in order to go to my next screen. First an animation is triggered and my logo disapear. Then after the second hit, the onSubmitAnimationCompleted is called and I am going to my Routing behavior.
Here are some screenshots : The first one if before the first click, and the second one just after it. I need to click again on the button to log-in.
-Expected behavior :
Only one click needed to go the the onSubmitAnimationCompleted.
Information (please complete the following information):
Device: OnePlus 7 pro
Platform: Android
Flutter version: 1.13.5
Package version: 1.0.13
Here is the sourceCode of my LoginPage :
class LoginScreen extends StatefulWidget {
@override
_LoginScreenState createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
@override
void initState() {
super.initState();
_handleStartScreen();
}
// Si le user est deja logué, on redirige vers la page de dashboard
Future<void> _handleStartScreen() async {
final authentService = Provider.of<AuthentService>(context, listen: false);
if (await authentService.isLoggedIn()) {
Navigator.pushReplacementNamed(context, Router.dashboardRoute);
}
}
@override
Widget build(BuildContext context) {
final authentService = Provider.of<AuthentService>(context);
final compteUtilisateurService = Provider.of<CompteUtilisateurService>(context);
return FlutterLogin(
title: 'Nounou gestion',
logo: 'assets/images/logo-sans-texte.png',
onLogin: authentService.signIn,
onSignup: authentService.signUp,
onRecoverPassword: authentService.recoverPassword,
showDebugButtons: false,
onSubmitAnimationCompleted: () async {
CompteUtilisateur infos = await compteUtilisateurService.getCompteUtilisateur(authentService.getIdUtilisateur());
// Pas encore renseigné les infos personelles, on le redirige donc le bon écran.
if (infos.id.isEmpty) {
Navigator.pushReplacementNamed(context, Router.infosPersosRoute, arguments: CompteUtilisateur());
} else {
Navigator.pushReplacementNamed(context, Router.dashboardRoute);
}
},
messages: LoginMessages(
usernameHint: 'Mail utilisateur',
passwordHint: 'Mot de passe',
confirmPasswordHint: 'Confirmation mot de passe',
loginButton: 'SE CONNECTER',
signupButton: 'S\'INSCRIRE',
forgotPasswordButton: 'Mot de passe oublié?',
recoverPasswordButton: 'Aidez-moi',
goBackButton: 'Retour',
confirmPasswordError: 'Les deux mots de passe ne sont pas identiques!',
recoverPasswordDescription: 'Un lien pour récupérer votre mot de passe va vous être envoyé par email.',
recoverPasswordSuccess: 'Email de récupération du mot de passe envoyé.',
),
);
}
}
Is it because i don't have any Hero in my other screens after loggedIn ?
Hello buddy!
First of all, thanks a lot for sharing your login screen ❤️ I really enjoy that and I am using it for my app.
I would like to suggest to strip the white spaces before putting them into LoginData object? Sometimes I accidently hit a whitespace and wonder why it does not work! :)
The logo property is a String passed to an Image.asset(). It would be nice if we had a Widget logoWidget property, so we could use, for instance, SvgImage.asset() (or really anything else we want as the logo).
As on my application, there is no signup only login and forgot password things are there, so I want to remove the signup button, how can I hide or remove signup button.
This is really beautifully done, thanks! Here's an idea to make it even nicer. It would be great to support a full sign-up flow, including entry of a confirmation code to confirm the account.
It could be an optional feature. The "confirm account" card would be a child of the auth card page transformer. When user clicks on "sign up" button, it would switch to the "confirm account" card after calling back to client's AuthCallback onSignup (which triggers the email with confirmation code).
The content of the card would be similar to this screenshot, without the username field (but much slicker in your library, of course). One client callback would be tied to the "confirm" button. Another client callback would be tied to the "resend code" button. The "resend code" button could also trigger another page transform to visualize resending the code.
Along these same lines, it would be great if the password recovery card supported a mode where you enter a verification code along with your password, similar to the screenshot below.
For my app I need to have an username field as well. it would be nice to have a username field as well. Or maybe convert the confirm password into a username field.
P.S.. Loving this plugin a lot!
Could be interesting that we be able to disable the functionality that this plugin does when the user tap on the button onSignup and then we could put a function in onSignup property with the onPressed property. (sorry for my english).
Hello,
Does anyone happen to know if there is a way to reduce the amount of time it takes to begin playing the initial login animation? I can't seem to locate where that might be.