diff --git a/dev/manual_tests/card_collection.dart b/dev/manual_tests/card_collection.dart index 3541673098..099f9e428f 100644 --- a/dev/manual_tests/card_collection.dart +++ b/dev/manual_tests/card_collection.dart @@ -126,7 +126,7 @@ class CardCollectionState extends State { child: new IconTheme( data: const IconThemeData(color: Colors.black), child: new Block(children: [ - 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), diff --git a/dev/manual_tests/pageable_list.dart b/dev/manual_tests/pageable_list.dart index 3e257805b6..a489dc61e2 100644 --- a/dev/manual_tests/pageable_list.dart +++ b/dev/manual_tests/pageable_list.dart @@ -85,7 +85,7 @@ class PageableListAppState extends State { Widget _buildDrawer() { return new Drawer( child: new Block(children: [ - 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, diff --git a/examples/flutter_gallery/lib/gallery/drawer.dart b/examples/flutter_gallery/lib/gallery/drawer.dart index a5acc12035..0362a08a9a 100644 --- a/examples/flutter_gallery/lib/gallery/drawer.dart +++ b/examples/flutter_gallery/lib/gallery/drawer.dart @@ -32,7 +32,9 @@ class GalleryDrawer extends StatelessWidget { return new Drawer( child: new Block( children: [ - 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); }, diff --git a/examples/stocks/lib/stock_home.dart b/examples/stocks/lib/stock_home.dart index 8992b0535f..416a742f78 100644 --- a/examples/stocks/lib/stock_home.dart +++ b/examples/stocks/lib/stock_home.dart @@ -124,7 +124,7 @@ class StockHomeState extends State { Widget _buildDrawer(BuildContext context) { return new Drawer( child: new Block(children: [ - new DrawerHeader(child: new Text('Stocks')), + new DrawerHeader(content: new Center(child: new Text('Stocks'))), new DrawerItem( icon: Icons.assessment, selected: true, diff --git a/packages/flutter/lib/src/material/drawer_header.dart b/packages/flutter/lib/src/material/drawer_header.dart index b5cc4cee72..dba108736e 100644 --- a/packages/flutter/lib/src/material/drawer_header.dart +++ b/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. - final Widget child; + /// A widget that extends behind the system status bar and is stacked + /// 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), - margin: const EdgeInsets.only(bottom: 8.0), - child: new Column( + child: new Stack( children: [ - new Flexible(child: new Container()), - new Container( - padding: const EdgeInsets.symmetric(horizontal: 16.0), + background ?? new Container(), + new Positioned( + 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 ) ) ]