Make drawer demo header not scroll away (#13337)

* Make drawer demo header not scroll

* Add test for gallery drawer demo and fix user accounts drawer header overflow

examples/flutter_gallery/ios/Runner.xcodeproj/project.pbxproj

@@ -276,12 +276,18 @@
 			inputPaths = (
 				"${SRCROOT}/Pods/Target Support Files/Pods-Runner/Pods-Runner-frameworks.sh",
 				"${PODS_ROOT}/../../../../bin/cache/artifacts/engine/ios/Flutter.framework",
+				"${BUILT_PRODUCTS_DIR}/Reachability/Reachability.framework",
+				"${BUILT_PRODUCTS_DIR}/connectivity/connectivity.framework",
 				"${BUILT_PRODUCTS_DIR}/url_launcher/url_launcher.framework",
+				"${BUILT_PRODUCTS_DIR}/video_player/video_player.framework",
 			);
 			name = "[CP] Embed Pods Frameworks";
 			outputPaths = (
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Flutter.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Reachability.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/connectivity.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/url_launcher.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/video_player.framework",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
@@ -508,4 +514,4 @@
 /* End XCConfigurationList section */
 	};
 	rootObject = 97C146E61CF9000F007C117D /* Project object */;
-} 
\ No newline at end of file
+}

examples/flutter_gallery/lib/demo/material/drawer_demo.dart

