Animated Login

Author: Bahrican Yesil

Pub License: MIT

Animated Login for Flutter is a ready-made login/signup screen with soft and pleasant animations. It is fully responsive 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.

<br/>

Web View Example Video

Web View

Mobile View Example Video

<br/>

Installation

You can follow the instructions for installation here

Reference

PropertyTypeDescription
onSignupSignupCallbackSignup callback that will be called after signup button pressed.
onLoginLoginCallbackLogin callback that will be called after login button pressed.
socialLoginsList<SocialLogin>List of social login options that will be provided.
loginTextsLoginTextsDetermines all of the texts on the screen.
loginDesktopThemeLoginViewThemeDetermines all of the theme related things for desktop view.
loginMobileThemeLoginViewThemeDetermines all of the theme related things for mobile view.
onForgotPasswordForgotPasswordCallbackCallback that will be called after on tap of forgot password text. Commonly it navigates user to a screen to reset the password.
formKeyGlobalKey<FormState>The optional custom form key, if not provided will be created locally.
checkErrorboolIndicates whether the login screen should handle errors, show the error messages returned from the callbacks in a dialog.
showForgotPasswordboolIndicates whether the forgot password option will be enabled.
showChangeActionTitleboolIndicates whether the change action title should be displayed.
showPasswordVisibilityboolIndicates whether the user can show the password text without obscuring.
nameValidatorValidatorModelCustom input validator for name field.
emailValidatorValidatorModelCustom input validator for email field.
passwordValidatorValidatorModelCustom input validator for password field.
validateNameboolIndicates whether the name field should be validated.
validateEmailboolIndicates whether the email field should be validated.
validatePasswordboolIndicates whether the password fields should be validated.
nameControllerTextEditingControllerOptional TextEditingController for name input field.
emailControllerTextEditingControllerOptional TextEditingController for email input field.
passwordControllerTextEditingControllerOptional TextEditingController for password input field.
confirmPasswordControllerTextEditingControllerOptional TextEditingController for confirm password input field.
backgroundImageStringFull asset image path for background of the welcome part.
logoWidgetCustom widget to display a logo. Its size is constrained.
signUpModeSignUpModesEnum to determine which text form fields should be displayed in addition to the email and password fields: Name / Confirm Password / Both.
languageOptionsList<LanguageOption>List of languages that user can select.
changeLanguageCallbackChangeLanguageCallbackCallback that will be called when a language is selected.
selectedLanguageLanguageOptionSelected language that is stored in your side.
changeLangOnPressedChangeLangOnPressedCallbackOptional function will be called on pressed to the change language button. It should prompt a dialog to select a language and return the selected language.

LoginTexts

PropertyTypeDescription
welcomeStringWelcome title in signUp mode for the informing part.
welcomeDescriptionStringWelcome description in signUp mode for the informing part.
signUpStringAction button text for sign up mode.
signUpFormTitleStringForm title for sign up mode.
signUpUseEmailStringUse email CTA for sign up mode.
welcomeBackStringWelcome title in login mode for the informing part.
welcomeBackDescriptionStringWelcome description in login mode for the informing part.
loginStringAction button text for login mode.
loginFormTitleStringForm title for login mode.
loginUseEmailStringUse email CTA for login mode.
forgotPasswordStringForgot password text for login mode.
notHaveAnAccountStringText above the sign up button to direct users who don't have an account.
alreadyHaveAnAccountStringText above the login button to direct users who already have an account.
nameHintStringHint text for name TextFormField
emailHintStringHint text for email TextFormField
passwordHintStringHint text for password TextFormField
confirmPasswordHintStringHint text for confirm password TextFormField
passwordMatchingErrorStringThe error text for not matching password and confirm password inputs.
dialogButtonTextStringThe button text of error dialog.
chooseLanguageTitleStringThe title of choose language dialog.

LoginViewTheme

