flutter_login 1.0.14

  • Readme
  • Changelog
  • Example
  • Installing
  • 94

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 #

PropertyTypeDesciption
onSignupAuthCallbackCalled when the user hit the submit button when in sign up mode
onLoginAuthCallbackCalled when the user hit the submit button when in login mode
onRecoverPasswordRecoverCallbackCalled when the user hit the submit button when in recover password mode
titleStringThe large text above the login [Card], usually the app or company name. Leave the string empty or null if you want no title.
logoStringThe path to the asset image that will be passed to the Image.asset()
messagesLoginMessagesDescribes all of the labels, text hints, button texts and other auth descriptions
themeLoginThemeFlutterLogin'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
emailValidatorFormFieldValidator<String>Email validating logic, Returns an error string to display if the input is invalid, or null otherwise
passwordValidatorFormFieldValidator<String>Same as emailValidator but for password
onSubmitAnimationCompletedFunctionCalled after the submit animation's completed. Put your route transition logic here
logoTagStringHero tag for logo image. If not specified, it will simply fade out when changing route
titleTagStringHero tag for title text. Need to specify LoginTheme.beforeHeroFontSize and LoginTheme.afterHeroFontSize if you want different font size before and after hero animation
showDebugButtonsboolDisplay the debug buttons to quickly forward/reverse login animations. In release mode, this will be overrided to false regardless of the value passed in

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 #

PropertyTypeDesciption
usernameHintStringHint text of the user name [TextField]
passwordHintStringHint text of the password [TextField]
confirmPasswordHintStringHint text of the confirm password [TextField]
forgotPasswordButtonStringForgot password button's label
loginButtonStringLogin button's label
signupButtonStringSignup button's label
recoverPasswordButtonStringRecover password button's label
recoverPasswordIntroStringIntro in password recovery form
recoverPasswordDescriptionStringDescription in password recovery form
goBackButtonStringGo back button's label. Go back button is used to go back to to login/signup form from the recover password form
confirmPasswordErrorStringThe error message to show when the confirm password not match with the original password
recoverPasswordSuccessStringThe success message to show after submitting recover password

LoginTheme #

PropertyTypeDesciption
primaryColorColorThe background color of major parts of the widget like the login screen and buttons
accentColorColorThe secondary color, used for title text color, loading icon, etc. Should be contrast with the [primaryColor]
errorColorColorThe color to use for [TextField] input validation errors
cardThemeCardThemeThe colors and styles used to render auth [Card]
inputThemeInputDecorationThemeDefines the appearance of all [TextField]s
buttonThemeLoginButtonThemeA theme for customizing the shape, elevation, and color of the submit button
titleStyleTextStyleText style for the big title
bodyStyleTextStyleText style for small text like the recover password description
textFieldStyleTextStyleText style for [TextField] input text
buttonStyleTextStyleText style for button text
beforeHeroFontSizedoubleDefines the font size of the title in the login screen (before the hero transition)
afterHeroFontSizedoubleDefines the font size of the title in the screen after the login screen (after the hero transition)
pageColorLightColorThe optional light background color of login screen; if provided, used for light gradient instead of primaryColor
pageColorDarkColorThe optional dark background color of login screen; if provided, used for dark gradient instead of primaryColor

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 = const {
  'dribbble@gmail.com': '12345',
  'hunter@gmail.com': 'hunter',
};

class LoginScreen extends StatelessWidget {
  Duration get loginTime => Duration(milliseconds: 2250);

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

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

