Give more room for the front layer drag on iPhone X for new Gallery (#16975)

* Give more room for the front layer drag on iPhone X

* Tweak the animation visual effects

* review lint

examples/flutter_gallery/lib/gallery/backdrop.dart

@@ -9,7 +9,7 @@ import 'package:flutter/rendering.dart';
 import 'package:flutter/material.dart';
 
 const double _kFrontHeadingHeight = 32.0; // front layer beveled rectangle
-const double _kFrontClosedHeight = 72.0; // front layer height when closed
+const double _kFrontClosedHeight = 92.0; // front layer height when closed
 const double _kBackAppBarHeight = 56.0; // back layer (options) appbar height
 
 // The size of the front layer heading's left and right beveled corners.
@@ -204,6 +204,7 @@ class Backdrop extends StatefulWidget {
 class _BackdropState extends State<Backdrop> with SingleTickerProviderStateMixin {
   final GlobalKey _backdropKey = new GlobalKey(debugLabel: 'Backdrop');
   AnimationController _controller;
+  Animation<double> _frontOpacity;
 
   @override
   void initState() {
@@ -213,6 +214,14 @@ class _BackdropState extends State<Backdrop> with SingleTickerProviderStateMixin
       value: 1.0,
       vsync: this,
     );
+
+    _frontOpacity =
+      new Tween<double>(begin: 0.2, end: 1.0).animate(
+        new CurvedAnimation(
+          parent: _controller,
+          curve: const Interval(0.0, 0.4, curve: Curves.easeInOut),
+        ),
+      );
   }
 
   @override
@@ -310,7 +319,10 @@ class _BackdropState extends State<Backdrop> with SingleTickerProviderStateMixin
             child: new _IgnorePointerWhileStatusIsNot(
               AnimationStatus.completed,
               controller: _controller,
-              child: widget.frontLayer,
+              child: new FadeTransition(
+                opacity: _frontOpacity,
+                child: widget.frontLayer,
+              ),
             ),
           ),
         ),