PropertyTypeDescription
formTitleStyleTextStyleText style for the title of form part.
welcomeTitleStyleTextStyleText style for the title of welcome part.
welcomeDescriptionStyleTextStyleText style for the description of welcome part.
changeActionStyleTextStyleText style for the change action CTA of welcome part.
useEmailStyleTextStyleText style for the use email text of form part.
forgotPasswordStyleTextStyleText style for the forgot password CTA of form part.
hintTextStyleTextStyleText style for hint texts in the text form fields.
errorTextStyleTextStyleText style for error texts in the text form fields.
textFormStyleTextStyleText style for input texts in the text form fields.
textFormFieldDecoInputDecorationInput decoration for the text form fields.
nameIconWidgetPrefix widget for name text form field.
emailIconWidgetPrefix widget for email text form field.
passwordIconWidgetPrefix widget for password text form field.
formFieldElevationdoubleElevation for text form fields.
formFieldBackgroundColorColorBackground color for text form fields.
formFieldShadowColorColorShadow color for text form fields.
formFieldBorderRadiusBorderRadiusBorder radius for text form fields.
formFieldSizeSizeSize of text form fields.
formFieldHoverColorColorHover color for text form fields.
backgroundColorColorBackground color of the login screen.
errorBorderColorColorError border color for text form fields.
focusedErrorBorderColorColorFocused error border color for text form fields.
focusedBorderColorColorFocused border color for text form fields.
enabledBorderColorColorEnabled border color for text form fields.
enabledBorderInputBorderEnabled border for text form fields.
errorBorderInputBorderError border for text form fields.
focusedErrorBorderInputBorderFocused error border for text form fields.
focusedBorderInputBorderFocused border for text form fields.
showFormFieldErrorsboolIndicates whether the error messages should be displayed below the text form fields.
showLabelTextsboolIndicates whether the labels should be displayed above the text form fields.
socialLoginHoverColorColorHover color for social login widgets.
socialLoginBorderBorderSideBorder for social login widgets.
changeLangButtonStyleButtonStyleCustom button style for change language button.
changeLangContentColorColorCustom color for change language button text and icon.
changeLangButtonTextStyleTextStyleCustom text style for change language button text.
animationCurveCurveCustom animation curve that will be used for animations.
formWidthRatiodoubleRatio of width of the form to the width of the screen.
animationDurationDurationThe duration of the animations.
formElementsSpacingdoubleThe spacing between the elements of form.
socialLoginsSpacingdoubleThe spacing between the social login options.
actionButtonStyleButtonStyleCustom button style for action button (login/signup).
changeActionButtonStyleButtonStyleCustom button style for change action button that will switch auth mode.
welcomePaddingEdgeInsetsPadding of the welcome part widget.
formPaddingEdgeInsetsPadding of the form part widget.
logoSizeSizeSize of the logo in the welcome part.
dialogThemeAnimatedDialogThemeTheme preferences for dialogs.

AnimatedDialogTheme

PropertyTypeDescription
contentPaddingEdgeInsetsThe padding for content of the dialogs.
actionsPaddingEdgeInsetsThe padding for actions of the dialogs.
contentSizeSizeSize of the content widget.
contentTextStyleTextStyleText style of the content text.
contentTextAlignTextAlignText alignment of the content text.
actionTextStyleTextStyleText style of the action text.
onPressedVoidCallbackAction will be performed on click to action button of the dialog.
contentBoxConstraintsBoxConstraintsBox constraints, size limitations of the content widget, if any.
shapeShapeBorderShape of the dialog.
elevationdoubleElevation of the dialog.
backgroundColorColorBackground color of the dialog.
animationDurationDurationDuration of display animation of the dialog.
languageDialogThemeLanguageDialogThemeTheme of the language dialog, determines its style.

LanguageDialogTheme

PropertyTypeDescription
titleWidgetTitle of the choose langauge dialog.
dialogOptionSizeSizeSize of the dialog option.
optionMarginEdgeInsetsMargin of the dialog option.
optionPaddingEdgeInsetsPadding of the dialog option.
selectedBackgroundColorColorBackground color of the selected option.
iconColorColorColor of the language icon.
languageTextStyleTextStyleText style for language text.
selectedItemTextColorColorText color for selected language item.
dividerThemeDataDividerThemeDataTheme for divider between language options.

