diff --git a/animations/README.md b/animations/README.md
index 5bfed00d6..6bf214234 100644
--- a/animations/README.md
+++ b/animations/README.md
@@ -23,6 +23,7 @@ Building blocks and patterns
 6. **CustomTweenDemo** Demonstrates how to extend `Tween`.
 7. **TweenSequenceDemo** Demonstrates how to use `TweenSequence` to build a
 button that changes between different colors.
+8. **FadeTransitionDemo** Demonstrates how to use `FadeTransition`. 
 
 ### Misc
 
diff --git a/animations/lib/main.dart b/animations/lib/main.dart
index 8691e12ff..b6a4b8824 100644
--- a/animations/lib/main.dart
+++ b/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_fade_transition.dart';
 import 'src/misc/hero_animation.dart';
 import 'src/misc/animated_list.dart';
 import 'src/misc/card_swipe.dart';
@@ -59,6 +60,10 @@ final basicDemos = [
       name: 'Tween Sequences',
       route: TweenSequenceDemo.routeName,
       builder: (context) => TweenSequenceDemo()),
+  Demo(
+      name: 'Fade Transition',
+      route: FadeTransitionDemo.routeName,
+      builder: (context) => FadeTransitionDemo()),
 ];
 
 final miscDemos = [
diff --git a/animations/lib/src/basics/08_fade_transition.dart b/animations/lib/src/basics/08_fade_transition.dart
new file mode 100644
index 000000000..c0df6ff3c
--- /dev/null
+++ b/animations/lib/src/basics/08_fade_transition.dart
@@ -0,0 +1,76 @@
+// Copyright 2019 The Flutter team. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+
+// Refer to the AnimatedWidget docs here - https://api.flutter.dev/flutter/widgets/AnimatedWidget-class.html
+// for examples of other common animated widgets.
+class FadeTransitionDemo extends StatefulWidget {
+  static const String routeName = '/basics/fade_transition';
+
+  @override
+  _FadeTransitionDemoState createState() => _FadeTransitionDemoState();
+}
+
+class _FadeTransitionDemoState extends State<FadeTransitionDemo>
+    with SingleTickerProviderStateMixin {
+  AnimationController _controller;
+  Animation<double> _animation;
+  CurvedAnimation _curve;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      vsync: this,
+      duration: Duration(milliseconds: 500),
+    );
+
+    _curve = CurvedAnimation(parent: _controller, curve: Curves.easeIn);
+
+    _animation = Tween(
+      begin: 1.0,
+      end: 0.0,
+    ).animate(_curve);
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(
+          'Animated Widget',
+        ),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: <Widget>[
+            FadeTransition(
+              opacity: _animation,
+              child: Icon(
+                Icons.star,
+                color: Colors.amber,
+                size: 300,
+              ),
+            ),
+            RaisedButton(
+              child: Text('animate'),
+              onPressed: () => setState(() {
+                _controller.animateTo(1.0).then<TickerFuture>(
+                    (value) => _controller.animateBack(0.0));
+              }),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}