added animatedOpacity widget to opacity box and fixed when animation is reversing and play/pause force it go forward

Author: Vivek Chib

lib/views/home_page.dart

@@ -100,9 +100,13 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
   void playPauseAnimation() {
     if (controller.isAnimating) {
       controller.stop();
-      playPauseController.animateBack(0.0);
+      playPauseController.reverse();
     } else {
-      controller.repeat(reverse: true);
+      if (controller.isForwardOrCompleted) {
+        controller.repeat(reverse: true);
+      } else {
+        controller.reverse().then((value) => controller.repeat(reverse: true));
+      }
       playPauseController.forward();
     }
   }

lib/views/widgets/animated_box/animated_box_widget.dart

@@ -18,66 +18,65 @@ class AnimatedBoxWidget extends StatelessWidget {
     final theme = Theme.of(context).colorScheme;
 
     return LayoutBuilder(builder: (context, constraints) {
-      final boxSize = constraints.maxHeight / 4;
+      final boxSize = min(constraints.maxWidth, constraints.maxHeight) / 4;
 
       return AnimatedBuilder(
         animation: animation,
         child: ColoredBox(
           color: theme.primary,
-          child: SizedBox(
-            width: boxSize,
-            height: boxSize,
-          ),
+          child: SizedBox.square(dimension: boxSize),
         ),
         builder: (context, child) {
-          return Container(
-            alignment: Alignment.center,
+          return ColoredBox(
             color: theme.onPrimaryFixed,
-            child: switch (animationType) {
-              /// Rotate
-              AnimationType.rotate =>
-                Transform.rotate(angle: animation.value * pi, child: child),
+            child: Align(
+              alignment: Alignment.center,
+              child: switch (animationType) {
+                /// Rotate
+                AnimationType.rotate =>
+                  Transform.rotate(angle: animation.value * pi, child: child),
 
-              /// Scale
-              AnimationType.scale => Transform.scale(
-                  scale: animation.value,
-                  child: child,
-                ),
+                /// Scale
+                AnimationType.scale => Transform.scale(
+                    scale: animation.value,
+                    child: child,
+                  ),
 
-              /// Translate x
-              AnimationType.translateX => Transform.translate(
-                  offset: Tween(
-                    begin: Offset((-constraints.maxWidth + boxSize) / 2, 0),
-                    end: Offset((constraints.maxHeight - boxSize) / 2, 0),
-                  ).transform(animation.value),
-                  child: child,
-                ),
+                /// Translate x
+                AnimationType.translateX => Transform.translate(
+                    offset: Tween(
+                      begin: Offset((-constraints.maxWidth + boxSize) / 2, 0),
+                      end: Offset((constraints.maxHeight - boxSize) / 2, 0),
+                    ).transform(animation.value),
+                    child: child,
+                  ),
 
-              /// Translate Y
-              AnimationType.translateY => Transform.translate(
-                  offset: Tween(
-                    begin: Offset(0, (-constraints.maxHeight + boxSize) / 2),
-                    end: Offset(0, (constraints.maxHeight - boxSize) / 2),
-                  ).transform(animation.value),
-                  child: child,
-                ),
+                /// Translate Y
+                AnimationType.translateY => Transform.translate(
+                    offset: Tween(
+                      begin: Offset(0, (-constraints.maxHeight + boxSize) / 2),
+                      end: Offset(0, (constraints.maxHeight - boxSize) / 2),
+                    ).transform(animation.value),
+                    child: child,
+                  ),
 
-              /// Fade
-              AnimationType.fade => Opacity(
-                  // accept values between 0 and 1
-                  opacity: max(0, min(1, animation.value)),
-                  child: child,
-                ),
+                /// Fade
+                AnimationType.fade => AnimatedOpacity(
+                    duration: const Duration(milliseconds: 100),
+                    opacity: animation.value.clamp(0.0, 1.0),
+                    child: child,
+                  ),
 
-              /// Flip
-              AnimationType.flip => Transform(
-                  alignment: FractionalOffset.center,
-                  transform: Matrix4.identity()
-                    ..setEntry(2, 1, 0.0015)
-                    ..rotateY(animation.value * pi),
-                  child: child,
-                ),
-            },
+                /// Flip
+                AnimationType.flip => Transform(
+                    alignment: FractionalOffset.center,
+                    transform: Matrix4.identity()
+                      ..setEntry(2, 1, 0.0002)
+                      ..rotateY(animation.value * pi),
+                    child: child,
+                  ),
+              },
+            ),
           );
         },
       );