Animated Login

Author: Bahrican Yesil

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.

Web View Example Video

Mobile View Example Video

Installation

You can follow the instructions for installation here

Configuration Notes for Privacy Policy Links - URL launcher

Configuration

iOS

Add any URL schemes passed to canLaunchUrl as LSApplicationQueriesSchemes entries in your Info.plist file, otherwise it will return false.

Example:

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>sms</string>
  <string>tel</string>
</array>

See -[UIApplication canOpenURL:] for more details.

Android

Add any URL schemes passed to canLaunchUrl as <queries> entries in your AndroidManifest.xml, otherwise it will return false in most cases starting on Android 11 (API 30) or higher. A <queries> element must be added to your manifest as a child of the root element.

Example:

<!-- Provide required visibility configuration for API level 30 and above -->
<queries>
  <!-- If your app checks for SMS support -->
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="sms" />
  </intent>
  <!-- If your app checks for call support -->
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="tel" />
  </intent>
</queries>

See the Android documentation for examples of other queries.

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.
socialLogins	`List<SocialLogin>`	List of social login options that will be provided.
loginTexts	`LoginTexts`	Determines all of the texts on the screen.
loginDesktopTheme	`LoginViewTheme`	Determines all of the theme related things for desktop view.
loginMobileTheme	`LoginViewTheme`	Determines all of the theme related things for mobile view.
onForgotPassword	`ForgotPasswordCallback`	Callback that will be called after on tap of forgot password text. Commonly it navigates user to a screen to reset the password.
formKey	`GlobalKey<FormState>`	The optional custom form key, if not provided will be created locally.
checkError	`bool`	Indicates whether the login screen should handle errors, show the error messages returned from the callbacks in a dialog.
showForgotPassword	`bool`	Indicates whether the forgot password option will be enabled.
showChangeActionTitle	`bool`	Indicates whether the change action title should be displayed.
showPasswordVisibility	`bool`	Indicates whether the user can show the password text without obscuring.
nameValidator	`ValidatorModel`	Custom input validator for name field.
emailValidator	`ValidatorModel`	Custom input validator for email field.
passwordValidator	`ValidatorModel`	Custom input validator for password field.
validateName	`bool`	Indicates whether the name field should be validated.
validateEmail	`bool`	Indicates whether the email field should be validated.
validatePassword	`bool`	Indicates whether the password fields should be validated.
nameController	`TextEditingController`	Optional TextEditingController for name input field.
emailController	`TextEditingController`	Optional TextEditingController for email input field.
passwordController	`TextEditingController`	Optional TextEditingController for password input field.
confirmPasswordController	`TextEditingController`	Optional TextEditingController for confirm password input field.
backgroundImage	`String`	Full asset image path for background of the welcome part.
logo	`Widget`	Custom widget to display a logo. Its size is constrained.
signUpMode	`SignUpModes`	Enum to determine which text form fields should be displayed in addition to the email and password fields: Name / Confirm Password / Both.
languageOptions	`List<LanguageOption>`	List of languages that user can select.
changeLanguageCallback	`ChangeLanguageCallback`	Callback that will be called when a language is selected.
selectedLanguage	`LanguageOption`	Selected language that is stored in your side.
changeLangOnPressed	`ChangeLangOnPressedCallback`	Optional 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

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.
chooseLanguageTitle	`String`	The title of choose language dialog.

LoginViewTheme

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.
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.
changeLangButtonStyle	`ButtonStyle`	Custom button style for change language button.
changeLangContentColor	`Color`	Custom color for change language button text and icon.
changeLangButtonTextStyle	`TextStyle`	Custom text style for change language button text.
animationCurve	`Curve`	Custom animation curve that will be used for animations.
formWidthRatio	`double`	Ratio of width of the form to the width of the screen.
animationDuration	`Duration`	The duration of the animations.
formElementsSpacing	`double`	The spacing between the elements of form.
socialLoginsSpacing	`double`	The spacing between the social login options.
actionButtonStyle	`ButtonStyle`	Custom button style for action button (login/signup).
changeActionButtonStyle	`ButtonStyle`	Custom button style for change action button that will switch auth mode.
welcomePadding	`EdgeInsets`	Padding of the welcome part widget.
formPadding	`EdgeInsets`	Padding of the form part widget.
logoSize	`Size`	Size of the logo in the welcome part.
dialogTheme	`AnimatedDialogTheme`	Theme preferences for dialogs.

