Provides login screen with login/signup functionalities to help speed up development

Overview

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 Desciption
onSignup AuthCallback Called when the user hit the submit button when in sign up mode
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
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 String The path to the asset image that will be passed to the Image.asset()
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
emailValidator FormFieldValidator<String> Email validating logic, Returns an error string to display if the input is invalid, or null otherwise
passwordValidator FormFieldValidator<String> Same as emailValidator 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 overrided to false regardless of the value passed in
hideForgotPasswordButton bool Hides the Forgot Password button if set to true
hideSignUpButton bool Hides the SignUp button if set to true

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 Desciption
usernameHint String Hint text of the user name [TextField]
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
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
flushbarTitleError String The Flushbar title on errors
flushbarTitleSuccess String The Flushbar title on sucesses

LoginTheme

Property Type Desciption
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

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 {
  '[email protected]': '12345',
  '[email protected]': '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,
    );
  }
}

Basic example with sign in providers

import 'package:flutter/material.dart';
import 'package:flutter_login/flutter_login.dart';
import 'dashboard_screen.dart';

const users = const {
  '[email protected]': '12345',
  '[email protected]': '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,
      
        loginProviders: <LoginProvider>[
          LoginProvider(
            icon: FontAwesomeIcons.google,
            callback: () async {
              print('start google sign in');
              await Future.delayed(loginTime);
              print('stop google sign in');              
              return null;
            },
          ),
          LoginProvider(
            icon: FontAwesomeIcons.facebookF,
            callback: () async {            
              print('start facebook sign in');
              await Future.delayed(loginTime);
              print('stop facebook sign in');              
              return null;
            },
          ),
          LoginProvider(
            icon: FontAwesomeIcons.linkedinIn,
            callback: () async {         
              print('start linkdin sign in');
              await Future.delayed(loginTime);         
              print('stop linkdin sign in');              
              return null;
            },
          ),
          LoginProvider(
            icon: FontAwesomeIcons.githubAlt,
            callback: () async {
              print('start github sign in');
              await Future.delayed(loginTime);
              print('stop github sign in');              
              return null;
            },
          ),
        ],
      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(
          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: '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/Signup Password Recovery
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 {
  @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
Comments
  • signup screen displayed between sign up card and app screen

    signup screen displayed between sign up card and app screen

    Start Sign Up
    First card Second card Push SUBMIT You will see the green success message ---than you will see second sign up card on the side--- than app

    bug 
    opened by meridorkobi 17
  • add confirm signup card

    add confirm signup card

    This change adds a new card to confirm signup (confirm account) by entering a confirmation code. It also adds the ability to "resend code" when needed. Two new callbacks to client app are included. All strings and messages are configurable.

    This change also includes support for jumping between two non-adjacent cards with animation. For example, in order to show the confirm signup card, we have to jump from card index 0 to card index 2, while still maintaining a smooth animation with the illusion that the cards are immediately adjacent.

    There are two "todo" left in confirm_signup_card.dart, because this change needs to be integrated with PR #13 in order to pass back the necessary login data using the shared auth provider.

    Another enhancement needed is the beautiful "change route animation" when switching from the confirm signup card to the dashboard.

    opened by doc-rj-celltrak 16
  • Need to trigger the login buttun twice - Firebase Auth

    Need to trigger the login buttun twice - Firebase Auth

    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.

    Screenshot_20200128-133949 Screenshot_20200128-134004

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

    Thank you.

    bug await user response 
    opened by JulienT-FL 15
  • :fire: Now, input decoration colors depends on primary color.

    :fire: Now, input decoration colors depends on primary color.

    This fix the next bug: https://github.com/NearHuscarl/flutter_login/issues/200

    It is also notewhorthy to say the prefix and sufix icons depends on the ThemeData.colorScheme.primary color, which can be differente to the ThemeData.primaryColor; we should make both to be the same or to make one of them by default.

    image

    @juliansteenbakker @NearHuscarl

    opened by SalahAdDin 13
  • Additonal signup fields

    Additonal signup fields

    Implements #54

    Added new generic fields that can be shown to the user on signup. The Form is shown in an additional card.

    The fields are provided like this:

          additionalSignupFields: [
            UserFormField(
                keyName: 'Username', icon: Icon(FontAwesomeIcons.userAlt)),
            UserFormField(keyName: 'Name', defaultValue: 'Steve'),
            UserFormField(keyName: 'Surname'),
            UserFormField(
              keyName: 'phone_number',
              displayName: 'Phone Number',
              userType: LoginUserType.phone,
              fieldValidator: (value) {
                var phoneRegExp = RegExp(
                    '^(\\+\\d{1,2}\\s)?\\(?\\d{3}\\)?[\\s.-]?\\d{3}[\\s.-]?\\d{4}\$');
                if (value != null &&
                    value.length < 7 &&
                    !phoneRegExp.hasMatch(value)) {
                  return "This isn't a valid phone number";
                }
                return null;
              },
            ),
          ],
    

    The result is: flutter_01

    A callback is then called to collect the filled in form as a Map<String,String>. The form can also be conditionally called after logging in with a provider, a boolean callback added to the LoginProvider class must be passed to control this.

    There are still some issues with this, for example the forgot password card is shown during the animation, and also further documentation is probably needed.

    opened by malta895 12
  • Clicking into user/password fields triggers Error: LateInitializationError: Local 'command' has not been initialized.

    Clicking into user/password fields triggers Error: LateInitializationError: Local 'command' has not been initialized.

    Describe the bug Error: LateInitializationError: Local 'command' has not been initialized. errors are triggered by text input field events and logged in the background.

    To Reproduce The issue can be reproduced easily when running the example project as a webapp, i.e., via flutter run -d chrome

    Expected behavior The widget still appears to "work", but the logged error messages are concerning.

    Information (please complete the following information): flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.2.2, on Linux, locale en_US.UTF-8) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2) [✓] Chrome - develop for the web [✓] Android Studio (version 4.2) [✓] IntelliJ IDEA Ultimate Edition (version 2021.1) [✓] VS Code (version 1.56.2) [✓] Connected device (1 available)

    Additional context

    • https://dart.dev/guides/language/language-tour#late-variables
    bug 
    opened by oysterpack 10
  • 'RenderBox was not laid out' was thrown

    'RenderBox was not laid out' was thrown

    Describe the bug 'RenderBox was not laid out' was thrown.

    To Reproduce Steps to reproduce the behavior: The code I wrote was below (just to show login form)

      import 'package:flutter/material.dart';                                                                                                                    
      import 'package:flutter_gen/gen_l10n/app_localizations.dart';                                                                                              
      import 'package:flutter_login/flutter_login.dart';                                                                                                         
                                                                                                                                                                 
      class LoginScreen extends StatelessWidget {                                                                                                                
        @override                                                                                                                                                
        Widget build(BuildContext context) {                                                                                                                     
          return FlutterLogin(                                                                                                                                   
            onLogin: handleAuthUser,                                                                                                                             
            onRecoverPassword: handleRecoveryPassword,                                                                                                           
            onSignup: handleSignup,                                                                                                                              
          ); // FlutterLogin                                                                                                                                     
        }                                                                                                                                                        
                                                                                                                                                                 
    >>  Future<String> handleAuthUser(LoginData data) {}                                                                                                         
    >>  Future<String> handleRecoveryPassword(String data) {}                                                                                                    
    >>  Future<String> handleSignup(LoginData data) {}                                                                                                           
      }                                                                                                                                                          
    ~     
    

    And when I start the app, an error was thrown

    $ flutter run
    

    Screenshots I can see the error message below

    An Observatory debugger and profiler on sdk gphone x86 arm is available at: http://127.0.0.1:42033/TOE7m9uJmNk=/
    I/flutter (13350): ══╡ EXCEPTION CAUGHT BY SCHEDULER LIBRARY ╞═════════════════════════════════════════════════════════
    I/flutter (13350): The following assertion was thrown during a scheduler callback:
    I/flutter (13350): RenderBox was not laid out: RenderRepaintBoundary#bb0f7 NEEDS-LAYOUT NEEDS-PAINT
    I/flutter (13350): 'package:flutter/src/rendering/box.dart':
    I/flutter (13350): Failed assertion: line 1785 pos 12: 'hasSize'
    I/flutter (13350): 
    I/flutter (13350): Either the assertion indicates an error in the framework itself, or we should provide substantially
    I/flutter (13350): more information in this error message to help you determine and fix the underlying cause.
    I/flutter (13350): In either case, please report this assertion by filing a bug on GitHub:
    I/flutter (13350):   https://github.com/flutter/flutter/issues/new?template=BUG.md
    I/flutter (13350): 
    I/flutter (13350): When the exception was thrown, this was the stack:
    I/flutter (13350): #2      RenderBox.size (package:flutter/src/rendering/box.dart:1785:12)
    I/flutter (13350): #3      RenderBox.paintBounds (package:flutter/src/rendering/box.dart:2389:41)
    I/flutter (13350): #4      _TransformerPageViewState._onGetSize (package:transformer_page_view/transformer_page_view.dart:461:34)
    I/flutter (13350): #5      SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1117:15)
    I/flutter (13350): #6      SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1063:9)
    I/flutter (13350): #7      SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:864:7)
    I/flutter (13350): (elided 13 frames from class _AssertionError, class _RawReceivePortImpl, class _Timer, dart:async, and dart:async-patch)
    I/flutter (13350): ════════════════════════════════════════════════════════════════════════════════════════════════════
    

    Information (please complete the following information):

    • Device: Nexus9 (emulator)
    • Platform android (API 30)
    • Flutter version: 1.22.4
    • Package version 1.0.14
    bug help wanted 
    opened by satoyan 9
  • Signup doesn't work in Chrome for Android

    Signup doesn't work in Chrome for Android

    (Please note, that this is using Flutter for Web)

    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.

    bug 
    opened by Multiply 9
  • Tabulation add a space in the email field

    Tabulation add a space in the email field

    Hello,

    Very good work !

    I'm trying to implement it in my project. Often I test my forms with physical keyboard and I'm facing a bug Test Login on Android Emulator :

    1. Clic on email field
    2. Fill the email field
    3. Press "TAB" Key => A space is added at the end of the mail
    opened by QuentinSc 9
  • After clicking on show password, the app no longer responds to mouse events

    After clicking on show password, the app no longer responds to mouse events

    Describe the bug After clicking on show password icon, the password is revealed, but the mouse events stop working, i.e., the app no longer responds to mouse events. The following error continuously happens:

    Error: Assertion failed: /flutter/packages/flutter/lib/src/rendering/mouse_tracker.dart:201:12
    !_debugDuringDeviceUpdate
    is not true
        at Object.throw_ [as throw] (http://localhost:43965/dart_sdk.js:5041:11)
        at Object.assertFailed (http://localhost:43965/dart_sdk.js:4980:15)
        at mouse_tracker.MouseTracker.new.[_deviceUpdatePhase] (http://localhost:43965/packages/flutter/src/rendering/layer.dart.lib.js:4665:50)
        at http://localhost:43965/packages/flutter/src/rendering/layer.dart.lib.js:4721:33
        at mouse_tracker.MouseTracker.new.[_monitorMouseConnection] (http://localhost:43965/packages/flutter/src/rendering/layer.dart.lib.js:4661:7)
        at mouse_tracker.MouseTracker.new.updateWithEvent (http://localhost:43965/packages/flutter/src/rendering/layer.dart.lib.js:4720:36)
        at binding$5.WidgetsFlutterBinding.new.dispatchEvent (http://localhost:43965/packages/flutter/src/rendering/layer.dart.lib.js:5016:46)
        at binding$5.WidgetsFlutterBinding.new.[_handlePointerEventImmediately] (http://localhost:43965/packages/flutter/src/gestures/binding.dart.lib.js:321:14)
        at binding$5.WidgetsFlutterBinding.new.handlePointerEvent (http://localhost:43965/packages/flutter/src/gestures/binding.dart.lib.js:295:43)
        at binding$5.WidgetsFlutterBinding.new.[_flushPointerEventQueue] (http://localhost:43965/packages/flutter/src/gestures/binding.dart.lib.js:285:14)
        at binding$5.WidgetsFlutterBinding.new.[_handlePointerDataPacket] (http://localhost:43965/packages/flutter/src/gestures/binding.dart.lib.js:276:54)
        at Object.invoke1 (http://localhost:43965/dart_sdk.js:175635:7)
        at _engine.EnginePlatformDispatcher.__.invokeOnPointerDataPacket (http://localhost:43965/dart_sdk.js:157073:15)
        at _engine.PointerBinding.__.[_onPointerData] (http://localhost:43965/dart_sdk.js:157712:49)
        at http://localhost:43965/dart_sdk.js:158119:26
        at http://localhost:43965/dart_sdk.js:158086:16
        at http://localhost:43965/dart_sdk.js:157805:11
    

    To Reproduce Steps to reproduce the behavior: The issue can be reproduced easily when running the example project as a webapp, i.e., via flutter run -d chrome

    Expected behavior I should be able to hide the password again when clicking on the password field's "show" icon again.

    Information (please complete the following information): Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.2.2, on Linux, locale en_US.UTF-8) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2) [✓] Chrome - develop for the web [✓] Android Studio (version 4.2) [✓] IntelliJ IDEA Ultimate Edition (version 2021.1) [✓] VS Code (version 1.56.2) [✓] Connected device (1 available)

    Additional context Add any other context about the problem here.

    bug help wanted 
    opened by oysterpack 8
  • Documentation

    Documentation

    Thanks for the great package! The documentation for the Null Safe version of the package shows various callbacks returning null, which is no longer possible with null safety. Please show how the returns should be handled in the new version.

    bug 
    opened by jonbhanson 8
  • build(deps): bump espresso-core from 3.5.0 to 3.5.1 in /example/android

    build(deps): bump espresso-core from 3.5.0 to 3.5.1 in /example/android

    Bumps espresso-core from 3.5.0 to 3.5.1.

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies java 
    opened by dependabot[bot] 0
  • build(deps): bump junit from 1.1.4 to 1.1.5 in /example/android

    build(deps): bump junit from 1.1.4 to 1.1.5 in /example/android

    Bumps junit from 1.1.4 to 1.1.5.

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies java 
    opened by dependabot[bot] 0
  • Fix providerNeedsSignUpCallback

    Fix providerNeedsSignUpCallback

    providerNeedsSignUpCallback was not working, it wasn't propagated and also it has called onSubmitCompleted just after widget.onSwitchSignUpAdditionalData which in my opinion is wrong, at least it was causing issues for me

    opened by jaroslawdabrowski 0
  • Fix the autofill

    Fix the autofill

    The autofill has not been working. It has been fixed. Now system after login or signup asks if it should store the login details and is able to suggest login details while login.

    opened by jaroslawdabrowski 0
  • Add validateUserImmediately property

    Add validateUserImmediately property

    In our project we have more complicated user/email validation. It is annoying to provide email and email confirmation and validating after that. Instead we would like to validate once the focus on user field is lost. I have made this change as conditional.

    opened by jaroslawdabrowski 0
Releases(v4.1.1)
  • v4.1.1(Dec 7, 2022)

    Bugs fixed:

    • Fixed an issue with keyboard unfocusing. (Thanks @otto-dev !)
    • Fixed an issue with checkboxFormField not updating value. (Thanks @Mojo1917 !)
    • Updated dependencies.
    Source code(tar.gz)
    Source code(zip)
  • 4.1.0(Nov 9, 2022)

    Features:

    • You can now select the keyboardType for the confirm Signup Code with [confirmSignupKeyboardType]. (Thanks @0ttik !)
    • Added a [headerWidget] that can be used to provide some text above the loginCard. (Thanks @cloudonlanapps !)
    • You can now perform checks between switching to additionalData (if provided) using [onSwitchToAdditionalFields] (Thanks @blanquartf !)

    Bugs fixed:

    • Fixed termOfService.linkUrl. (Thanks @fotiDim !)

    Other improvements:

    • Migrated to lint and applied all suggested lints.
    • Updated dependencies.
    Source code(tar.gz)
    Source code(zip)
  • 4.0.0(Jun 22, 2022)

  • 4.0.0-beta.1(Apr 19, 2022)

    BREAKING CHANGES:

    • Upgraded font_awesome_flutter from v9 to v10
    • Changed from flutter_signin_button to sign_in_button. This changes the enum names.
    Source code(tar.gz)
    Source code(zip)
  • 3.2.0(Mar 15, 2022)

    Features:

    • It is now possible to enable scrolling instead of resizing the login card. You can enable this by setting the scrollable parameter to true.
    • The prefix icon of the user/email field now changes depending on the type.
    • Custom sign-in buttons using flutter_signin_button package is now integrated. See the example app for an example.
    • Add an animation to the termsOfService buttons.
    Source code(tar.gz)
    Source code(zip)
  • 3.1.0(Dec 13, 2021)

    Features:

    • Add children parameter to FlutterLogin which takes a list of widgets that can be added in the background of the Login view. For example: a custom banner or a custom logo.
    • Improved footer style

    Bugs fixed:

    • The signup confirmation page is now also shown when additionalSignupData is not provided or loginAfterSignUp is disabled.
    • Back button of confirmSignUp page now returns Login or AdditionalSignUpData page depending on whether additionalSignupData has been provided or not.
    Source code(tar.gz)
    Source code(zip)
  • 3.0.0(Nov 12, 2021)

    First stable release of 3.0.0. Please see the changelog entries of the beta versions for all changes. New features include:

    • Additional signup fields!
    • Confirmation card for password recovery.
    • Confirmation card for user registration.

    This release also fixes:

    • White space visible when animation is complete
    • Several other animation improvements
    Source code(tar.gz)
    Source code(zip)
  • 3.0.0-beta.2(Oct 6, 2021)

    Besides the existing loginProvider icons, you can now also add a LoginButton as provider widget. Please check out flutter_signin_button for supported buttons.

    BREAKING CHANGES:

    • Provider has been updated to 6.0.1.
    • Instead of hideSignUpButton, you can now set onSignup parameter to null (or just leave it out) in order to hide the signup button.

    Fixed several other small bugs like color not being applied correctly to all widgets.

    Source code(tar.gz)
    Source code(zip)
  • 3.0.0-beta.1(Aug 16, 2021)

    You can now add more signup-fields! Please keep in mind that this is a beta release and may still contain bugs.

    Other features:

    You can now use an ImageProvider instead of only an AssetImage. #216

    Source code(tar.gz)
    Source code(zip)
  • 2.2.1(Jul 26, 2021)

  • 2.2.0(Jul 16, 2021)

    Features

    • Added possibility to disable custom page transformer. #202
    • Added possibility to automatically navigate back to login page after successful recovery. #207

    Bug fixes

    • Fixed primary color not applying to input decoration. (@SalahAdDin in #201)
    • Fixed forgot password button not coloring. #203
    • Fixed black text when night mode is enabled and no other theme is provided. #206
    • Fixed routing issue in example app. #204
    Source code(tar.gz)
    Source code(zip)
  • v2.1.0(Jun 28, 2021)

    Features

    • Added possibility to change switch authentication button color. #195
    • Added possibility to change logo size. #193
    • Added labels to LoginProviders. #192
    • Added a bar with title/description above providers. Can be disabled using hideProvidersTitle. See #181

    Bug fixes

    • Fixed animation padding not filling screen. #194
    Source code(tar.gz)
    Source code(zip)
  • 2.0.0-1(Jun 7, 2021)

    Stable release of null-safety

    Changed

    • emailValidator is now userValidator

    Features

    • Add bottom padding to LoginTheme

    Also fixed numerous other bugs.

    Source code(tar.gz)
    Source code(zip)
  • 2.0.0-nullsafety.0(Mar 31, 2021)

  • 1.1.0(Mar 30, 2021)

    Features (30/03/2021)

    • Possibility to hide the sign-up and forgot password button #115
    • Possibility to provide flushbar title #117
    • Support for auto-fill hints #125
    • Possibility to navigate back to login after sign-up #126
    • Support for external login providers #127
    • Footer for copyright notice #129
    • Add custom padding to sign-up and login provider buttons #135
    • Possibility to only show logo without title

    Bug fixes

    • Add safe area to header
    • Scaffold is now transparent so background images are now supported
    • Fix logo size
    • Disable auto-correct for text field
    Source code(tar.gz)
    Source code(zip)
  • 1.0.15(Mar 18, 2021)

    Bug fixes (16/03/2021)

    • Fixed animationController methods should not be used after calling dispose #114
    • Upgrade to AndroidX #111
    • Upgrade Android example to embedding V2 #110
    • Fixed initialRoute function #110
    • Added pedantic for code analysis #110
    • Migrated discontinued flushbar to another_flushbar #110
    • Updated all deprecated widgets to current widgets #110
    • Fixed widget_test #110
    Source code(tar.gz)
    Source code(zip)
Owner
Near Huscarl
Near Huscarl
Flutter Web Signin Signup ui design

FlutterWebSigninSignup Intro Flutter Web Signin & Signup screen ui desing. Front-end: Flutter Check the screenshot : P.S Make sure to upgrade your Flu

Ihab Zaidi 12 Dec 15, 2022
Login Screen UI

LoginScreen LoginScreen About fast login Screen b creating some Widget like buildEmail=> for textfield email buildPassword=> for textfield password bu

null 2 Apr 6, 2022
Login Animation Ruchika GuptaLogin Animation [953⭐] - Smooth animation from login to home by Ruchika Gupta.

Flutter Login Home Animation A new open-source Flutter project that enables the developer to quickly get started with the Flutter animation and applic

GeekyAnts 1.1k Dec 28, 2022
MyLogger improved fork of Flogs package developed in flutter that provides quick & simple logging solution

MyLogger MyLogger is improved fork of Flogs package developed in flutter that provides quick & simple logging solution. All logs are saved into DB whi

Martin Jablečník 2 Apr 5, 2022
Flutter Login with Bloc State Management

bloc_app Login with BLoC (Cubit) Getting Started This project is a starting point for a Flutter application. A few resources to get you started if thi

Ebrar Bilgili 3 Jan 19, 2022
Login UI made in flutter by using simple widgets , icons, buttons, and Colors.

Responsive LogIn UI in Flutter Login UI in Flutter. Visit Website Demo OutPut ## ?? Links Getting Started This project is a starting point for a Flutt

Habib ullah 1 Dec 7, 2021
A collection of Login Screens, Buttons, Loaders and Widgets with attractive UIs built with Flutter

Flutter Screens A collection of Login Screens, Buttons, Loaders and Widgets with attractive UIs, built with Flutter, ready to be used in your applicat

Pham Quoc Duy 2 Dec 20, 2022
Beautiful Flutter login page

Login Page A Beautiful login page UI like this Login_Page Use in your application Tank you ☺ Platform ios ✔️ android ✔️ responsive Can be used on all

Amirziya 18 Dec 27, 2022
A Simple User Login Example Using Flutter And Firebase

Kullanıcı Girişi Bu uygulamada Firebase kullanarak kullanıcının giriş, kayıt ve şifre yenileme yapılması sağlanmıştır. Google ve Facebook hesabınızla

null 1 Oct 12, 2022
Provides login screen with login/signup functionalities to help speed up development

Flutter Login FlutterLogin is a ready-made login/signup widget with many animation effects to demonstrate the capabilities of Flutter Installation Fol

Near Huscarl 1.2k Dec 31, 2022
Provides login screen with login/signup functionalities to help speed up development

Flutter Login FlutterLogin is a ready-made login/signup widget with many animation effects to demonstrate the capabilities of Flutter Installation Fol

Near Huscarl 945 Nov 2, 2021
Flutter Login Signup - Flutter Login and Signup App

Flutter_Login_Signup Authors @Adiikust License MIT ?? Skills Dart, Flutter, Adob

Adnan Hameed 6 Nov 6, 2022
Tour guide App UI in Flutter Consist of Three Pages. First Screen is Splash Screen , Second is welcome screen routing to third Screen and Third screen consist of details , navigation, places, and responsive UI.

Tour Guide // Tourism App Ui in Flutter. Tour Guid App Ui in Flutter. Visit Website Features State Management Navigation Bar Responsive Design Hybrid

Habib ullah 2 Nov 14, 2022
Animated Login for Flutter is a ready-made login/signup screen with soft and pleasant animations.

Animated Login Author: Bahrican Yeşil Animated Login for Flutter is a ready-made login/signup screen with soft and pleasant animations. It is fully re

Bahrican Yesil 93 Jan 3, 2023
Basic login and signup screen designed in flutter

flutter_login_signup Simple basic authentication app designed in flutter. App design is based on Login/Register Design designed by Frank Arinze Downlo

Sonu Sharma 551 Jan 6, 2023
Login/Singin & Register/SignUp Screen

Creating Login & Register Screen Again and again not anymore, this is Boiler plate code for Login/Singin & Register/SignUp Screen just change the imag

Sanskar Tiwari 59 Oct 15, 2022
Encode App-Dev is a open source project which contains different projects of Application development, Android development, IOS development, Flutter, Kotlin, Dart, Java, Swift etc.

HACKTOBERFEST 2022 Encode App-Dev is an open source project which contains different projects of Application development, Android development, IOS dev

null 4 Dec 4, 2022
A flutter app for beginners when using flutter and Dart packages to speed up development

xylophone A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if thi

Trần Văn Nguyên 1 Nov 15, 2021
Doctor Consultation App in Flutter containing splash screen on boarding screen Routing state management Dash board Bottom navigation Decorated Drawer and Doctors Screen in the last.

Online doctor Consultation App UI in Flutter Doctor Consultation App UI in Flutter Visit Website Features State Management Navigation Bar Responsive D

Habib ullah 14 Jan 1, 2023
Android test task master - Create PIN code screen, authentication by PIN code screen and menu screen

Here is described test tasks for a android dev. Need to implement three screens:

null 3 Oct 4, 2022