Revised Drawer Header (#4160)

dev/manual_tests/card_collection.dart

@@ -126,7 +126,7 @@ class CardCollectionState extends State<CardCollection> {
       child: new IconTheme(
         data: const IconThemeData(color: Colors.black),
         child: new Block(children: <Widget>[
-          new DrawerHeader(child: new Text('Options')),
+          new DrawerHeader(content: new Center(child: new Text('Options'))),
           buildDrawerCheckbox("Make card labels editable", _editable, _toggleEditable),
           buildDrawerCheckbox("Snap fling scrolls to center", _snapToCenter, _toggleSnapToCenter),
           buildDrawerCheckbox("Fixed size cards", _fixedSizeCards, _toggleFixedSizeCards),

dev/manual_tests/pageable_list.dart

@@ -85,7 +85,7 @@ class PageableListAppState extends State<PageableListApp> {
   Widget _buildDrawer() {
     return new Drawer(
       child: new Block(children: <Widget>[
-        new DrawerHeader(child: new Text('Options')),
+        new DrawerHeader(content: new Center(child: new Text('Options'))),
         new DrawerItem(
           icon: Icons.more_horiz,
           selected: scrollDirection == Axis.horizontal,

examples/flutter_gallery/lib/gallery/drawer.dart

@@ -32,7 +32,9 @@ class GalleryDrawer extends StatelessWidget {
     return new Drawer(
       child: new Block(
         children: <Widget>[
-          new DrawerHeader(child: new Text('Flutter gallery')),
+          new DrawerHeader(
+            content: new Center(child: new Text('Flutter gallery'))
+          ),
           new DrawerItem(
             icon: Icons.brightness_5,
             onPressed: () { onThemeChanged(true); },

examples/stocks/lib/stock_home.dart

@@ -124,7 +124,7 @@ class StockHomeState extends State<StockHome> {
   Widget _buildDrawer(BuildContext context) {
     return new Drawer(
       child: new Block(children: <Widget>[
-        new DrawerHeader(child: new Text('Stocks')),
+        new DrawerHeader(content: new Center(child: new Text('Stocks'))),
         new DrawerItem(
           icon: Icons.assessment,
           selected: true,

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

@@ -9,7 +9,9 @@ import 'theme.dart';
 
 const double _kDrawerHeaderHeight = 140.0;
 
-/// The top-most region of a material design drawer.
+/// The top-most region of a material design drawer. The header's [background]
+/// widget extends behind the system status bar and its [content] widget is
+/// stacked on top of the background and below the status bar.
 ///
 /// Part of the material design [Drawer].
 ///
@@ -24,10 +26,15 @@ class DrawerHeader extends StatelessWidget {
   /// Creates a material design drawer header.
   ///
   /// Requires one of its ancestors to be a [Material] widget.
-  const DrawerHeader({ Key key, this.child }) : super(key: key);
+  const DrawerHeader({ Key key, this.background, this.content }) : super(key: key);
 
-  /// The widget below this widget in the tree.
+  /// A widget that extends behind the system status bar and is stacked
-  final Widget child;
+  /// behind the [content] widget.
+  final Widget background;
+
+  /// A widget that's positioned below the status bar and stacked on top of the
+  /// [background] widget. Typically a view of the user's id.
+  final Widget content;
 
   @override
   Widget build(BuildContext context) {
@@ -35,10 +42,8 @@ class DrawerHeader extends StatelessWidget {
     final double statusBarHeight = MediaQuery.of(context).padding.top;
     return new Container(
       height: statusBarHeight + _kDrawerHeaderHeight,
+      margin: const EdgeInsets.only(bottom: 7.0), // 8 less 1 for the bottom border.
       decoration: new BoxDecoration(
-        // TODO(jackson): This class should usually render the user's
-        // preferred banner image rather than a solid background
-        backgroundColor: Theme.of(context).cardColor,
         border: const Border(
           bottom: const BorderSide(
             color: const Color(0xFFD1D9E1),
@@ -46,16 +51,17 @@ class DrawerHeader extends StatelessWidget {
           )
         )
       ),
-      padding: const EdgeInsets.only(bottom: 7.0),
+      child: new Stack(
-      margin: const EdgeInsets.only(bottom: 8.0),
-      child: new Column(
         children: <Widget>[
-          new Flexible(child: new Container()),
+          background ?? new Container(),
-          new Container(
+          new Positioned(
-            padding: const EdgeInsets.symmetric(horizontal: 16.0),
+            top: statusBarHeight + 16.0,
+            left: 16.0,
+            right: 16.0,
+            bottom: 8.0,
             child: new DefaultTextStyle(
               style: Theme.of(context).textTheme.body2,
-              child: child
+              child: content
             )
           )
         ]