add low-level animation demo

lib/my_app_meta.dart

@@ -8,6 +8,7 @@ import 'package:provider/provider.dart';
 import './my_route.dart';
 import './routes/about.dart';
 
+import './routes/animation_basic_ex.dart';
 import './routes/animation_hero_ex.dart';
 import './routes/animation_opacity_ex.dart';
 import './routes/appbar_backdrop_ex.dart';
@@ -171,6 +172,7 @@ const kMyAppRoutesStructure = <MyRouteGroup>[
     routes: <MyRoute>[
       OpacityExample(),
       HeroExample(),
+      BasicAnimationExample(),
     ],
   ),
   MyRouteGroup(

lib/routes/animation_basic_ex.dart

@@ -0,0 +1,103 @@
+import 'package:flutter/material.dart';
+import '../my_route.dart';
+
+class BasicAnimationExample extends MyRoute {
+  const BasicAnimationExample(
+      [String sourceFile = 'lib/routes/animation_basic_ex.dart'])
+      : super(sourceFile);
+
+  @override
+  get title => 'Basic animation';
+
+  @override
+  get description =>
+      'Implement animation using low-level Animations, AnimationControllers and Tweens.';
+
+  @override
+  get links => {
+        'Tutorial':
+            'https://flutter.dev/docs/development/ui/animations/tutorial',
+        'Youtube video': 'https://www.youtube.com/watch?v=mdhoIQqS2z0',
+      };
+
+  @override
+  Widget buildMyRouteContent(BuildContext context) {
+    return new _BasicAnimationDemo();
+  }
+}
+
+class _BasicAnimationDemo extends StatefulWidget {
+  @override
+  _BasicAnimationDemoState createState() => _BasicAnimationDemoState();
+}
+
+// Define the State as with SingleTickerProviderStateMixin to be able to set
+// `vsync=this`.
+class _BasicAnimationDemoState extends State<_BasicAnimationDemo>
+    with SingleTickerProviderStateMixin {
+  // An Animation object knows the current state of an animation (for example,
+  // whether it’s started, stopped, or moving forward or in reverse), but
+  // doesn’t know anything about what appears onscreen.
+  Animation<double> _sizeAnimation;
+  Animation<Color> _colorAnimation;
+  // Both AnimationController and CurvedAnimation extends Animation<double>,
+  // but add additional methods
+  // An AnimationController manages the Animation.
+  AnimationController _controller;
+  // A CurvedAnimation defines progression as a non-linear curve.
+  CurvedAnimation _curve;
+
+  @override
+  void initState() {
+    super.initState();
+    this._controller = AnimationController(
+      duration: Duration(seconds: 1),
+      // Setting vsync prevents offscreen animations from consuming
+      // unnecessary resources, `this` has SingleTickerProviderStateMixin.
+      vsync: this,
+    );
+    this._curve =
+        CurvedAnimation(parent: this._controller, curve: Curves.easeIn);
+    // A Tween interpolates between the range of data.
+    this._sizeAnimation =
+        Tween<double>(begin: 50, end: 100).animate(this._curve);
+    this._colorAnimation =
+        ColorTween(begin: Colors.transparent, end: Colors.red)
+            .animate(this._curve);
+    // With addListener(), a listener function is called whenever the value of
+    // the animation changes, e.g. call setState() to cause a rebuild.
+    this._controller.addListener(() => setState(() {}));
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    // Dispose controller to release resources.
+    this._controller.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: <Widget>[
+        Container(
+          margin: EdgeInsets.all(8.0),
+          child: FlutterLogo(),
+          color: this._colorAnimation.value,
+          height: this._sizeAnimation.value,
+          width: this._sizeAnimation.value,
+        ),
+        RaisedButton(
+          child: Text('Forward animation'),
+          onPressed:
+              this._controller.isCompleted ? null : () => _controller.forward(),
+        ),
+        RaisedButton(
+          child: Text('Reverse animation'),
+          onPressed:
+              this._controller.isDismissed ? null : () => _controller.reverse(),
+        ),
+      ],
+    );
+  }
+}