[Gallery] Implement Crane middle front layer (#318)

* Move gallery/gallery/ content to gallery/

* Update banner_demo.dart

* Update documentation

* Add hidden files

* Edit Travis script

* Update top level docs

* Update README.md path

* Move Crane middle tab up

gallery/lib/studies/crane/backdrop.dart

@@ -23,10 +23,12 @@ class _FrontLayer extends StatelessWidget {
     Key key,
     this.title,
     this.index,
+    this.mobileTopOffset,
   }) : super(key: key);
 
   final String title;
   final int index;
+  final double mobileTopOffset;
 
   static const frontLayerBorderRadius = 16.0;
 
@@ -37,6 +39,9 @@ class _FrontLayer extends StatelessWidget {
 
     return DefaultFocusTraversal(
       policy: ReadingOrderTraversalPolicy(),
+      child: Padding(
+        padding:
+            isDesktop ? EdgeInsets.zero : EdgeInsets.only(top: mobileTopOffset),
         child: PhysicalShape(
           elevation: 16,
           color: cranePrimaryWhite,
@@ -62,6 +67,7 @@ class _FrontLayer extends StatelessWidget {
             ],
           ),
         ),
+      ),
     );
   }
 }
@@ -94,23 +100,27 @@ class Backdrop extends StatefulWidget {
 
 class _BackdropState extends State<Backdrop> with TickerProviderStateMixin {
   TabController _tabController;
-  Animation<Offset> _flyLayerOffset;
+  Animation<Offset> _flyLayerHorizontalOffset;
-  Animation<Offset> _sleepLayerOffset;
+  Animation<Offset> _sleepLayerHorizontalOffset;
-  Animation<Offset> _eatLayerOffset;
+  Animation<Offset> _eatLayerHorizontalOffset;
+
+  // How much the 'sleep' front layer is vertically offset relative to other
+  // front layers, in pixels, with the mobile layout.
+  static const _sleepLayerTopOffset = 60.0;
 
   @override
   void initState() {
     super.initState();
     _tabController = TabController(length: 3, vsync: this);
 
-    // Offsets to create a gap between front layers.
+    // Offsets to create a horizontal gap between front layers.
-    _flyLayerOffset = _tabController.animation
+    _flyLayerHorizontalOffset = _tabController.animation
         .drive(Tween<Offset>(begin: Offset(0, 0), end: Offset(-0.05, 0)));
 
-    _sleepLayerOffset = _tabController.animation
+    _sleepLayerHorizontalOffset = _tabController.animation
         .drive(Tween<Offset>(begin: Offset(0.05, 0), end: Offset(0, 0)));
 
-    _eatLayerOffset = _tabController.animation
+    _eatLayerHorizontalOffset = _tabController.animation
         .drive(Tween<Offset>(begin: Offset(0.10, 0), end: Offset(0.05, 0)));
   }
 
@@ -163,6 +173,14 @@ class _BackdropState extends State<Backdrop> with TickerProviderStateMixin {
                               20 * textScaleFactor / 2
                           : 175 + 140 * textScaleFactor / 2,
                     ),
+                    // To display the middle front layer higher than the others,
+                    // we allow the TabBarView to overflow by an offset
+                    // (doubled because it technically overflows top & bottom).
+                    // The other front layers are top padded by this offset.
+                    child: LayoutBuilder(builder: (context, constraints) {
+                      return OverflowBox(
+                        maxHeight:
+                            constraints.maxHeight + _sleepLayerTopOffset * 2,
                         child: TabBarView(
                           physics: isDesktop
                               ? NeverScrollableScrollPhysics()
@@ -170,31 +188,36 @@ class _BackdropState extends State<Backdrop> with TickerProviderStateMixin {
                           controller: _tabController,
                           children: [
                             SlideTransition(
-                          position: _flyLayerOffset,
+                              position: _flyLayerHorizontalOffset,
                               child: _FrontLayer(
                                 title: GalleryLocalizations.of(context)
                                     .craneFlySubhead,
                                 index: 0,
+                                mobileTopOffset: _sleepLayerTopOffset,
                               ),
                             ),
                             SlideTransition(
-                          position: _sleepLayerOffset,
+                              position: _sleepLayerHorizontalOffset,
                               child: _FrontLayer(
                                 title: GalleryLocalizations.of(context)
                                     .craneSleepSubhead,
                                 index: 1,
+                                mobileTopOffset: 0,
                               ),
                             ),
                             SlideTransition(
-                          position: _eatLayerOffset,
+                              position: _eatLayerHorizontalOffset,
                               child: _FrontLayer(
                                 title: GalleryLocalizations.of(context)
                                     .craneEatSubhead,
                                 index: 2,
+                                mobileTopOffset: _sleepLayerTopOffset,
                               ),
                             ),
                           ],
                         ),
+                      );
+                    }),
                   ),
                 ],
               ),