From a05f09589241288ab115dc8bcd0def7a4c6f05a9 Mon Sep 17 00:00:00 2001
From: "Dr.Blank" <64108942+Dr-Blank@users.noreply.github.com>
Date: Wed, 23 Apr 2025 00:53:24 +0530
Subject: [PATCH] feat: add fadeSlideTransitionBuilder for smoother transitions
 in user login

---
 .../view/onboarding_single_page.dart          | 32 +++++++-------
 lib/features/onboarding/view/user_login.dart  | 42 ++++++++++++-------
 2 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/lib/features/onboarding/view/onboarding_single_page.dart b/lib/features/onboarding/view/onboarding_single_page.dart
index 7f071a0..b9a7eb5 100644
--- a/lib/features/onboarding/view/onboarding_single_page.dart
+++ b/lib/features/onboarding/view/onboarding_single_page.dart
@@ -39,6 +39,22 @@ class OnboardingSinglePage extends HookConsumerWidget {
   }
 }
 
+Widget fadeSlideTransitionBuilder(
+  Widget child,
+  Animation<double> animation,
+) {
+  return FadeTransition(
+    opacity: animation,
+    child: SlideTransition(
+      position: Tween<Offset>(
+        begin: const Offset(0, 0.3),
+        end: const Offset(0, 0),
+      ).animate(animation),
+      child: child,
+    ),
+  );
+}
+
 class OnboardingBody extends HookConsumerWidget {
   const OnboardingBody({
     super.key,
@@ -54,22 +70,6 @@ class OnboardingBody extends HookConsumerWidget {
 
     final canUserLogin = useState(apiSettings.activeServer != null);
 
-    fadeSlideTransitionBuilder(
-      Widget child,
-      Animation<double> animation,
-    ) {
-      return FadeTransition(
-        opacity: animation,
-        child: SlideTransition(
-          position: Tween<Offset>(
-            begin: const Offset(0, 0.3),
-            end: const Offset(0, 0),
-          ).animate(animation),
-          child: child,
-        ),
-      );
-    }
-
     return Column(
       mainAxisAlignment: MainAxisAlignment.center,
       crossAxisAlignment: CrossAxisAlignment.center,
diff --git a/lib/features/onboarding/view/user_login.dart b/lib/features/onboarding/view/user_login.dart
index bf65b12..c5ba4bf 100644
--- a/lib/features/onboarding/view/user_login.dart
+++ b/lib/features/onboarding/view/user_login.dart
@@ -1,9 +1,12 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_animate/flutter_animate.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:shelfsdk/audiobookshelf_api.dart';
 import 'package:vaani/api/api_provider.dart';
 import 'package:vaani/api/server_provider.dart';
+import 'package:vaani/features/onboarding/view/onboarding_single_page.dart'
+    show fadeSlideTransitionBuilder;
 import 'package:vaani/features/onboarding/view/user_login_with_open_id.dart';
 import 'package:vaani/features/onboarding/view/user_login_with_password.dart';
 import 'package:vaani/features/onboarding/view/user_login_with_token.dart';
@@ -172,26 +175,33 @@ class UserLoginMultipleAuth extends HookConsumerWidget {
                         }
                       },
                     ),
-                  ],
+                  ].animate(interval: 100.ms).fadeIn(
+                        duration: 150.ms,
+                        curve: Curves.easeIn,
+                      ),
                 ),
               ),
               Padding(
                 padding: const EdgeInsets.all(8.0),
-                child: switch (methodChoice.value) {
-                  AuthMethodChoice.authToken => UserLoginWithToken(
-                      server: server,
-                      addServer: addServer,
-                    ),
-                  AuthMethodChoice.local => UserLoginWithPassword(
-                      server: server,
-                      addServer: addServer,
-                    ),
-                  AuthMethodChoice.openid => UserLoginWithOpenID(
-                      server: server,
-                      addServer: addServer,
-                      openIDButtonText: openIDButtonText,
-                    ),
-                },
+                child: AnimatedSwitcher(
+                  duration: 200.ms,
+                  transitionBuilder: fadeSlideTransitionBuilder,
+                  child: switch (methodChoice.value) {
+                    AuthMethodChoice.authToken => UserLoginWithToken(
+                        server: server,
+                        addServer: addServer,
+                      ),
+                    AuthMethodChoice.local => UserLoginWithPassword(
+                        server: server,
+                        addServer: addServer,
+                      ),
+                    AuthMethodChoice.openid => UserLoginWithOpenID(
+                        server: server,
+                        addServer: addServer,
+                        openIDButtonText: openIDButtonText,
+                      ),
+                  },
+                ),
               ),
             ],
           ),