  @override
  Widget build(BuildContext context) {
    return FlutterLogin(
      title: 'ECORP',
      logo: 'assets/images/ecorp-lightblue.png',
      onLogin: _authUser,
      onSignup: _authUser,
      onSubmitAnimationCompleted: () {
        Navigator.of(context).pushReplacement(MaterialPageRoute(
          builder: (context) => 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: TextTheme(
          display2: TextStyle(
            fontFamily: 'OpenSans',
            fontSize: 45.0,
            color: Colors.orange,
          ),
          button: TextStyle(
            fontFamily: 'OpenSans',
          ),
          subhead: TextStyle(fontFamily: 'NotoSans'),
          body1: 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: 'assets/images/ecorp.png',
      onLogin: (_) => Future(null),
      onSignup: (_) => Future(null),
      onSubmitAnimationCompleted: () {
        Navigator.of(context).pushReplacement(MaterialPageRoute(
          builder: (context) => 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 {
  @override
  Widget build(BuildContext context) {
    return FlutterLogin(
      title: 'ECORP',
      logo: 'assets/images/ecorp.png',
      onLogin: (_) => Future(null),
      onSignup: (_) => Future(null),
      onSubmitAnimationCompleted: () {
        Navigator.of(context).pushReplacement(MaterialPageRoute(
          builder: (context) => DashboardScreen(),
        ));
      },
      onRecoverPassword: (_) => Future(null),
      messages: LoginMessages(
        usernameHint: 'Username',
        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/SignupPassword Recovery
Login/SignupPassword Recovery

Theme customization #


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) {
    final inputBorder = BorderRadius.vertical(
      bottom: Radius.circular(10.0),
      top: Radius.circular(20.0),
    );

    return FlutterLogin(
      title: 'ECORP',
      logo: 'assets/images/ecorp-lightgreen.png',
      onLogin: (_) => Future(null),
      onSignup: (_) => Future(null),
      onSubmitAnimationCompleted: () {
        Navigator.of(context).pushReplacement(MaterialPageRoute(
          builder: (context) => DashboardScreen(),
        ));
      },
      onRecoverPassword: (_) => Future(null),
      theme: LoginTheme(
        primaryColor: Colors.teal,
        accentColor: Colors.yellow,
        errorColor: Colors.deepOrange,
        titleStyle: TextStyle(
          color: Colors.greenAccent,
          fontFamily: 'Quicksand',
          letterSpacing: 4,
        ),
        bodyStyle: TextStyle(
          fontStyle: FontStyle.italic,
          decoration: TextDecoration.underline,
        ),
        textFieldStyle: TextStyle(
          color: Colors.orange,
          shadows: [Shadow(color: Colors.yellow, blurRadius: 2)],
        ),
        buttonStyle: TextStyle(
          fontWeight: FontWeight.w800,
          color: Colors.yellow,
        ),
        cardTheme: CardTheme(
          color: Colors.yellow.shade100,
          elevation: 5,
          margin: EdgeInsets.only(top: 15),
          shape: ContinuousRectangleBorder(
              borderRadius: BorderRadius.circular(100.0)),
        ),
        inputTheme: InputDecorationTheme(
          filled: true,
          fillColor: Colors.purple.withOpacity(.1),
          contentPadding: EdgeInsets.zero,
          errorStyle: TextStyle(
            backgroundColor: Colors.orange,
            color: Colors.white,
          ),
          labelStyle: 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: 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

[1.0.14] - Fix signup textfield not selectable in signup mode (26/01/2020) #

[1.0.13+1] - Update dependency (23/01/2020) #

  • Update Provider dependency #35

[1.0.13] - Minor improvements and Bug fix(es) (23/01/2020) #

  • Share email input between login and recovery cards (@doc-rj-celltrak in #13)
  • Fix render overflow exceptions #20

[1.0.11] - Misc bug fixes (17/01/2020) #

  • Attempt to fix text not centered in the web build
  • Fix exception on submit when onSubmitAnimationCompleted is empty
  • Fix: test failed due to framework error

[1.0.10+1] - Fix example's logo hero animation (11/12/2019) #

[1.0.10] - Extend configurations & bug fixes (09/12/2019) #

[1.0.4] - Add option to disable debug buttons (11/10/2019) #

[1.0.3] - Bug fix #

  • Fix app crashing when omitting logoPath parameter

[1.0.2] - Add license #

  • Add license

[1.0.1] - Fix document #

  • Fix image not loading on pub.dev README
  • Reduce font size in description column

[1.0.0] - Initial release #

example/lib/main.dart

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

void main() {
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      systemNavigationBarColor:
          SystemUiOverlayStyle.dark.systemNavigationBarColor,
    ),
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Login Demo',
      theme: ThemeData(
        // brightness: Brightness.dark,
        primarySwatch: Colors.deepPurple,
        accentColor: Colors.orange,
        cursorColor: Colors.orange,
        // fontFamily: 'SourceSansPro',
        textTheme: TextTheme(
          display2: TextStyle(
            fontFamily: 'OpenSans',
            fontSize: 45.0,
            // fontWeight: FontWeight.w400,
            color: Colors.orange,
          ),
          button: TextStyle(
            // OpenSans is similar to NotoSans but the uppercases look a bit better IMO
            fontFamily: 'OpenSans',
          ),
          caption: TextStyle(
            fontFamily: 'NotoSans',
            fontSize: 12.0,
            fontWeight: FontWeight.normal,
            color: Colors.deepPurple[300],
          ),
          display4: TextStyle(fontFamily: 'Quicksand'),
          display3: TextStyle(fontFamily: 'Quicksand'),
          display1: TextStyle(fontFamily: 'Quicksand'),
          headline: TextStyle(fontFamily: 'NotoSans'),
          title: TextStyle(fontFamily: 'NotoSans'),
          subhead: TextStyle(fontFamily: 'NotoSans'),
          body2: TextStyle(fontFamily: 'NotoSans'),
          body1: TextStyle(fontFamily: 'NotoSans'),
          subtitle: TextStyle(fontFamily: 'NotoSans'),
          overline: TextStyle(fontFamily: 'NotoSans'),
        ),
      ),
      home: LoginScreen(),
      navigatorObservers: [TransitionRouteObserver()],
      routes: {
        LoginScreen.routeName: (context) => LoginScreen(),
        DashboardScreen.routeName: (context) => DashboardScreen(),
      },
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_login: ^1.0.14

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_login/flutter_login.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
93
Health:
Code health derived from static analysis. [more]
93
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
94
Learn more about scoring.

We analyzed this package on Jul 7, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.13
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

because of import path [flutter_login] that is in a package requiring null.

Health suggestions

Fix lib/flutter_login.dart. (-5.84 points)

Analysis of lib/flutter_login.dart reported 12 hints, including:

line 107 col 32: 'display2' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is headline3. This feature was deprecated after v1.13.8..

line 167 col 32: 'display2' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is headline3. This feature was deprecated after v1.13.8..

line 174 col 32: 'display2' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is headline3. This feature was deprecated after v1.13.8..

line 433 col 48: 'display2' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is headline3. This feature was deprecated after v1.13.8..

line 434 col 38: 'display2' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is headline3. This feature was deprecated after v1.13.8..

Fix lib/src/widgets/auth_card.dart. (-1.49 points)

Analysis of lib/src/widgets/auth_card.dart reported 3 hints:

line 576 col 34: 'body1' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is bodyText2. This feature was deprecated after v1.13.8..

line 823 col 42: 'body1' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is bodyText2. This feature was deprecated after v1.13.8..

line 832 col 42: 'body1' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is bodyText2. This feature was deprecated after v1.13.8..

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.2.2 <3.0.0
flushbar ^1.9.1 1.10.4
flutter 0.0.0
font_awesome_flutter ^8.5.0 8.8.1
provider ^4.0.2 4.2.0
quiver ^2.0.5 2.1.3
transformer_page_view ^0.1.6 0.1.6
Transitive dependencies
collection 1.14.12 1.14.13
matcher 0.12.8
meta 1.1.8 1.2.1
nested 0.0.4
path 1.7.0
sky_engine 0.0.99
stack_trace 1.9.5
typed_data 1.1.6 1.2.0
vector_math 2.0.8
Dev dependencies
flutter_test
mockito ^4.1.1