I'm wondering if this is possible to add the ability to align the forgot password like this image.
I think this a common scenario.

Also adding a background image as well can be awesome (like is shows in the image.

Describe the bug

Hi @bahricanyesil ,

very good first implementation of the library.

Here what I noticed, it can be more helpfully if you name your parameter
typedef ChangeLanguageCallback = void Function(String?); => typedef ChangeLanguageCallback = void Function(String? language)

So the IDE will generate a more meanfull variable name instead of p0 :-)
This apply to most of the callbacks defined.

Also here I would find be more usefull to return the LanguageOption? instead of a String?
typedef ChangeLanguageCallback = void Function(String?); => typedef ChangeLanguageCallback = void Function(LanguageOption ? option)

Also for LanguageOption it would replace it by:

const LanguageOption({
    required this.value,
    required this.languageLabel,
    this.iconPath,
  });

This will allow to be very generic, and use the value store in the LanguageOption to other layers (ex: a cubit responsible to change the locale, etc...)

Let me know if you want me to do a pull request.

Best reards,
Louis-Michel

Can I add anew field like phone number ,name , address and so on in sign up , i mean can i add more SignUpData or only email ,username and password

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 :-)

@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.

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

Let takes this example

I don<t think there is a way to add the logo on top of the Welcome string.

I we add the ability to have something like this:

typedef WelcomeBuilder = Widget Function(String localizedString);

AnimatedLogin(
       welcomeBuilder : (localizedString) => Column(...)...

typedef WelcomeBuilder = Widget Function(Widget defaultChild);
AnimatedLogin(
       welcomeBuilder : (defaultChild) => Column(...)...

typedef LabelBuilder = Widget Function(LabelType type, String localizedString, Widget defaultChild);
AnimatedLogin(
       labelBuilder : (type, localizedString, defaultChild) => switch(type) { LabelType.welcome => ..., _ => defaultChild}

This labelBuilder or welcomeBuilder is optional, so it will not break the API :-)

Another idea is use this feature to return a Record to make the alignment as well !!!

typedef LabelBuilder = (Widget, Alignment) Function(LabelType type, String localizedString, Widget defaultChild, DisplayType mobileOrDesktop);

AnimatedLogin(
       labelBuilder : (type, localizedString, defaultChild, displayType) => switch(type) { 
LabelType.forgotPassword => (Alignment.centerRight, defaultChild) 
_ => (null, defaultChild)}

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)

Gather all style-related things under the LoginTheme

Thanks to @wer-mathurin

Maybe move the property to the LoginTheme. Because when when want to theme the Login, we need to do it in the AnimatedLogin class for certain things and LoginTheme for others

Originally posted by @wer-mathurin in #5 (comment)

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?

• Add link for AnimatedDialogTheme
• Add link for LanguageDialogTheme

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.

• Update the documentation

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

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

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

Here is a screenshot when spacingWithoutSocial is set to 0

This style only affect the login
/// Custom button style for action button (login/signup).
final ButtonStyle? actionButtonStyle;

And this one affect the registration button (maybe rename it for more clarity
changeActionButtonStyle

Cheers,

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! )

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]

我只做 app 所以直接注释掉了，这个地方感觉不应该用宽度来判断
Widget _webScaffold(Color? backgroundColor) => Scaffold(
backgroundColor: backgroundColor,
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
// final isLandscape =
// constraints.maxHeight / constraints.maxWidth < 1.05;
// context.read().setIsLandscape(newValue: isLandscape);
return _safeArea;
},
),

Currently, we have 4 issues in the package which decrease the pub points and prevent passing the static analysis.

Describe the bug
Initial mode parameter doesn't provide the intended functionality.

To Reproduce
You can set the initial mode in the example project as "AuthMode.signUp" and you will see that it still displays the login mode initially.

Expected behavior
It should display the initial mode given as parameter and adjust the other system properties accordingly.

With the latest update of Flutter, material 3 will be the default. You can reach out for the details here.

Therefore, we need to update some text styles, colors, decorations, etc.

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.

add firebase logi nand signup

This will enable the login page to remember the email typed or password, username etc...

See: https://api.flutter.dev/flutter/widgets/AutofillGroup-class.html

我只做 app 所以直接注释掉了，这个地方感觉不应该用宽度来判断
Widget _webScaffold(Color? backgroundColor) => Scaffold(
backgroundColor: backgroundColor,
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
// final isLandscape =
// constraints.maxHeight / constraints.maxWidth < 1.05;
// context.read().setIsLandscape(newValue: isLandscape);
return _safeArea;
},
),