From ed0f69d15567ce2a23cc182ca7d249ac1eb4f45f Mon Sep 17 00:00:00 2001
From: zypherift <regokoppany@gmail.com>
Date: Thu, 22 Aug 2024 21:23:20 +0200
Subject: [PATCH] add animation to fade in (pain)

---
 .../lib/screens/login/kreten_login.dart       | 66 ++++++++++++++-----
 .../lib/screens/login/login_screen.dart       |  2 +-
 2 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/refilc_mobile_ui/lib/screens/login/kreten_login.dart b/refilc_mobile_ui/lib/screens/login/kreten_login.dart
index d13b68b..73ce534 100644
--- a/refilc_mobile_ui/lib/screens/login/kreten_login.dart
+++ b/refilc_mobile_ui/lib/screens/login/kreten_login.dart
@@ -13,14 +13,23 @@ class KretenLoginWidget extends StatefulWidget {
   State<KretenLoginWidget> createState() => _KretenLoginWidgetState();
 }
 
-class _KretenLoginWidgetState extends State<KretenLoginWidget> {
+class _KretenLoginWidgetState extends State<KretenLoginWidget>
+    with TickerProviderStateMixin {
   late final WebViewController controller;
+  late AnimationController _animationController;
   var loadingPercentage = 0;
   var currentUrl = '';
+  bool _hasFadedIn = false;
 
   @override
   void initState() {
     super.initState();
+
+    _animationController = AnimationController(
+      vsync: this, // Use the TickerProviderStateMixin
+      duration: const Duration(milliseconds: 300),
+    );
+
     controller = WebViewController()
       ..setJavaScriptMode(JavaScriptMode.unrestricted)
       ..setNavigationDelegate(NavigationDelegate(
@@ -78,29 +87,54 @@ class _KretenLoginWidgetState extends State<KretenLoginWidget> {
   //     Nonce nonce = getNonce(nonceStr, );
   // }
 
+  @override
+  void dispose() {
+    // Step 3: Dispose of the animation controller
+    _animationController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
+    // Trigger the fade-in animation only once when loading reaches 100%
+    if (loadingPercentage == 100 && !_hasFadedIn) {
+      _animationController.forward(); // Play the animation
+      _hasFadedIn =
+          true; // Set the flag to true, so the animation is not replayed
+    }
+
     return Stack(
       children: [
-        // WebView that will only be visible when the loading is 100%
-        Visibility(
-          visible: loadingPercentage == 100,
-          maintainState: true, // Keep the WebView running in the background
-          child: WebViewWidget(
-            controller: controller,
+        // Webview that will be displayed only when the loading is 100%
+        if (loadingPercentage == 100)
+          FadeTransition(
+            opacity: Tween<double>(begin: 0, end: 1).animate(
+              CurvedAnimation(
+                parent: _animationController,
+                curve: Curves.easeIn,
+              ),
+            ),
+            child: WebViewWidget(
+              controller: controller,
+            ),
           ),
-        ),
+
         // Show the CircularProgressIndicator while loading is not 100%
         if (loadingPercentage < 100)
           Center(
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                CircularProgressIndicator(
-                  value: loadingPercentage /
-                      100.0, // Shows progress as a percentage
-                ),
-              ],
+            child: TweenAnimationBuilder(
+              tween: Tween<double>(begin: 0, end: loadingPercentage / 100.0),
+              duration: const Duration(milliseconds: 300),
+              builder: (context, double value, child) {
+                return Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    CircularProgressIndicator(
+                      value: value, // Smoothly animates the progress
+                    ),
+                  ],
+                );
+              },
             ),
           ),
       ],
diff --git a/refilc_mobile_ui/lib/screens/login/login_screen.dart b/refilc_mobile_ui/lib/screens/login/login_screen.dart
index 8dc6229..12e4193 100644
--- a/refilc_mobile_ui/lib/screens/login/login_screen.dart
+++ b/refilc_mobile_ui/lib/screens/login/login_screen.dart
@@ -242,7 +242,7 @@ class LoginScreenState extends State<LoginScreen> {
                                               height: MediaQuery.of(context)
                                                           .size
                                                           .height *
-                                                      0.8 +
+                                                      0.9 +
                                                   MediaQuery.of(context)
                                                       .viewInsets
                                                       .bottom,