diff --git a/flutter_app/lib/screens/welcome_screen.dart b/flutter_app/lib/screens/welcome_screen.dart index 32a25ef..f02bcce 100644 --- a/flutter_app/lib/screens/welcome_screen.dart +++ b/flutter_app/lib/screens/welcome_screen.dart @@ -12,9 +12,11 @@ class WelcomeScreen extends StatefulWidget { class _WelcomeScreenState extends State with SingleTickerProviderStateMixin { late AnimationController _controller; - late Animation _fadeAnimation; - late Animation _logoScaleAnimation; - late Animation _logoRotateAnimation; + late Animation _splashScaleAnimation; + late Animation _splashLogoOpacityAnimation; + late Animation _splashContainerOpacityAnimation; + late Animation _contentFadeAnimation; + late Animation _contentSlideAnimation; double _btnScale = 1.0; @override @@ -22,25 +24,49 @@ class _WelcomeScreenState extends State with SingleTickerProvider super.initState(); _controller = AnimationController( vsync: this, - duration: const Duration(milliseconds: 900), + duration: const Duration(milliseconds: 1400), ); - _fadeAnimation = CurvedAnimation( - parent: _controller, - curve: Curves.easeIn, - ); - - _logoScaleAnimation = Tween(begin: 0.0, end: 1.0).animate( + // 1. Splash Logo Zoom/Scale-down (from 3.0 to 1.0) + _splashScaleAnimation = Tween(begin: 3.0, end: 1.0).animate( CurvedAnimation( parent: _controller, - curve: const Interval(0.2, 0.8, curve: Curves.elasticOut), + curve: const Interval(0.0, 0.45, curve: Curves.easeOutBack), ), ); - _logoRotateAnimation = Tween(begin: -0.1, end: 0.0).animate( + // 2. Splash Logo Fade-in as it scales down + _splashLogoOpacityAnimation = Tween(begin: 0.0, end: 1.0).animate( CurvedAnimation( parent: _controller, - curve: const Interval(0.2, 0.8, curve: Curves.easeOutBack), + curve: const Interval(0.0, 0.35, curve: Curves.easeIn), + ), + ); + + // 3. Splash Container Fade-out + _splashContainerOpacityAnimation = Tween(begin: 1.0, end: 0.0).animate( + CurvedAnimation( + parent: _controller, + curve: const Interval(0.45, 0.6, curve: Curves.easeOut), + ), + ); + + // 4. Welcome Content Fade-in + _contentFadeAnimation = Tween(begin: 0.0, end: 1.0).animate( + CurvedAnimation( + parent: _controller, + curve: const Interval(0.55, 1.0, curve: Curves.easeIn), + ), + ); + + // 5. Welcome Content Slide-up + _contentSlideAnimation = Tween( + begin: const Offset(0.0, 0.05), + end: Offset.zero, + ).animate( + CurvedAnimation( + parent: _controller, + curve: const Interval(0.55, 1.0, curve: Curves.easeOutCubic), ), ); @@ -59,8 +85,64 @@ class _WelcomeScreenState extends State with SingleTickerProvider final isMobile = context.isMobile; return Scaffold( - body: FadeTransition( - opacity: _fadeAnimation, + body: AnimatedBuilder( + animation: _controller, + builder: (context, child) { + final showSplash = _controller.value < 0.6; + + return Stack( + children: [ + // Main Welcome Content + Opacity( + opacity: _contentFadeAnimation.value, + child: SlideTransition( + position: _contentSlideAnimation, + child: IgnorePointer( + ignoring: showSplash, + child: child, + ), + ), + ), + + // Splash Overlay (Centered Logo scaling down) + if (showSplash) + Opacity( + opacity: _splashContainerOpacityAnimation.value, + child: Container( + color: Colors.white, + alignment: Alignment.center, + child: ScaleTransition( + scale: _splashScaleAnimation, + child: Opacity( + opacity: _splashLogoOpacityAnimation.value, + child: Container( + width: 140, + height: 140, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(32), + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.08), + blurRadius: 24, + offset: const Offset(0, 8), + ) + ], + ), + child: ClipRRect( + borderRadius: BorderRadius.circular(32), + child: Image.asset( + 'assets/logo/pozo_logo.jpg', + fit: BoxFit.cover, + ), + ), + ), + ), + ), + ), + ), + ], + ); + }, child: SafeArea( child: Column( children: [ @@ -198,30 +280,24 @@ class _WelcomeScreenState extends State with SingleTickerProvider } Widget _buildLogo(ThemeData theme) { - return ScaleTransition( - scale: _logoScaleAnimation, - child: RotationTransition( - turns: _logoRotateAnimation, - child: Container( - width: 80, - height: 80, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(20), - boxShadow: [ - BoxShadow( - color: Colors.black.withOpacity(0.12), - blurRadius: 20, - offset: const Offset(0, 6), - ) - ], - ), - child: ClipRRect( - borderRadius: BorderRadius.circular(20), - child: Image.asset( - 'assets/logo/pozo_logo.jpg', - fit: BoxFit.cover, - ), - ), + return Container( + width: 80, + height: 80, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(20), + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.12), + blurRadius: 20, + offset: const Offset(0, 6), + ) + ], + ), + child: ClipRRect( + borderRadius: BorderRadius.circular(20), + child: Image.asset( + 'assets/logo/pozo_logo.jpg', + fit: BoxFit.cover, ), ), );