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';

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,
    );
  }
}

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,
    );
  }
}

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),
    );
  }
}

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',
      ),
    );
  }
}

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)),
        ),
      ),
    );
  }
}

Inspiration

License

MIT License

Name		Name	Last commit message	Last commit date
Latest commit History 604 Commits
.github		.github
assets/images		assets/images
demo		demo
example		example
lib		lib
scripts		scripts
test		test
.gitignore		.gitignore
.metadata		.metadata
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
analysis_options.yaml		analysis_options.yaml
pubspec.yaml		pubspec.yaml

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Flutter Login

Installation

Reference

LoginMessages

LoginTheme

LoginUserType

UserFormField

LoginProvider

TermOfService

TermOfServiceResult

Examples

Basic example

Basic example with sign in providers

Theming via `ThemeData`

Custom labels

Theme customization

Inspiration

License

About

Releases 19

Packages

Contributors 32

Languages

License

NearHuscarl/flutter_login

Folders and files

Latest commit

History

Repository files navigation

Flutter Login

Installation

Reference

LoginMessages

LoginTheme

LoginUserType

UserFormField

LoginProvider

TermOfService

TermOfServiceResult

Examples

Basic example

Basic example with sign in providers

Theming via ThemeData

Custom labels

Theme customization

Inspiration

License

About

Topics

Resources

License

Stars

Watchers

Forks

Releases 19

Packages 0

Contributors 32

Languages

Theming via `ThemeData`

Packages