LoginViewTheme constructor

LoginViewTheme({ TextStyle? formTitleStyle, TextStyle? welcomeTitleStyle, TextStyle? welcomeDescriptionStyle, TextStyle? changeActionTextStyle, TextStyle? useEmailStyle, TextStyle? forgotPasswordStyle, TextStyle? hintTextStyle, TextStyle? errorTextStyle, TextStyle? textFormStyle, InputDecoration? textFormFieldDeco, Widget? nameIcon, Widget? emailIcon, Widget? passwordIcon, double? formFieldElevation, Color? formFieldBackgroundColor, Color? formFieldShadowColor, BorderRadius? formFieldBorderRadius, Size? formFieldSize, Color? formFieldHoverColor, Color? backgroundColor, Color? errorBorderColor, Color? focusedErrorBorderColor, Color? enabledBorderColor, Color? focusedBorderColor, InputBorder? errorBorder, InputBorder? enabledBorder, InputBorder? focusedBorder, InputBorder? focusedErrorBorder, bool showLabelTexts = true, Color? socialLoginHoverColor, BorderSide? socialLoginBorder, ButtonStyle? changeLangButtonStyle, Color? changeLangContentColor, TextStyle? changeLangButtonTextStyle, ButtonStyle? actionButtonStyle, ButtonStyle? changeActionButtonStyle, Curve animationCurve = const Cubic(0.85, 0.40, 0.40, 0.85), double formWidthRatio = 60, Duration? animationDuration, double? formElementsSpacing, EdgeInsets? formPadding, Size? logoSize, double? socialLoginsSpacing, EdgeInsets? welcomePadding, AnimatedDialogTheme? dialogTheme, double? titleDescriptionSpace, double? spacingWithoutSocial, double? spacingFormAndAction, EdgeInsets? forgotPasswordPadding, double? actionAndChangeActionSpacing, EdgeInsets? logoPadding, Color? socialHighlightColor, EdgeInsets? inputPadding, double? loadingButtonSize, bool showLoadingButton = true, bool showLoadingSocialButton = true, Color? loadingButtonColor, Color? loadingSocialButtonColor, EdgeInsets? titlePadding, EdgeInsets? descriptionPadding, EdgeInsets? changeActionPadding, EdgeInsets? changeActionButtonPadding, EdgeInsets? useEmailPadding, EdgeInsets? socialLoginPadding, EdgeInsets? formTitlePadding, EdgeInsets? actionButtonPadding, TextStyle? privacyPolicyStyle, TextStyle? privacyPolicyLinkStyle, Color? checkColor, Color? borderColor, Color? fillColor, List<AnimatedComponent> animatedComponentOrder = const <AnimatedComponent>[AnimatedComponent(component: LoginComponents.logo, animationType: AnimationType.left), AnimatedComponent(component: LoginComponents.title, animationType: AnimationType.left), AnimatedComponent(component: LoginComponents.description, animationType: AnimationType.left), AnimatedComponent(component: LoginComponents.formTitle, animationType: AnimationType.left), AnimatedComponent(component: LoginComponents.socialLogins), AnimatedComponent(component: LoginComponents.useEmail), AnimatedComponent(component: LoginComponents.form), AnimatedComponent(component: LoginComponents.notHaveAnAccount), AnimatedComponent(component: LoginComponents.forgotPassword, animationType: AnimationType.left), AnimatedComponent(component: LoginComponents.changeActionButton, animationType: AnimationType.left), AnimatedComponent(component: LoginComponents.policyCheckbox), AnimatedComponent(component: LoginComponents.actionButton, animationType: AnimationType.left)], })

You can customize the colors, text styles, elevation, borders and lots of other customizable fields implemented in this package. For the values that are indirectly used from theme, you should customize your theme.

Implementation

