[#6] Add animations

nimblehq · Aug 9, 2023 · 4927b5a · 4927b5a
1 parent d368164
commit 4927b5a
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 15 deletions.
diff --git a/lib/screens/login/login_screen.dart b/lib/screens/login/login_screen.dart
@@ -1,4 +1,6 @@
+import 'dart:ui';
 import 'package:flutter/material.dart';
+import 'package:survey_flutter/gen/assets.gen.dart';
 import 'package:survey_flutter/screens/login/login_form.dart';
 import 'package:survey_flutter/theme/app_constants.dart';
 import 'package:survey_flutter/utils/keyboard_manager.dart';
@@ -12,27 +14,108 @@ class LoginScreen extends StatefulWidget {
   State<StatefulWidget> createState() => _LoginSrceenState();
 }
 
-class _LoginSrceenState extends State<LoginScreen> {
-  late final _gradientOverlay = Container(
-    decoration: BoxDecoration(
-      gradient: LinearGradient(
-        begin: Alignment.topCenter,
-        end: Alignment.bottomCenter,
-        colors: [
-          Colors.black.withOpacity(0.2),
-          Colors.black,
-        ],
+class _LoginSrceenState extends State<LoginScreen>
+    with TickerProviderStateMixin {
+  final _animationDuration = const Duration(milliseconds: 600);
+
+  // - Animation
+
+  late final AnimationController _logoAnimationController = AnimationController(
+    duration: _animationDuration,
+    vsync: this,
+  )..forward();
+
+  late final AnimationController _formAnimationController = AnimationController(
+    duration: _animationDuration,
+    vsync: this,
+  )..forward();
+
+  late final Animation<double> _logoScaleAnimation = Tween(
+    begin: 1.0,
+    end: 0.8,
+  ).animate(CurvedAnimation(
+    parent: _logoAnimationController,
+    curve: Curves.easeIn,
+  ));
+
+  late final Animation<Offset> _logoOffetAnimation = Tween<Offset>(
+    begin: Offset.zero,
+    end: const Offset(0.0, -0.3),
+  ).animate(
+    CurvedAnimation(
+      parent: _logoAnimationController,
+      curve: Curves.easeIn,
+    ),
+  );
+
+  late final Animation<double> _opacityAnimation = CurvedAnimation(
+    parent: _formAnimationController,
+    curve: Curves.easeIn,
+  );
+
+  // - Widgets
+
+  late final _background = TweenAnimationBuilder(
+    tween: Tween<double>(begin: 0, end: 25),
+    duration: _animationDuration,
+    curve: Curves.easeIn,
+    builder: (_, value, __) {
+      return ImageFiltered(
+        imageFilter: ImageFilter.blur(
+          sigmaX: value,
+          sigmaY: value,
+        ),
+        child: Image.asset(
+          Assets.images.splashBackground.path,
+          fit: BoxFit.cover,
+        ),
+      );
+    },
+  );
+
+  late final _gradientOverlay = FadeTransition(
+    opacity: _opacityAnimation,
+    child: Container(
+      decoration: BoxDecoration(
+        gradient: LinearGradient(
+          begin: Alignment.topCenter,
+          end: Alignment.bottomCenter,
+          colors: [
+            Colors.black.withOpacity(0.2),
+            Colors.black,
+          ],
+        ),
+      ),
+    ),
+  );
+
+  late final _logo = SlideTransition(
+    position: _logoOffetAnimation,
+    child: ScaleTransition(
+      scale: _logoScaleAnimation,
+      child: Image.asset(
+        Assets.images.splashLogoWhite.path,
       ),
     ),
   );
 
-  late final _loginForm = const Padding(
-    padding: EdgeInsets.symmetric(
-      horizontal: Metrics.defaultHorizontalPadding,
+  late final _loginForm = FadeTransition(
+    opacity: _opacityAnimation,
+    child: const Padding(
+      padding: EdgeInsets.symmetric(
+        horizontal: Metrics.defaultHorizontalPadding,
+      ),
+      child: LoginForm(),
     ),
-    child: LoginForm(),
   );
 
+  @override
+  void dispose() {
+    _logoAnimationController.dispose();
+    _formAnimationController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return GestureDetector(
@@ -43,7 +126,9 @@ class _LoginSrceenState extends State<LoginScreen> {
           alignment: AlignmentDirectional.center,
           fit: StackFit.expand,
           children: [
+            _background,
             _gradientOverlay,
+            _logo,
             _loginForm,
           ],
         ),

diff --git a/lib/screens/splash/splash.dart b/lib/screens/splash/splash.dart
@@ -46,7 +46,7 @@ class SplashScreenState extends State<SplashScreen> {
   Widget _buildAnimatedLogo() {
     return AnimatedOpacity(
       opacity: _isLogoVisible ? 1.0 : 0.0,
-      duration: const Duration(milliseconds: 500),
+      duration: const Duration(seconds: 1),
       child: Image.asset(
         Assets.images.splashLogoWhite.path,
       ),