SocialLogin

PropertyTypeDescription
iconPathStringFull asset path of the social platform logo.
callbackSocialLoginCallbackThe callback will be called on click to logo of the social platform.

LoginData

PropertyTypeDescription
emailStringEmail text the user entered to the email TextFormField
passwordStringPassword text the user entered to the password TextFormField

SignUpData

PropertyTypeDescription
nameStringName text the user entered to the name TextFormField
emailStringEmail text the user entered to the email TextFormField
passwordStringPassword text the user entered to the password TextFormField
confirmPasswordStringConfirm password text the user entered to the confirm password TextFormField

LanguageOption

PropertyTypeDescription
languageCodeStringThe abbrevation/code of the language option.
valueStringThe complete name of the language option.
iconPathStringFull asset path of the language option. Probably it will be the flag of a country.

ValidatorModel

PropertyTypeDescription
customValidatorFormFieldValidator<String?>Custom validator for the text field. If it is provided, then all fields below will be inactivated and form will be validated to the custom validator.
lengthintMinimum required length for the text. If not provided, default values for email, password and name will be used.
checkUpperCaseboolIndicates whether the text should contain upper case character.
checkLowerCaseboolIndicates whether the text should contain lower case character.
checkSpaceboolIndicates whether the text can contain space or not.
checkNumberboolIndicates whether the text should contain a number.

SignUpModes

EnumDescription
nameOnly displays name text form field, not displays confirm password.
confirmPasswordOnly displays confirm password form field, not name.
bothDisplays 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.

Comprehensive example

class LoginScreen extends StatefulWidget {
  /// 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.
  const LoginScreen({Key? key}) : super(key: key);

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  LanguageOption language = _languageOptions[1];
  AuthMode currentMode = AuthMode.login;

  @override
  Widget build(BuildContext context) {
    return AnimatedLogin(
      onLogin: LoginFunctions(context).onLogin,
      onSignup: LoginFunctions(context).onSignup,
      onForgotPassword: LoginFunctions(context).onForgotPassword,
      logo: Image.asset('assets/images/logo.gif'),
      // backgroundImage: 'images/background_image.jpg',
      signUpMode: SignUpModes.both,
      socialLogins: _socialLogins(context),
      loginDesktopTheme: _desktopTheme,
      loginMobileTheme: _mobileTheme,
      loginTexts: _loginTexts,
      changeLanguageCallback: (LanguageOption? _language) {
        if (_language != null) {
          DialogBuilder(context).showResultDialog(
              'Successfully changed the language to: ${_language.value}.');
          if (mounted) setState(() => language = _language);
        }
      },
      languageOptions: _languageOptions,
      selectedLanguage: language,
      initialMode: currentMode,
      onAuthModeChange: (AuthMode newMode) => currentMode = newMode,
    );
  }

  static List<LanguageOption> get _languageOptions => const <LanguageOption>[
        LanguageOption(
          value: 'Turkish',
          code: 'TR',
          iconPath: 'assets/images/tr.png',
        ),
        LanguageOption(
          value: 'English',
          code: 'EN',
          iconPath: 'assets/images/en.png',
        ),
      ];

  /// You can adjust the colors, text styles, button styles, borders
  /// according to your design preferences for *DESKTOP* view.
  /// You can also set some additional display options such as [showLabelTexts].
  LoginViewTheme get _desktopTheme => _mobileTheme.copyWith(
        // To set the color of button text, use foreground color.
        actionButtonStyle: ButtonStyle(
          foregroundColor: MaterialStateProperty.all(Colors.white),
        ),
        dialogTheme: const AnimatedDialogTheme(
          languageDialogTheme: LanguageDialogTheme(
              optionMargin: EdgeInsets.symmetric(horizontal: 80)),
        ),
      );

