😁 flutter_login_funnel 👥

It's a UX design package to help you to build a login or register process quickly, simply and totaly responsive. You can personnalize it by using your widget with the builder parameter but all the logic transition will be auto manage. The transition is in FadeInOut for the label and the keyboard doesn't change when we change steps. There is a progressbar for the user to know when it's completed and a simple animation when the user start typing.

This can be used with any Authentification service provider with email/password


All UX logic are tested with 100% of test coverage (run: flutter test).

😃 Import

  flutter_login_funnel: ^0.0.8

      url: https://github.com/yelkamel/flutter_login_funnel

🧐 How to use

      onFinish: (loginModel) {},
      onClose: () {},
      loadingWidget: const CircularProgressIndicator(),
      backWidget:  const Icon(Icons.arrow_back),
      onEmailValidation: (_) => _.length > 3,
      onPasswordValidation: (_) => _.length > 3,
      onNameValidation: (_) => _.length > 3,
      nextBuilder: (context, step, goNext) => MaterialButton(
        onPressed: goNext!,
        child: Text("Suivant"),
      titleBuilder: (context, step) {
        switch (step) {
          case LoginStep.name:
            return Text("votre prénom");
          case LoginStep.email:
            return Text("votre email ?");
          case LoginStep.pwd:
            return Text("mot de passe ?");
      registerOrConnectBuilder: (context, onRegister, onConnect) => Center(
        child: Column(
          children: [
              onPressed: onConnect,
              child: Text("Click here to connect"),
              onPressed: onRegister,
              child: Text("Click here to register"),
      actionsBuilder: (context, step, loginModel) => step == LoginStep.password ? 
              onPressed: onConnect,
              child: Text("Reset Password request"),
            ) : const SizedBox();
      onAuthSubmit: (loginModel) async {
        if (!loginModel.createAccount) {
          final res = await Auth.signInWithEmailAndPassword(loginModel.email, loginModel.password);
          if (!res) return false;
        final res = await Auth.registerWithEmailAndPassword(loginModel.email, loginModel.password);
        if (!res) return false;
        return true;

🤓 Reference

onFinishAuthCallback When the the user is logged in If you use Auth stream strategy this is no needed. And It give the user login information (name, email, password, creationOrNot).
onAuthSubmitAuthCallbackWhere you have to call your Authentification service provider with the email/password (and name if it's a registration) if the provider doesn't accept you can return false to stop the tunnel otherwise true Tips: don't forget to popup a snackbar to explain why the provider didn't accepte.
onLoginAuthCallbackCalled when the user hit the submit button when in login mode.
onEmailValidationFunctionthis validation function is to validate the email if it's return false it's will don't go next.
onPasswordValidationFunctionthis validation function is to validate the password if it's return false it's will don't go next.
onNameValidationFunctionthis validation function is to validate the name if it's return false it's will don't go next.
loadingWidgetWidgetThis widget will be show when it's loading state.
backWidgetWidgetThis widget will be show as back button.
titleBuilderBuilderThis will be show in the top for each step.
registerOrConnectBuilderBuilderThis will be show in the first step to as the use to connect or login use onConnect to call login and onRegister to register an user.
actionsBuilderBuilderThis is to build actions button for by step.
nextBuilderBuilderThis is to build the next button in the bottom of each step.
progressBarBuilderBuilderThis will show the progress of the funnel in the top for the user to know what's going on.

🙃 Model

LoginModel Data:

createAccountbool A bool that contains if the user selected registration or connexion process.
nameStringThe name getted from the funnel.
emailStringThe email getted from the funnel.
passwordStringThe password getted from the funnel.

😎 Widget Utils


This widget is to show the first step of the funnel and let the choice of the user if he wanna to do a registration or a connexion.

            step: step,
            emailLabel: "Votre email ?",
            nameLabel: "Votre Prénom ?",
            passwordLabel: "Votre mot de passe ?",


This is a widget that show the label on top of the input for the step Name, Email or Password.

            onLogin: onConnect,
            onRegister: onRegister,
            registerButtonLabel: "Inscription",
            alreadyAccountLabel: "Vous avez déjà un compte ?",
            connectButtonLabel: "Connexion",


This is a simple progress bar widget that can be used in the login funnel.

            step: step,
            progressColor: Colors.red,
            backgroundProgressColor:  Colors.blue,

🥳 Idea Todo

Authentification button for Fb, Google, Apple, etc..🔥 ☑️
Label input with microphone🔥🔥🔥 ☑️
Background image animation transition🔥🔥 ☑️
Onboarding process funnel classique🔥 ☑️
Making other animation transition like SlideInOut🔥 ☑️
Making other animation when user typing🔥 ☑️

Feel free to add you idea to the README.


  • MIT License