feat: animated cross fade

lib/animation/implicitly/implicitly_animated_cross_fade.dart

@@ -0,0 +1,108 @@
+import 'package:flutter/material.dart';
+
+class ImplicitlyAnimatedCrossFade extends StatefulWidget {
+  final String title;
+
+  ImplicitlyAnimatedCrossFade({Key? key, required this.title})
+      : super(key: key);
+
+  @override
+  State<StatefulWidget> createState() {
+    return _ImplicitlyAnimatedCrossFadeState();
+  }
+}
+
+class _ImplicitlyAnimatedCrossFadeState
+    extends State<ImplicitlyAnimatedCrossFade> {
+  bool _showFirst = true;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(widget.title),
+      ),
+      body: Container(
+        padding: EdgeInsets.all(16),
+        child: Column(
+          children: [
+            Container(
+              height: 60,
+              decoration: BoxDecoration(
+                  color: Colors.red, borderRadius: BorderRadius.circular(20)),
+            ),
+            SizedBox(
+              height: 20,
+            ),
+            AnimatedCrossFade(
+              duration: Duration(seconds: 1),
+              crossFadeState: _showFirst
+                  ? CrossFadeState.showFirst
+                  : CrossFadeState.showSecond,
+              firstChild: Container(
+                height: 150,
+                width: 150,
+                alignment: Alignment.center,
+                decoration: BoxDecoration(
+                  shape: BoxShape.circle,
+                  color: Colors.blue,
+                ),
+                child: Text(
+                  'first child',
+                  style: TextStyle(color: Colors.white),
+                ),
+              ),
+              secondChild: Container(
+                height: 60,
+                alignment: Alignment.center,
+                decoration: BoxDecoration(
+                    shape: BoxShape.rectangle,
+                    color: Colors.red,
+                    borderRadius: BorderRadius.circular(20)),
+                child: Text(
+                  'second child',
+                  style: TextStyle(color: Colors.white),
+                ),
+              ),
+              layoutBuilder: (Widget topChild, Key topChildKey, Widget bottomChild, Key bottomChildKey) {
+                return Stack(
+                  alignment: Alignment.center,
+                  children: <Widget>[
+                    Positioned(
+                      top: 0,
+                      bottom: 0,
+                      key: bottomChildKey,
+                      child: bottomChild,
+                    ),
+                    Positioned(
+                      key: topChildKey,
+                      child: topChild,
+                    ),
+                  ],
+                );
+              },
+            ),
+            SizedBox(
+              height: 20,
+            ),
+            Container(
+              height: 60,
+              decoration: BoxDecoration(
+                  color: Colors.red, borderRadius: BorderRadius.circular(20)),
+            ),
+          ],
+        ),
+      ),
+      floatingActionButton: FloatingActionButton(
+        onPressed: () {
+          setState(() {
+            _showFirst = !_showFirst;
+          });
+        },
+        child: Icon(
+            _showFirst ? Icons.swipe_rounded : Icons.swipe_outlined
+        ),
+      ),
+    );
+  }
+}

lib/animation/implicitly/implicitly_animated_default_text_style.dart

@@ -0,0 +1,98 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+class ImplicitlyAnimatedDefaultTextStyle extends StatefulWidget {
+  final String title;
+
+  ImplicitlyAnimatedDefaultTextStyle({Key? key, required this.title})
+      : super(key: key);
+
+  @override
+  State<StatefulWidget> createState() {
+    return _ImplicitlyAnimatedDefaultTextStyleState();
+  }
+}
+
+class _ImplicitlyAnimatedDefaultTextStyleState
+    extends State<ImplicitlyAnimatedDefaultTextStyle>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _animationController;
+  late Animation<TextStyle> _animation;
+
+  late TextStyle _style;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _style = TextStyle(
+      color: Colors.blue,
+      fontSize: 14,
+    );
+
+    _animationController =
+        AnimationController(duration: Duration(seconds: 2), vsync: this);
+
+    _animation = TextStyleTween(
+            begin: TextStyle(color: Colors.blue, fontSize: 14),
+            end: TextStyle(color: Colors.red, fontSize: 24))
+        .animate(_animationController);
+
+    _animationController.forward();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(widget.title),
+      ),
+      body: Container(
+        padding: EdgeInsets.all(16),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.start,
+          mainAxisSize: MainAxisSize.max,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            DefaultTextStyle(
+              style: _style,
+              overflow: TextOverflow.ellipsis,
+              child: Text("DefaultTextStyle"),
+            ),
+            SizedBox(
+              height: 20,
+            ),
+            DefaultTextStyleTransition(
+              style: _animation,
+              child: Text("DefaultTextStyleTransition"),
+            ),
+            SizedBox(
+              height: 20,
+            ),
+            AnimatedDefaultTextStyle(
+              duration: Duration(seconds: 1),
+              style: _style,
+              child: Text("AnimatedDefaultTextStyle"),
+            ),
+            SizedBox(
+              height: 20,
+            ),
+            ElevatedButton(
+              onPressed: () {
+                setState(() {
+                  _style = TextStyle(
+                    color: Colors
+                        .primaries[Random().nextInt(Colors.primaries.length)],
+                    fontSize: (Random().nextDouble() * 20 + 10),
+                  );
+                });
+              },
+              child: Text("change style"),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/animation/implicitly/implicitly_animations.dart

@@ -1,18 +1,21 @@
 import 'package:do_you_want_to_learn_flutter/animation/implicitly/implicitly_animated_align.dart';
 import 'package:do_you_want_to_learn_flutter/animation/implicitly/implicitly_animated_container.dart';
+import 'package:do_you_want_to_learn_flutter/animation/implicitly/implicitly_animated_cross_fade.dart';
 import 'package:do_you_want_to_learn_flutter/placeholder.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
 import '/extensions/string_extension.dart';
+import 'implicitly_animated_default_text_style.dart';
 import 'implicitly_tween_animation_builder.dart';
 
 enum ImplicitAnimation {
   tweenAnimationBuilder,
   align,
   container,
   defaultTextStyle,
-  opacity
+  opacity,
+  animatedCrossFade
 }
 
 extension _ImplicitAnimationExtension on ImplicitAnimation {
@@ -59,6 +62,12 @@ class ImplicitlyAnimationsWidget extends StatelessWidget {
       case ImplicitAnimation.container:
         aWidget = ImplicitlyAnimatedContainer(title: item.title);
         break;
+      case ImplicitAnimation.defaultTextStyle:
+        aWidget = ImplicitlyAnimatedDefaultTextStyle(title: item.title);
+        break;
+      case ImplicitAnimation.animatedCrossFade:
+        aWidget = ImplicitlyAnimatedCrossFade(title: item.title);
+        break;
       default:
         break;
     }

lib/animation/staggered/staggered_animation_sample.dart

@@ -29,7 +29,7 @@ class _StaggeredAnimationSimpleState extends State<StaggeredAnimationSimpleWidge
 
   @override
   Widget build(BuildContext context) {
-    timeDilation = 10;
+    timeDilation = 2;
     return Scaffold(
       appBar: AppBar(title: Text(widget.title)),
       body: GestureDetector(