@@ -89,7 +89,7 @@ class _DrawerDemoState extends State<DrawerDemo> with TickerProviderStateMixin {
         title: const Text('Navigation drawer'),
       ),
       drawer: new Drawer(
-        child: new ListView(
+        child: new Column(
           children: <Widget>[
             new UserAccountsDrawerHeader(
               accountName: const Text('Zach Widget'),
@@ -114,6 +114,7 @@ class _DrawerDemoState extends State<DrawerDemo> with TickerProviderStateMixin {
                   ),
                 ),
               ],
+              margin: EdgeInsets.zero,
               onDetailsPressed: () {
                 _showDrawerContents = !_showDrawerContents;
                 if (_showDrawerContents)
@@ -122,48 +123,58 @@ class _DrawerDemoState extends State<DrawerDemo> with TickerProviderStateMixin {
                   _controller.forward();
               },
             ),
-            new ClipRect(
-              child: new Stack(
-                children: <Widget>[
-                  // The initial contents of the drawer.
-                  new FadeTransition(
-                    opacity: _drawerContentsOpacity,
-                    child: new Column(
-                      mainAxisSize: MainAxisSize.min,
-                      crossAxisAlignment: CrossAxisAlignment.stretch,
-                      children: _drawerContents.map((String id) {
-                        return new ListTile(
-                          leading: new CircleAvatar(child: new Text(id)),
-                          title: new Text('Drawer item $id'),
-                          onTap: _showNotImplementedMessage,
-                        );
-                      }).toList(),
-                    ),
-                  ),
-                  // The drawer's "details" view.
-                  new SlideTransition(
-                    position: _drawerDetailsPosition,
-                    child: new FadeTransition(
-                      opacity: new ReverseAnimation(_drawerContentsOpacity),
-                      child: new Column(
-                        mainAxisSize: MainAxisSize.min,
-                        crossAxisAlignment: CrossAxisAlignment.stretch,
-                        children: <Widget>[
-                          new ListTile(
-                            leading: const Icon(Icons.add),
-                            title: const Text('Add account'),
-                            onTap: _showNotImplementedMessage,
+            new MediaQuery.removePadding(
+              context: context,
+              // DrawerHeader consumes top MediaQuery padding.
+              removeTop: true,
+              child: new Expanded(
+                child: new ListView(
+                  padding: const EdgeInsets.only(top: 8.0),
+                  children: <Widget>[
+                    new Stack(
+                      children: <Widget>[
+                        // The initial contents of the drawer.
+                        new FadeTransition(
+                          opacity: _drawerContentsOpacity,
+                          child: new Column(
+                            mainAxisSize: MainAxisSize.min,
+                            crossAxisAlignment: CrossAxisAlignment.stretch,
+                            children: _drawerContents.map((String id) {
+                              return new ListTile(
+                                leading: new CircleAvatar(child: new Text(id)),
+                                title: new Text('Drawer item $id'),
+                                onTap: _showNotImplementedMessage,
+                              );
+                            }).toList(),
                           ),
-                          new ListTile(
-                            leading: const Icon(Icons.settings),
-                            title: const Text('Manage accounts'),
-                            onTap: _showNotImplementedMessage,
+                        ),
+                        // The drawer's "details" view.
+                        new SlideTransition(
+                          position: _drawerDetailsPosition,
+                          child: new FadeTransition(
+                            opacity: new ReverseAnimation(_drawerContentsOpacity),
+                            child: new Column(
+                              mainAxisSize: MainAxisSize.min,
+                              crossAxisAlignment: CrossAxisAlignment.stretch,
+                              children: <Widget>[
+                                new ListTile(
+                                  leading: const Icon(Icons.add),
+                                  title: const Text('Add account'),
+                                  onTap: _showNotImplementedMessage,
+                                ),
+                                new ListTile(
+                                  leading: const Icon(Icons.settings),
+                                  title: const Text('Manage accounts'),
+                                  onTap: _showNotImplementedMessage,
+                                ),
+                              ],
+                            ),
                           ),
-                        ],
-                      ),
+                        ),
+                      ],
                     ),
-                  ),
-                ],
+                  ],
+                ),
               ),
             ),
           ],

examples/flutter_gallery/test/demo/material/drawer_demo_test.dart

+// Copyright 2017 The Chromium Authors. 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';
+import 'package:flutter_gallery/demo/material/drawer_demo.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('Drawer header does not scroll', (WidgetTester tester)  async {
+    await tester.pumpWidget(new MaterialApp(
+      theme: new ThemeData(platform: TargetPlatform.iOS),
+      home: new DrawerDemo(),
+    ));
+
+    await tester.tap(find.text('Tap here to open the drawer'));
+    await tester.pump();
+    await tester.pump(const Duration(milliseconds: 500));
+
+    expect(tester.getTopLeft(find.byType(UserAccountsDrawerHeader)).dy, 0.0);
+    final double initialTopItemSaneY = tester.getTopLeft(find.text('Drawer item A')).dy;
+    expect(initialTopItemSaneY, greaterThan(0.0));
+
+    await tester.drag(find.text('Drawer item B'), const Offset(0.0, 400.0));
+    await tester.pump();
+
+    expect(tester.getTopLeft(find.byType(UserAccountsDrawerHeader)).dy, 0.0);
+    expect(tester.getTopLeft(find.text('Drawer item A')).dy, greaterThan(initialTopItemSaneY));
+    expect(tester.getTopLeft(find.text('Drawer item A')).dy, lessThanOrEqualTo(initialTopItemSaneY + 400.0));
+  });
+}

packages/flutter/lib/src/material/user_accounts_drawer_header.dart

@@ -68,18 +68,18 @@ class _AccountDetails extends StatelessWidget {
   final bool isOpen;
 
   Widget addDropdownIcon(Widget line) {
-    final Widget icon = new Expanded(
-      child: new Align(
-        alignment: AlignmentDirectional.centerEnd,
-        child: new Icon(
-          isOpen ? Icons.arrow_drop_up : Icons.arrow_drop_down,
-          color: Colors.white
-        ),
-      ),
+    final Widget icon = new Icon(
+      isOpen ? Icons.arrow_drop_up : Icons.arrow_drop_down,
+      color: Colors.white
     );
-    return new Row(
-      crossAxisAlignment: CrossAxisAlignment.center,
-      children: line == null ? <Widget>[icon] : <Widget>[line, icon],
+    return new Expanded(
+      child: new Row(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: line == null ? <Widget>[icon] : <Widget>[
+          new Expanded(child: line),
+          icon,
+        ],
+      ),
     );
   }
 
@@ -88,10 +88,12 @@ class _AccountDetails extends StatelessWidget {
     final ThemeData theme = Theme.of(context);
     Widget accountNameLine = accountName == null ? null : new DefaultTextStyle(
       style: theme.primaryTextTheme.body2,
+      overflow: TextOverflow.ellipsis,
       child: accountName,
     );
     Widget accountEmailLine = accountEmail == null ? null : new DefaultTextStyle(
       style: theme.primaryTextTheme.body1,
+      overflow: TextOverflow.ellipsis,
       child: accountEmail,
     );
     if (onTap != null) {