AnimatedDialogTheme

Property	Type	Description
contentPadding	`EdgeInsets`	The padding for content of the dialogs.
actionsPadding	`EdgeInsets`	The padding for actions of the dialogs.
contentSize	`Size`	Size of the content widget.
contentTextStyle	`TextStyle`	Text style of the content text.
contentTextAlign	`TextAlign`	Text alignment of the content text.
actionTextStyle	`TextStyle`	Text style of the action text.
onPressed	`VoidCallback`	Action will be performed on click to action button of the dialog.
contentBoxConstraints	`BoxConstraints`	Box constraints, size limitations of the content widget, if any.
shape	`ShapeBorder`	Shape of the dialog.
elevation	`double`	Elevation of the dialog.
backgroundColor	`Color`	Background color of the dialog.
animationDuration	`Duration`	Duration of display animation of the dialog.
languageDialogTheme	`LanguageDialogTheme`	Theme of the language dialog, determines its style.

LanguageDialogTheme

Property	Type	Description
title	`Widget`	Title of the choose langauge dialog.
dialogOptionSize	`Size`	Size of the dialog option.
optionMargin	`EdgeInsets`	Margin of the dialog option.
optionPadding	`EdgeInsets`	Padding of the dialog option.
selectedBackgroundColor	`Color`	Background color of the selected option.
iconColor	`Color`	Color of the language icon.
languageTextStyle	`TextStyle`	Text style for language text.
selectedItemTextColor	`Color`	Text color for selected language item.
dividerThemeData	`DividerThemeData`	Theme for divider between language options.

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]

LanguageOption

Property	Type	Description
languageCode	`String`	The abbrevation/code of the language option.
value	`String`	The complete name of the language option.
iconPath	`String`	Full asset path of the language option. Probably it will be the flag of a country.

ValidatorModel

Property	Type	Description
customValidator	`FormFieldValidator<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.
length	`int`	Minimum required length for the text. If not provided, default values for email, password and name will be used.
checkUpperCase	`bool`	Indicates whether the text should contain upper case character.
checkLowerCase	`bool`	Indicates whether the text should contain lower case character.
checkSpace	`bool`	Indicates whether the text can contain space or not.
checkNumber	`bool`	Indicates whether the text should contain a number.

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.

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 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.

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

Name		Name	Last commit message	Last commit date
Latest commit History 173 Commits
.github/ISSUE_TEMPLATE		.github/ISSUE_TEMPLATE
example		example
lib		lib
screenshots		screenshots
test		test
.gitignore		.gitignore
.metadata		.metadata
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
analysis_options.yaml		analysis_options.yaml
contributing.md		contributing.md
pubspec.yaml		pubspec.yaml

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Animated Login

Author: Bahrican Yesil

Web View Example Video

Mobile View Example Video

Installation

Configuration Notes for Privacy Policy Links - URL launcher

Configuration

iOS

Android

Reference

LoginTexts

LoginViewTheme

AnimatedDialogTheme

LanguageDialogTheme

SocialLogin

LoginData

SignUpData

LanguageOption

ValidatorModel

SignUpModes

Complete Example

Comprehensive example

More Screenshots

Contributing

License

About

Releases 2

Packages

Languages

License

bahricanyesil/flutter-animated-login

Folders and files

Latest commit

History

Repository files navigation

Animated Login

Author: Bahrican Yesil

Web View Example Video

Mobile View Example Video

Installation

Configuration Notes for Privacy Policy Links - URL launcher

Configuration

iOS

Android

Reference

LoginTexts

LoginViewTheme

AnimatedDialogTheme

LanguageDialogTheme

SocialLogin

LoginData

SignUpData

LanguageOption

ValidatorModel

SignUpModes

Complete Example

Comprehensive example

More Screenshots

Contributing

License

About

Topics

Resources

License

Stars

Watchers

Forks

Releases 2

Packages 0

Languages

Packages