From 7315868d34a44f18b9cb44e6fef820099e11cfa2 Mon Sep 17 00:00:00 2001 From: Justin Enerio Date: Sat, 27 Jan 2024 06:07:18 +0800 Subject: [PATCH] feat: splash animation update (#1236) Co-authored-by: Kirill Bubochkin --- .../sign_in/screens/get_started_screen.dart | 27 ++++++++----------- .../sign_in/screens/sign_in_flow_screen.dart | 22 +++++++++------ packages/espressocash_app/lib/routes.dart | 18 ++++++++----- .../lib/ui/splash_screen.dart | 16 ++++++++--- 4 files changed, 50 insertions(+), 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 index 84b68974a7..c04f964a1b 100644 --- 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 { 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 { ); } -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 index b9a5119013..793e4db985 100644 --- 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 { void initState() { super.initState(); _signInBloc = sl(); - } - @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 { }, 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 index ba615816a8..ae00fc4789 100644 --- 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 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,7 +108,16 @@ 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), @@ -117,5 +125,3 @@ class AppRouter extends $AppRouter { ), ]; } - -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 index cb1c6a1680..d20b55339d 100644 --- 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), + ); +}