[104] Add branded icon menu nav animation (#28)

* [101] Correcting widget class.

* [101] Complete code.
[102] Starter code.

* [102] Minor copy correction.

* [101] Update for Dart 2

* [102] Complete code.
[103] Starter code.

* [102] Correcting home being stateful.

* [103] Correcting order of fields. (#10)

* [102] Removing unneeded value.

* [102] Dart 2.

* [102] Data correction.

* [103] Completed code.
[104] Starter code.

* [103] Removing unneeded directory.

* [103] Unused icons code.

* [103] Moving supplemental files.

* [103] Using recent changes.

* [103] Removing unused import.

* [103] Data correction.

* [103] Adding body2 styling.

* [103] Dart 2

* [103] Color const correction.

* [102] Complete code.
[103] Starter code.

* [103] Completed code.
[104] Starter code.

* [103] Completed code.
[104] Starter code.

* [103] Correcting order of fields. (#10)

* add backdrop and working menu with filtering

* [104] Minor visual changes.

* [103] Using recent changes.

* [104] Visual detail.

* [104] Newline at EOF.

* [104] License stanzas.

* [104] Removing files from merge.

* [104] Sync.

* [104] Correcting license

* [104] Adding license stanza

* [104] Decrease backdrop radius size to match mocks. (#21)

* [104] PR feedback.

* [104] Removing an unnecessary widget.

* [104] Formatting.

* [104] Replaces regular hamburger menu behavior with a branded version (#22)

* [104] Replaces regular hamburger menu behavior with a branded icon version.

* Fixed space nit and refactored branded icon into its own var.

* whitespace

* [104] Changing "Panel" to "Layer" (#24)

* [104] Clarifying backdrop.

* [104] Changing panel to layer.

* Start to reconfigure the _BackdropTitle to handle custom transition animations.

* Added a customIcon to _BackdropTitle with the correct animations for branded icon.

* Added front and back title sliding to the branded icon animation.

* [104] Merge sync. (#27)

* Start to reconfigure the _BackdropTitle to handle custom transition animations.

* Added a customIcon to _BackdropTitle with the correct animations for branded icon.

* Added front and back title sliding to the branded icon animation.

* rebase fixes

* Responded to comments

* merge fix

* Rearranged the animations and used nested widgets instead of transitions with no local vars.

* Fix bad rebase

* Respond to comments by replacing .animate with .evaluate

Author: clocksmith

mdc_100_series/lib/backdrop.dart

@@ -58,43 +58,82 @@ class _FrontLayer extends StatelessWidget {
 }
 
 class _BackdropTitle extends AnimatedWidget {
+  final Function onPress;
   final Widget frontTitle;
   final Widget backTitle;
 
   const _BackdropTitle({
     Key key,
     Listenable listenable,
-    this.frontTitle,
-    this.backTitle,
-  }) : super(key: key, listenable: listenable);
+    this.onPress,
+    @required this.frontTitle,
+    @required this.backTitle,
+  })  : assert(frontTitle != null),
+        assert(backTitle != null),
+        super(key: key, listenable: listenable);
 
   @override
   Widget build(BuildContext context) {
     final Animation<double> animation = this.listenable;
+
     return DefaultTextStyle(
       style: Theme.of(context).primaryTextTheme.title,
       softWrap: false,
       overflow: TextOverflow.ellipsis,
-      // Here, we do a custom cross fade between backTitle and frontTitle.
-      // This makes a smooth animation between the two texts.
-      child: Stack(
-        children: <Widget>[
-          Opacity(
-            opacity: CurvedAnimation(
-              parent: ReverseAnimation(animation),
-              curve: Interval(0.5, 1.0),
-            ).value,
-            child: backTitle,
-          ),
-          Opacity(
-            opacity: CurvedAnimation(
-              parent: animation,
-              curve: Interval(0.5, 1.0),
-            ).value,
-            child: frontTitle,
+      child: Row(children: <Widget>[
+        // branded icon
+        SizedBox(
+          width: 72.0,
+          child: IconButton(
+            padding: EdgeInsets.only(right: 8.0),
+            onPressed: this.onPress,
+            icon: Stack(children: <Widget>[
+              Opacity(
+                opacity: animation.value,
+                child: ImageIcon(AssetImage('assets/slanted_menu.png')),
+              ),
+              FractionalTranslation(
+                translation: Tween<Offset>(
+                  begin: Offset.zero,
+                  end: Offset(1.0, 0.0),
+                ).evaluate(animation),
+                child: ImageIcon(AssetImage('assets/diamond.png')),
+              )]),
           ),
-        ],
-      ),
+        ),
+        // Here, we do a custom cross fade between backTitle and frontTitle.
+        // This makes a smooth animation between the two texts.
+        Stack(
+          children: <Widget>[
+            Opacity(
+              opacity: CurvedAnimation(
+                parent: ReverseAnimation(animation),
+                curve: Interval(0.5, 1.0),
+              ).value,
+              child: FractionalTranslation(
+                translation: Tween<Offset>(
+                  begin: Offset.zero,
+                  end: Offset(0.5, 0.0),
+                ).evaluate(animation),
+                child: backTitle,
+              ),
+            ),
+            Opacity(
+              opacity: CurvedAnimation(
+                parent: animation,
+                curve: Interval(0.5, 1.0),
+              ).value,
+              child: FractionalTranslation(
+                translation: Tween<Offset>(
+                  begin: Offset(-0.25, 0.0),
+                  end: Offset.zero,
+                ).evaluate(animation),
+                child: frontTitle,
+              ),
+            ),
+          ],
+        )
+      ]),
     );
   }
 }
@@ -146,7 +185,7 @@ class _BackdropState extends State<Backdrop>
   @override
   void didUpdateWidget(Backdrop old) {
     super.didUpdateWidget(old);
-    
+
     if (widget.currentCategory != old.currentCategory) {
       _toggleBackdropLayerVisibility();
     } else if (!_frontLayerVisible) {
@@ -199,34 +238,15 @@ class _BackdropState extends State<Backdrop>
 
   @override
   Widget build(BuildContext context) {
-    var brandedIcon = Row(children: <Widget>[
-      ImageIcon(AssetImage('assets/slanted_menu.png')),
-      ImageIcon(AssetImage('assets/diamond.png')),
-    ]);
-
     var appBar = AppBar(
       brightness: Brightness.light,
       elevation: 0.0,
       titleSpacing: 0.0,
       title: _BackdropTitle(
         listenable: _controller.view,
-        frontTitle: Row(
-          children: <Widget>[
-            SizedBox(
-              width: 72.0,
-              child: IconButton(
-                padding: EdgeInsets.only(left: 20.0),
-                onPressed: _toggleBackdropLayerVisibility,
-                icon: brandedIcon,
-              ),
-            ),
-            widget.frontTitle,
-          ],
-        ),
-        backTitle: IconButton(
-          onPressed: _toggleBackdropLayerVisibility,
-          icon: Icon(Icons.close),
-        ),
+        onPress: _toggleBackdropLayerVisibility,
+        frontTitle: widget.frontTitle,
+        backTitle: widget.backTitle,
       ),
       actions: <Widget>[
         new IconButton(