Optimizations and additional style parameters

CHANGELOG.md

@@ -1,4 +1,12 @@
 # Versions
+
+## [1.2.0] - 27.01.2022
+
+* Optimized the use of AnimatedBuilder to avoid unnecessary rebuilds.
+* Optimized the management of the state.
+* Added additional style parameters to allow users to further customize.
+* Performed optimization tests.
+
 ## [1.1.0] - 26.01.2022
 
 * Completed all of the documentation.

example/pubspec.lock

@@ -7,7 +7,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "1.1.0"
+    version: "1.2.0"
   animations:
     dependency: transitive
     description:

lib/animated_login.dart

@@ -325,6 +325,7 @@ class __ViewState extends State<_View> with SingleTickerProviderStateMixin {
       widget.formKey ?? GlobalKey<FormState>();
 
   bool _isLandscape = true;
+  bool _isReverse = false;
 
   @override
   void initState() {
@@ -348,12 +349,10 @@ class __ViewState extends State<_View> with SingleTickerProviderStateMixin {
     loginTheme = context.read<LoginTheme>();
     auth = context.read<Auth>();
     _isLandscape = context.watch<LoginTheme>().isLandscape;
+    _isReverse = context.select<Auth, bool>((Auth auth) => auth.isReverse);
     dynamicSize = DynamicSize(context);
     _initializeAnimations();
-    return AnimatedBuilder(
-      animation: animationController,
-      builder: (_, __) => _isLandscape ? _webView : _mobileView,
-    );
+    return _isLandscape ? _webView : _mobileView;
   }
 
   Widget get _webView => Stack(
@@ -389,36 +388,50 @@ class __ViewState extends State<_View> with SingleTickerProviderStateMixin {
   List<Widget> get _mobileChildren => <Widget>[
         _welcomeAnimationWrapper(_LogoAndTexts(logo: widget.logo)),
         _formPart,
-        SizedBox(height: dynamicSize.height * 2.5),
+        SizedBox(
+            height: loginTheme.actionAndChangeActionSpacing ??
+                dynamicSize.height * 2.5),
         if (widget.showChangeActionTitle)
           _welcomeAnimationWrapper(
             _ChangeActionTitle(
                 showButtonText: true, animate: () => _animate(context)),
           ),
       ];
 
-  Widget _welcomeAnimationWrapper(Widget child) => Transform.translate(
-        offset: Offset(dynamicSize.width * welcomeTransitionAnimation.value, 0),
-        child: child,
+  Widget _welcomeAnimationWrapper(Widget extChild) => AnimatedBuilder(
+        animation: welcomeTransitionAnimation,
+        child: extChild,
+        builder: (BuildContext context, Widget? child) => Transform.translate(
+          offset:
+              Offset(dynamicSize.width * welcomeTransitionAnimation.value, 0),
+          child: child,
+        ),
       );
 
-  Widget get _animatedWebWelcome => Transform.translate(
-        offset: Offset(dynamicSize.width * welcomeTransitionAnimation.value, 0),
-        child: Container(
-          decoration: BoxDecoration(
-            color: loginTheme.backgroundColor,
-            image: widget.backgroundImage == null
-                ? null
-                : DecorationImage(
-                    image: AssetImage(widget.backgroundImage!),
-                    fit: BoxFit.cover,
-                  ),
-          ),
-          width: dynamicSize.width *
-              (100 - context.read<LoginTheme>().formWidthRatio),
-          height: dynamicSize.height * 100,
-          child: _webWelcomeComponents(context),
+  Widget get _animatedWebWelcome => AnimatedBuilder(
+        animation: animationController,
+        child: _webWelcomeChild,
+        builder: (BuildContext context, Widget? child) => Transform.translate(
+          offset:
+              Offset(dynamicSize.width * welcomeTransitionAnimation.value, 0),
+          child: child,
+        ),
+      );
+
+  Widget get _webWelcomeChild => Container(
+        decoration: BoxDecoration(
+          color: loginTheme.backgroundColor,
+          image: widget.backgroundImage == null
+              ? null
+              : DecorationImage(
+                  image: AssetImage(widget.backgroundImage!),
+                  fit: BoxFit.cover,
+                ),
         ),
+        width: dynamicSize.width *
+            (100 - context.read<LoginTheme>().formWidthRatio),
+        height: dynamicSize.height * 100,
+        child: _webWelcomeComponents(context),
       );
 
   Widget _webWelcomeComponents(BuildContext context) => Padding(
@@ -429,7 +442,7 @@ class __ViewState extends State<_View> with SingleTickerProviderStateMixin {
           children: <Widget>[
             _LogoAndTexts(logo: widget.logo),
             SizedBox(height: DynamicSize(context).height * 7),
-            if (widget.showChangeActionTitle) const _ChangeActionTitle(),
+            if (widget.showChangeActionTitle) _ChangeActionTitle(),
             SizedBox(height: DynamicSize(context).height * 2),
             _ChangeActionButton(animate: () => _animate(context)),
           ],
@@ -499,11 +512,13 @@ class __ViewState extends State<_View> with SingleTickerProviderStateMixin {
     );
 
     welcomeTransitionAnimation.addListener(() {
-      if (_isLandscape) {
-        auth.isReverse =
-            welcomeTransitionAnimation.value <= loginTheme.formWidthRatio / 2;
-      } else if (_forwardCheck) {
-        auth.isReverse = !auth.isReverse;
+      if (mounted) {
+        if (_isLandscape) {
+          auth.setIsReverse(welcomeTransitionAnimation.value <=
+              context.read<LoginTheme>().formWidthRatio / 2);
+        } else if (_forwardCheck) {
+          auth.setIsReverse(!auth.isReverse);
+        }
       }
     });
   }
@@ -515,7 +530,7 @@ class __ViewState extends State<_View> with SingleTickerProviderStateMixin {
 
   bool get _statusCheck =>
       (welcomeTransitionAnimation.status == AnimationStatus.forward &&
-          auth.isReverse) ||
+          _isReverse) ||
       (welcomeTransitionAnimation.status == AnimationStatus.reverse &&
-          !auth.isReverse);
+          !_isReverse);
 }

lib/src/decorations/input_decorations.dart

@@ -29,13 +29,14 @@ class InputDeco {
   }) {
     final LoginTheme loginTheme = context.read<LoginTheme>();
     return InputDecoration(
-      contentPadding: EdgeInsets.symmetric(
-        vertical: _dynamicSize.height * (loginTheme.isLandscape ? 3.3 : 3),
-      ).copyWith(
-        right: _dynamicSize.width *
-            (paddingFactor ?? (loginTheme.isLandscape ? 1 : 3)),
-        left: _dynamicSize.width * (loginTheme.isLandscape ? 1 : 2.5),
-      ),
+      contentPadding: loginTheme.inputPadding ??
+          EdgeInsets.symmetric(
+            vertical: _dynamicSize.height * (loginTheme.isLandscape ? 3.3 : 3),
+          ).copyWith(
+            right: _dynamicSize.width *
+                (paddingFactor ?? (loginTheme.isLandscape ? 1 : 3)),
+            left: _dynamicSize.width * (loginTheme.isLandscape ? 1 : 2.5),
+          ),
       fillColor: loginTheme.formFieldBackgroundColor ??
           loginTheme.backgroundColor?.withOpacity(.8) ??
           Colors.white54,

lib/src/models/animated_dialog_theme.dart

@@ -20,6 +20,7 @@ class AnimatedDialogTheme {
     this.backgroundColor,
     this.animationDuration,
     this.languageDialogTheme,
+    this.titleStyle,
   });
 
   /// The padding for content of the dialogs.
@@ -62,4 +63,7 @@ class AnimatedDialogTheme {
   /// Theme of language dialog. Determines its style
   /// with the help of [LanguageDialogTheme].
   final LanguageDialogTheme? languageDialogTheme;
+
+  /// Text style of the title.
+  final TextStyle? titleStyle;
 }

lib/src/providers/auth.dart

@@ -108,4 +108,12 @@ class Auth extends ChangeNotifier {
   /// Sets the confirm password.
   void setConfirmPassword(String? newConfirmPassword) =>
       confirmPassword = newConfirmPassword;
+
+  /// Sets the confirm password.
+  void setIsReverse(bool newValue) {
+    if (newValue != isReverse) {
+      isReverse = newValue;
+      notifyListeners();
+    }
+  }
 }

lib/src/providers/login_theme.dart

@@ -185,4 +185,29 @@ class LoginTheme extends LoginViewTheme with ChangeNotifier {
 
   @override
   AnimatedDialogTheme? get dialogTheme => currentTheme.dialogTheme;
+
+  @override
+  double? get titleDescriptionSpace => currentTheme.titleDescriptionSpace;
+
+  @override
+  double? get spacingWithoutSocial => currentTheme.spacingWithoutSocial;
+
+  @override
+  double? get spacingFormAndAction => currentTheme.spacingFormAndAction;
+
+  @override
+  EdgeInsets? get forgotPasswordPadding => currentTheme.forgotPasswordPadding;
+
+  @override
+  double? get actionAndChangeActionSpacing =>
+      currentTheme.actionAndChangeActionSpacing;
+
+  @override
+  EdgeInsets? get logoPadding => currentTheme.logoPadding;
+
+  @override
+  Color? get socialHighlightColor => currentTheme.socialHighlightColor;
+
+  @override
+  EdgeInsets? get inputPadding => currentTheme.inputPadding;
 }

lib/src/providers/login_view_theme.dart

@@ -53,6 +53,14 @@ class LoginViewTheme {
     this.socialLoginsSpacing,
     this.welcomePadding,
     this.dialogTheme,
+    this.titleDescriptionSpace,
+    this.spacingWithoutSocial,
+    this.spacingFormAndAction,
+    this.forgotPasswordPadding,
+    this.actionAndChangeActionSpacing,
+    this.logoPadding,
+    this.socialHighlightColor,
+    this.inputPadding,
   })  : 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."),
@@ -199,6 +207,30 @@ class LoginViewTheme {
   /// Theme preferences for dialogs.
   final AnimatedDialogTheme? dialogTheme;
 
+  /// Spacing between the title and description.
+  final double? titleDescriptionSpace;
+
+  /// Spacing between the form and titles without social login.
+  final double? spacingWithoutSocial;
+
+  /// Spacing between the form and action button.
+  final double? spacingFormAndAction;
+
+  /// Padding for the forgot password text.
+  final EdgeInsets? forgotPasswordPadding;
+
+  /// Spacing between action button and change action CTA.
+  final double? actionAndChangeActionSpacing;
+
+  /// Padding for the logo.
+  final EdgeInsets? logoPadding;
+
+  /// Highlight color for the social login options.
+  final Color? socialHighlightColor;
+
+  /// Custom input padding for the text form fields.
+  final EdgeInsets? inputPadding;
+
   /// Creates a copy login view theme with the given properties.
   LoginViewTheme copyWith({
     TextStyle? formTitleStyle,
@@ -246,6 +278,14 @@ class LoginViewTheme {
     double? socialLoginsSpacing,
     EdgeInsets? welcomePadding,
     AnimatedDialogTheme? dialogTheme,
+    double? titleDescriptionSpace,
+    double? spacingWithoutSocial,
+    double? spacingFormAndAction,
+    EdgeInsets? forgotPasswordPadding,
+    double? actionAndChangeActionSpacing,
+    EdgeInsets? logoPadding,
+    Color? socialHighlightColor,
+    EdgeInsets? inputPadding,
   }) =>
       LoginViewTheme(
         formTitleStyle: formTitleStyle ?? this.formTitleStyle,
@@ -303,5 +343,16 @@ class LoginViewTheme {
         socialLoginsSpacing: socialLoginsSpacing ?? this.socialLoginsSpacing,
         welcomePadding: welcomePadding ?? this.welcomePadding,
         dialogTheme: dialogTheme ?? this.dialogTheme,
+        titleDescriptionSpace:
+            titleDescriptionSpace ?? this.titleDescriptionSpace,
+        spacingFormAndAction: spacingFormAndAction ?? this.spacingFormAndAction,
+        spacingWithoutSocial: spacingWithoutSocial ?? this.spacingWithoutSocial,
+        forgotPasswordPadding:
+            forgotPasswordPadding ?? this.forgotPasswordPadding,
+        actionAndChangeActionSpacing:
+            actionAndChangeActionSpacing ?? this.actionAndChangeActionSpacing,
+        logoPadding: logoPadding ?? this.logoPadding,
+        socialHighlightColor: socialHighlightColor ?? this.socialHighlightColor,
+        inputPadding: inputPadding ?? this.inputPadding,
       );
 }

lib/src/widgets/dialogs/dialog_builder.dart

@@ -1,8 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
+import '../../../animated_login.dart';
 import '../../decorations/text_styles.dart';
-import '../../models/language_option.dart';
 import '../../providers/login_theme.dart';
 import '../texts/base_text.dart';
 import 'animated_dialog.dart';
@@ -34,7 +34,8 @@ class DialogBuilder {
 
   Widget _getSelectTitle(String titleText) => BaseText(
         titleText,
-        style: TextStyles(context).subBodyStyle(
-            color: Theme.of(context).primaryColor.withOpacity(.7)),
+        style: context.read<LoginTheme>().dialogTheme?.titleStyle ??
+            TextStyles(context).subBodyStyle(
+                color: Theme.of(context).primaryColor.withOpacity(.7)),
       );
 }