  /// You can adjust the colors, text styles, button styles, borders
  /// according to your design preferences for *MOBILE* view.
  /// You can also set some additional display options such as [showLabelTexts].
  LoginViewTheme get _mobileTheme => LoginViewTheme(
        // showLabelTexts: false,
        backgroundColor: Colors.blue, // const Color(0xFF6666FF),
        formFieldBackgroundColor: Colors.white,
        formWidthRatio: 60,
        // actionButtonStyle: ButtonStyle(
        //   foregroundColor: MaterialStateProperty.all(Colors.blue),
        // ),
      );

  LoginTexts get _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.
  String get _username => language.code == 'TR' ? 'Kullanıcı Adı' : 'Username';

  String get _login => language.code == 'TR' ? 'Giriş Yap' : 'Login';

  String get _signup => language.code == '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> _socialLogins(BuildContext context) => <SocialLogin>[
        SocialLogin(
            callback: () async => LoginFunctions(context).socialLogin('Google'),
            iconPath: 'assets/images/google.png'),
        SocialLogin(
            callback: () async =>
                LoginFunctions(context).socialLogin('Facebook'),
            iconPath: 'assets/images/facebook.png'),
        SocialLogin(
            callback: () async =>
                LoginFunctions(context).socialLogin('Linkedin'),
            iconPath: 'assets/images/linkedin.png'),
      ];
}

class LoginFunctions {
  /// Collection of functions will be performed on login/signup.
  /// * e.g. [onLogin], [onSignup], [socialLogin], and [onForgotPassword]
  const LoginFunctions(this.context);
  final BuildContext context;

  /// Login action that will be performed on click to action button in login mode.
  Future<String?> onLogin(LoginData loginData) async {
    DialogBuilder(context).showLoadingDialog();
    await Future.delayed(const Duration(seconds: 2));
    Navigator.of(context).pop();
    DialogBuilder(context).showResultDialog('Successful login.');
    return null;
  }

  /// Sign up action that will be performed on click to action button in sign up mode.
  Future<String?> onSignup(SignUpData signupData) async {
    DialogBuilder(context).showLoadingDialog();
    await Future.delayed(const Duration(seconds: 2));
    Navigator.of(context).pop();
    DialogBuilder(context).showResultDialog('Successful sign up.');
    return null;
  }

  /// Social login callback example.
  Future<String?> socialLogin(String type) async {
    DialogBuilder(context).showLoadingDialog();
    await Future.delayed(const Duration(seconds: 2));
    Navigator.of(context).pop();
    DialogBuilder(context)
        .showResultDialog('Successful social login with $type.');
    return null;
  }

  /// 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 {
    DialogBuilder(context).showLoadingDialog();
    await Future.delayed(const Duration(seconds: 2));
    Navigator.of(context).pop();
    // You should determine this path and create the screen.
    // Navigator.of(context).pushNamed('/forgotPass');
    return null;
  }
}

class DialogBuilder {
  /// Builds various dialogs with different methods.
  /// * e.g. [showLoadingDialog], [showResultDialog]
  const DialogBuilder(this.context);
  final BuildContext context;

  /// Example loading dialog
  Future<void> showLoadingDialog() => showDialog(
        context: context,
        barrierDismissible: false,
        builder: (BuildContext context) => WillPopScope(
          onWillPop: () async => false,
          child: const AlertDialog(
            content:  SizedBox(
              width: 100,
              height: 100,
              child: Center(
                child: CircularProgressIndicator(
                  color: Theme.of(context).primaryColor,
                  strokeWidth: 3,
                ),
              ),
            ),
          ),
        ),
      );

  /// Example result dialog
  Future<void> showResultDialog(String text) => showDialog(
        context: context,
        builder: (BuildContext context) => AlertDialog(
          content: SizedBox(
            height: 100,
            width: 100,
            child: Center(child: Text(text, textAlign: TextAlign.center)),
          ),
        ),
      );
}

More Screenshots

Web LoginMobile Login
Web LoginMobile Login
Web Sign UpMobile Sign Up
Web Sign UpMobile Sign Up
Color ChangeWithout Social Logins
Color ChangeWithout Social Logins
Error Example
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.

If you like and benefit from this package, please give us a star on GitHub and like on pub.dev to help!

License

  • MIT License

Libraries

animated_login