feat: splash animation update (#1236)

Co-authored-by: Kirill Bubochkin <[email protected]>
espresso-cash · Jan 26, 2024 · 7315868 · 7315868
1 parent ab83ec2
commit 7315868
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 33 deletions.
diff --git a/packages/espressocash_app/lib/features/sign_in/screens/get_started_screen.dart b/packages/espressocash_app/lib/features/sign_in/screens/get_started_screen.dart
@@ -15,6 +15,7 @@ import '../../../routes.gr.dart';
 import '../../../saga.dart';
 import '../../../ui/button.dart';
 import '../../../ui/colors.dart';
+import '../../../ui/splash_screen.dart';
 import '../../../ui/theme.dart';
 import '../services/sign_in_bloc.dart';
 import '../widgets/terms_disclaimer.dart';
@@ -65,12 +66,16 @@ class _GetStartedScreenState extends State<GetStartedScreen> {
                         child: Column(
                           mainAxisAlignment: MainAxisAlignment.end,
                           children: [
-                            const Expanded(child: _Logo()),
-                            const _Body(),
-                            24.verticalSpace,
-                            _Footer(
-                              isSaga: isSaga,
-                              onSignInPressed: _handleSignInPressed,
+                            const Expanded(child: Center(child: SplashLogo())),
+                            Column(
+                              children: [
+                                const _Body(),
+                                24.verticalSpace,
+                                _Footer(
+                                  isSaga: isSaga,
+                                  onSignInPressed: _handleSignInPressed,
+                                ),
+                              ],
                             ),
                           ],
                         ),
@@ -85,16 +90,6 @@ class _GetStartedScreenState extends State<GetStartedScreen> {
       );
 }
 
-class _Logo extends StatelessWidget {
-  const _Logo();
-
-  @override
-  Widget build(BuildContext context) => Hero(
-        tag: 'logo',
-        child: Assets.images.logo.image(width: 309.r, height: 66.r),
-      );
-}
-
 class _Footer extends StatelessWidget {
   const _Footer({required this.isSaga, required this.onSignInPressed});
 

diff --git a/packages/espressocash_app/lib/features/sign_in/screens/sign_in_flow_screen.dart b/packages/espressocash_app/lib/features/sign_in/screens/sign_in_flow_screen.dart
@@ -32,13 +32,16 @@ class _SignInFlowScreenState extends State<SignInFlowScreen> {
   void initState() {
     super.initState();
     _signInBloc = sl<SignInBloc>();
-  }
 
-  @override
-  void didChangeDependencies() {
-    super.didChangeDependencies();
+    WidgetsBinding.instance.addPostFrameCallback((_) async {
+      await Future.wait([
+        precacheImage(Assets.images.logo.provider(), context),
+        precacheImage(Assets.images.dollarBg.provider(), context),
+      ]);
 
-    precacheImage(Assets.images.dollarBg.provider(), context);
+      if (!mounted) return;
+      await context.router.replace(const GetStartedRoute());
+    });
   }
 
   @override
@@ -68,9 +71,12 @@ class _SignInFlowScreenState extends State<SignInFlowScreen> {
           },
           builder: (context, state) => CpLoader(
             isLoading: state.processingState.isProcessing,
-            child: AutoRouter(
-              placeholder: (context) => const ColoredBox(
-                color: CpColors.yellowSplashBackgroundColor,
+            child: HeroControllerScope(
+              controller: HeroController(),
+              child: AutoRouter(
+                placeholder: (context) => const ColoredBox(
+                  color: CpColors.yellowSplashBackgroundColor,
+                ),
               ),
             ),
           ),

diff --git a/packages/espressocash_app/lib/routes.dart b/packages/espressocash_app/lib/routes.dart
@@ -1,5 +1,4 @@
 import 'package:auto_route/auto_route.dart';
-import 'package:flutter/material.dart';
 
 import 'routes.gr.dart';
 
@@ -15,12 +14,12 @@ class AppRouter extends $AppRouter {
   final List<AutoRoute> routes = [
     CustomRoute(
       page: SplashRoute.page,
-      transitionsBuilder: _noTransition,
+      transitionsBuilder: TransitionsBuilders.noTransition,
       initial: true,
     ),
     CustomRoute(
       page: AuthenticatedFlowRoute.page,
-      transitionsBuilder: _noTransition,
+      transitionsBuilder: TransitionsBuilders.noTransition,
       children: [
         AutoRoute(
           path: '',
@@ -109,13 +108,20 @@ class AppRouter extends $AppRouter {
     AutoRoute(
       page: SignInFlowRoute.page,
       children: [
-        AutoRoute(page: GetStartedRoute.page, path: ''),
+        CustomRoute(
+          page: SplashRoute.page,
+          transitionsBuilder: TransitionsBuilders.noTransition,
+          initial: true,
+        ),
+        CustomRoute(
+          page: GetStartedRoute.page,
+          durationInMilliseconds: 1000,
+          transitionsBuilder: TransitionsBuilders.fadeIn,
+        ),
         AutoRoute(page: RestoreAccountRoute.page),
         AutoRoute(page: WebViewRoute.page),
         AutoRoute(page: CountryPickerRoute.page),
       ],
     ),
   ];
 }
-
-Widget _noTransition(_, __, ___, Widget child) => child;
diff --git a/packages/espressocash_app/lib/ui/splash_screen.dart b/packages/espressocash_app/lib/ui/splash_screen.dart
@@ -13,14 +13,24 @@ class SplashScreen extends StatelessWidget {
   static const route = SplashRoute.new;
 
   @override
-  Widget build(BuildContext context) => CpTheme.black(
+  Widget build(BuildContext context) => const CpTheme.black(
         child: DecoratedBox(
-          decoration: const BoxDecoration(
+          decoration: BoxDecoration(
             color: CpColors.yellowSplashBackgroundColor,
           ),
           child: Center(
-            child: Assets.images.logo.image(height: 66),
+            child: SplashLogo(),
           ),
         ),
       );
 }
+
+class SplashLogo extends StatelessWidget {
+  const SplashLogo({super.key});
+
+  @override
+  Widget build(BuildContext context) => Hero(
+        tag: 'logo',
+        child: Assets.images.logo.image(height: 66),
+      );
+}