LoginViewTheme({
  this.formTitleStyle,
  this.welcomeTitleStyle,
  this.welcomeDescriptionStyle,
  this.changeActionTextStyle,
  this.useEmailStyle,
  this.forgotPasswordStyle,
  this.hintTextStyle,
  this.errorTextStyle,
  this.textFormStyle,
  this.textFormFieldDeco,
  this.nameIcon,
  this.emailIcon,
  this.passwordIcon,
  this.formFieldElevation,
  this.formFieldBackgroundColor,
  this.formFieldShadowColor,
  this.formFieldBorderRadius,
  this.formFieldSize,
  this.formFieldHoverColor,
  this.backgroundColor,
  this.errorBorderColor,
  this.focusedErrorBorderColor,
  this.enabledBorderColor,
  this.focusedBorderColor,
  this.errorBorder,
  this.enabledBorder,
  this.focusedBorder,
  this.focusedErrorBorder,
  this.showLabelTexts = true,
  this.socialLoginHoverColor,
  this.socialLoginBorder,
  this.changeLangButtonStyle,
  this.changeLangContentColor,
  this.changeLangButtonTextStyle,
  this.actionButtonStyle,
  this.changeActionButtonStyle,
  this.animationCurve = const Cubic(0.85, 0.40, 0.40, 0.85),
  this.formWidthRatio = 60,
  this.animationDuration,
  this.formElementsSpacing,
  this.formPadding,
  this.logoSize,
  this.socialLoginsSpacing,
  this.welcomePadding,
  this.dialogTheme,
  this.titleDescriptionSpace,
  this.spacingWithoutSocial,
  this.spacingFormAndAction,
  this.forgotPasswordPadding,
  this.actionAndChangeActionSpacing,
  this.logoPadding,
  this.socialHighlightColor,
  this.inputPadding,
  this.loadingButtonSize,
  this.showLoadingButton = true,
  this.showLoadingSocialButton = true,
  this.loadingButtonColor,
  this.loadingSocialButtonColor,
  this.titlePadding,
  this.descriptionPadding,
  this.changeActionPadding,
  this.changeActionButtonPadding,
  this.useEmailPadding,
  this.socialLoginPadding,
  this.formTitlePadding,
  this.actionButtonPadding,
  this.privacyPolicyStyle,
  this.privacyPolicyLinkStyle,
  this.checkColor,
  this.borderColor,
  this.fillColor,
  this.animatedComponentOrder = const <AnimatedComponent>[
    AnimatedComponent(
      component: LoginComponents.logo,
      animationType: AnimationType.left,
    ),
    AnimatedComponent(
      component: LoginComponents.title,
      animationType: AnimationType.left,
    ),
    AnimatedComponent(
      component: LoginComponents.description,
      animationType: AnimationType.left,
    ),
    AnimatedComponent(
      component: LoginComponents.formTitle,
      animationType: AnimationType.left,
    ),
    AnimatedComponent(component: LoginComponents.socialLogins),
    AnimatedComponent(component: LoginComponents.useEmail),
    AnimatedComponent(component: LoginComponents.form),
    AnimatedComponent(component: LoginComponents.notHaveAnAccount),
    AnimatedComponent(
      component: LoginComponents.forgotPassword,
      animationType: AnimationType.left,
    ),
    AnimatedComponent(
      component: LoginComponents.changeActionButton,
      animationType: AnimationType.left,
    ),
    AnimatedComponent(component: LoginComponents.policyCheckbox),
    AnimatedComponent(
      component: LoginComponents.actionButton,
      animationType: AnimationType.left,
    ),
  ],
})  : assert(formWidthRatio >= 50, 'Form width ratio should be at least 50.'),
      assert(
        formElementsSpacing == null || formElementsSpacing <= 70,
        'Spacing between the form elements cannot be more than 70.',
      ),
      assert(
        socialLoginsSpacing == null || socialLoginsSpacing <= 200,
        'Social logins spacing cannot be more than 200.',
      ),
      assert(
        socialLoginsSpacing == null || socialLoginsSpacing <= 200,
        'Social logins spacing cannot be more than 200.',
      ),
      assert(
        logoSize == null || logoSize <= const Size(500, 400),
        'Logo size cannot be more than Size(500, 400).',
      );