Describe the bug After entering a password or username and taping login on mobile. The TextField continue to have focus. So the keyboard is still showing.

Expected When tapin or clicking on login, the cursor is remove from the textfield. So this is cleaner and when showing a snackbar for showing error while login this is not hide behind the keyboard (on android at least! )

I tried all those properties without any effect on the login button size.

fixedSize: MaterialStateProperty.all(Size.fromWidth(220)), minimumSize: MaterialStateProperty.all(Size.fromWidth(220)), maximumSize: MaterialStateProperty.all(Size.fromWidth(220)),

There is no way to overpass the password validation other than passing false to the LoginTheme (showFormFieldErrors: false). I think this is misleading.

The general use case: As of user, I want to be able to use my own validator on fields and decide when to apply it.

@bahricanyesil

When validating the email the error message is hardcoded.

if (!isValid) return 'Please enter a valid email'

I propose to add an option to the LoginText(emailValidation:) or something

Same thing for Validators if (!containsUpperCase) return 'Must contain upper case character.';

The only tricky one the length validation 'Must be longer than or equal to $length characters';

But for this one, in the LoginText we can provide a String Function(length)? instead of a String?.

Styling the language button is different than styling the login button. If there is no particular reason, I would like to style it like the other button using a ButtonStyle.

When using the animatedComponentOrder since the AnimationType is not export with the library we can't use the FULL functionnality. (controlling the animation LEFT and RIGHT)

One use case is being able to hide the Welcome title or do more fancy stuff.

What do you think of being able to pass Widget instead of text for LoginText where it make sense and/or completely removing LoginText, I will show you later with example what I have in mind.

By default, if no widget it provided use a Text widget with default TextTheme. (exactly like today) This can also remove the need of passing the TextTheme to the loginTheme.

If you need you style the Welcome here is what I have in mind...

If you need to change the Style

LoginTheme(
   welcome: (defaultText, languageOption) => Text(defaultText, style: TextStyle(...))
);

If you need to remove the widget and space.

LoginTheme(
   welcome: (defaultText, languageOption) => Container()
);

By providing the languageOption is simpler to display the appropriate message

LoginTheme(
   welcome: (defaultText, languageOption) => Text(MY_LOCALIZED_MESSAGE(languageOption))
);

For customizing the TextFormField maybe we can use the standard InputDecoration instead of passing the text in LoginText and style in LoginTheme.

LoginTheme(
   login: (decoration, languageOption) => decoration.copyWith(...)
);

I think this will remove the need for multiple properties like welcomePadding. Since you can change the padding by providing yours :-)

Usually the forgot password is place under the login button.

There are multiple solution but here I propose a cool one....I think.

We would need to have a way to order components.

A suggestion: Define an enum enum Components{ title, title_description, form, login_action_button, accrount_creation_action, forgot_password_action }

Add a property display_order to the AnimatedLogin class OR to the Theme with a default value provided for the list. This will not break the current API.

And you can mark the showForgotPassord as deprecated....and in the meantime when this is true...change the display_order list ! Same thing for showChangeActionTitle

LMM

Instead of passing a string to display the image, provide a Widget. So this is opening the doors of using an SVG image as an example. Just make sure to wrap this widget in a box with constraints.

We are not able change the look and feel of the dialog box.

If you can add a property(LanguageTheme ) to the AnimatedLogin class like proposed bellow

Classes skeleton to show you what I think cover styling of the current available dialog

class LanguageTheme {
  final ButtonStyle? languageButtonStyle;
  final AnimatedDialogTheme? dialogtheme;
}

class AnimatedDialogTheme {
  final TextStyle? title;
  final TextStyle? items;
  final DividerTheme? dividerTheme;
  final ShapeBorder? shape;
}

When theming the button everything work as expected for the desktop view, here is an example:

But when going into the mobile view the theming of the button is not right. I would expect the button to be orange in my example, like the image shown previously

When looking at the code, you would need to change the getter Widget get _formPart => FormPart(

for a function to pass the right actionButtonStyle depending of the View.

Widget _formPart(ButtonStyle? style) => ...
...
actionButtonStyle: style,
...
)

By doing, this everything working like a charm.

Also, the actionTextStyle supersede the ButonStyle texttheme. (this is not obvious at first sight) An idea would be removing the actionTextStyle property completly and only use the actionButtonStyle.

Sounds ok for you?

Describe the bug Opening the app either in web or desktop, the hide/show-icon button in the password-inputs are too large. This also leads to the password-input having a greater height compared to the other inputs. All password inputs (in login and in registration) are affected.

To Reproduce Steps to reproduce the behavior:

1. Open login or registration in windows/chrome
2. notice the too large hide/show icons in the password input

Code Example

  @override
  Widget build(BuildContext context) {
    return AnimatedLogin(
      onLogin: mounted ? LoginFunctions(context).onLogin : null,
      onSignup: mounted ? LoginFunctions(context).onSignup : null,
      onForgotPassword:
          mounted ? LoginFunctions(context).onForgotPassword : null,
      loginDesktopTheme: _desktopTheme,
      loginMobileTheme: _mobileTheme,
      loginTexts: _loginTexts,
      changeLanguageCallback: (LanguageOption? language) {
        if (language != null) {
          DialogBuilder(context).showResultDialog(
            'Successfully changed the language to: ${language.value}.',
          );
          if (mounted) setState(() => language = language);
        }
      },
      languageOptions: _languageOptions,
      selectedLanguage: language,
      initialMode: currentMode,
      onAuthModeChange: (AuthMode newMode) => currentMode = newMode,
    );
  }

Expected behavior Icons should be similar in size to the mobile views.

Screenshots If applicable, add screenshots to help explain your problem.

Platforms, Devices, and Versions

• Platforms [Windows, Web]
• Browser [chrome (not tested on others)]
• Flutter Version [3.3.7]
• Animated Login Package Version [v1.5.5]

My authorization works both by corporate login and by email, but registration can only be by email (corporate login is issued elsewhere). Therefore, please share hints for email in authorization and registration