Animation Sample:Demonstration of AnimatedSwitcher

animations/README.md

@@ -24,6 +24,7 @@ Building blocks and patterns
 7. **TweenSequenceDemo** Demonstrates how to use `TweenSequence` to build a
 button that changes between different colors.
 8. **AnimatedList** Demonstrates how to use `AnimatedList`
+9. **AnimatedSwitcher** Demonstrates how to use `AnimatedSwitcher`
 
 ### Misc
 

animations/lib/main.dart

@@ -11,6 +11,7 @@ import 'src/basics/04_tweens.dart';
 import 'src/basics/05_animated_builder.dart';
 import 'src/basics/06_custom_tween.dart';
 import 'src/basics/07_tween_sequence.dart';
+import 'src/basics/08_animated_switcher.dart';
 import 'src/misc/animated_list.dart';
 import 'src/misc/card_swipe.dart';
 import 'src/misc/carousel.dart';
@@ -58,6 +59,11 @@ final basicDemos = [
       name: 'Tween Sequences',
       route: TweenSequenceDemo.routeName,
       builder: (context) => TweenSequenceDemo()),
+   Demo(
+      name: 'Animated Switcher',
+      route: AnimatedSwitcherDemo.routeName,
+      builder: (context) => AnimatedSwitcherDemo()),
+
 ];
 
 final miscDemos = [

animations/lib/src/basics/08_animated_switcher.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+
+class AnimatedSwitcherDemo extends StatefulWidget {
+static const String routeName= '/basics/animated_switcher';
+  _AnimatedSwitcherDemoState createState() => new _AnimatedSwitcherDemoState();
+}
+
+class _AnimatedSwitcherDemoState extends State<AnimatedSwitcherDemo> {
+  bool toggleValue = false;
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text('AnimatedSwitcher Demonstration')),
+      body: Center(
+          child: AnimatedContainer(
+        duration: Duration(milliseconds: 1000),
+        height: 40.0,
+        width: 100.0,
+        decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(20.0),
+            color: toggleValue
+                ? Colors.greenAccent[100]
+                : Colors.redAccent[100].withOpacity(0.5)),
+        child: Stack(children: <Widget>[
+          AnimatedPositioned(
+            duration: Duration(milliseconds: 1000),
+            curve: Curves.easeIn,
+            top: 3.0,
+            left: toggleValue ? 60.0 : 0.0,
+            right: toggleValue ? 0.0 : 60.0,
+            child: InkWell(
+              onTap: toggleButton,
+              child: AnimatedSwitcher(
+                duration: const Duration(milliseconds: 1000),
+                transitionBuilder: (Widget child, Animation<double> animation) {
+                  return ScaleTransition(child: child, scale: animation);
+                },
+                child: toggleValue
+                    ? Icon(Icons.check_circle,
+                        color: Colors.green, size: 35.0, key: UniqueKey())
+                    : Icon(Icons.remove_circle,
+                        color: Colors.red, size: 35.0, key: UniqueKey()),
+              ),
+            ),
+          )
+        ]),
+      )),
+    );
+  }
+
+  toggleButton() {
+    setState(() {
+      toggleValue = !toggleValue;
+    });
+  }
+}