Extended height toolbar

examples/widgets/card_collection.dart

@@ -38,7 +38,7 @@ class CardCollectionState extends State<CardCollection> {
   List<CardModel> _cardModels;
   DismissDirection _dismissDirection = DismissDirection.horizontal;
   TextStyle _textStyle = new TextStyle(textAlign: TextAlign.center);
-  bool _editable = true;
+  bool _editable = false;
   bool _snapToCenter = false;
   bool _fixedSizeCards = false;
   bool _sunshine = false;
@@ -271,7 +271,14 @@ class CardCollectionState extends State<CardCollection> {
       center: new Text('Swipe Away'),
       right: <Widget>[
         new Text(_dismissDirectionText(_dismissDirection))
-      ]
+      ],
+      bottom: new Padding(
+        padding: const EdgeDims.only(left: 32.0),
+        child: new Align(
+          alignment: const FractionalOffset(0.0, 0.5),
+          child: new Text("Remaining items ${_cardModels.length}")
+        )
+      )
     );
   }
 

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

@@ -14,6 +14,7 @@ const double kStatusBarHeight = 50.0;
 // Mobile Portrait: 56dp
 // Tablet/Desktop: 64dp
 const double kToolBarHeight = 56.0;
+const double kExtendedToolBarHeight = 128.0;
 const double kSnackBarHeight = 52.0;
 
 // https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-keylines-spacing

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

@@ -4,92 +4,87 @@
 
 import 'dart:ui' as ui;
 
+import 'package:flutter/rendering.dart';
 import 'package:flutter/widgets.dart';
 
 import 'constants.dart';
 import 'material.dart';
 
+const int _kToolBarIndex = 1;
+const int _kBodyIndex = 0;
+
+// This layout has the same effect as putting the toolbar and body in a column
+// and making the body flexible. What's different is that in this case the
+// toolbar appears -after- the body in the stacking order, so the toolbar's
+// shadow is drawn on top of the body.
+class _ToolBarAndBodyLayout extends MultiChildLayoutDelegate {
+  void performLayout(Size size, BoxConstraints constraints, int childCount) {
+    assert(childCount == 2);
+    final BoxConstraints toolBarConstraints = constraints.loosen().tightenWidth(size.width);
+    final Size toolBarSize = layoutChild(_kToolBarIndex, toolBarConstraints);
+    final double topPadding = ui.window.padding.top;
+    final double bodyHeight = size.height - toolBarSize.height - topPadding;
+    final BoxConstraints bodyConstraints = toolBarConstraints.tightenHeight(bodyHeight);
+    layoutChild(_kBodyIndex, bodyConstraints);
+    positionChild(_kToolBarIndex, new Point(0.0, topPadding));
+    positionChild(_kBodyIndex, new Point(0.0, topPadding + toolBarSize.height));
+  }
+}
+
 class Scaffold extends StatelessComponent {
+  final _ToolBarAndBodyLayout _toolBarAndBodyLayout = new _ToolBarAndBodyLayout();
+
   Scaffold({
     Key key,
     this.body,
-    this.statusBar,
     this.toolBar,
     this.snackBar,
     this.floatingActionButton
   }) : super(key: key);
 
   final Widget body;
-  final Widget statusBar;
   final Widget toolBar;
   final Widget snackBar;
   final Widget floatingActionButton;
 
   Widget build(BuildContext context) {
-    double toolBarHeight = 0.0;
-    if (toolBar != null)
-      toolBarHeight = kToolBarHeight + ui.window.padding.top;
-
-    double statusBarHeight = 0.0;
-    if (statusBar != null)
-      statusBarHeight = kStatusBarHeight;
-
-    List<Widget> children = <Widget>[];
-
-    if (body != null) {
-      children.add(new Positioned(
-        top: toolBarHeight, right: 0.0, bottom: statusBarHeight, left: 0.0,
-        child: new Material(
-          child: body
-        )
+    final Widget materialBody = body != null ? new Material(child: body) : null;
+    Widget toolBarAndBody;
+    if (toolBar != null && materialBody != null)
+      toolBarAndBody = new CustomMultiChildLayout(<Widget>[materialBody, toolBar],
+        delegate: _toolBarAndBodyLayout
+      );
+    else
+      toolBarAndBody = toolBar ?? materialBody;
+
+    final List<Widget> bottomColumnChildren = <Widget>[];
+
+    if (floatingActionButton != null)
+      bottomColumnChildren.add(new Padding(
+        // TODO(eseidel): These change based on device size!
+        padding: const EdgeDims.only(right: 16.0, bottom: 16.0),
+        child: floatingActionButton
       ));
-    }
-
-    if (statusBar != null) {
-      children.add(new Positioned(
-        right: 0.0, bottom: 0.0, left: 0.0,
-        child: new SizedBox(
-          height: statusBarHeight,
-          child: statusBar
-        )
-      ));
-    }
 
-    if (toolBar != null) {
-      children.add(new Positioned(
-        top: 0.0, right: 0.0, left: 0.0,
-        child: new SizedBox(
-          height: toolBarHeight,
-          child: toolBar
-        )
+    // TODO(jackson): On tablet/desktop, minWidth = 288, maxWidth = 568
+    if (snackBar != null) {
+      bottomColumnChildren.add(new ConstrainedBox(
+        constraints: const BoxConstraints(maxHeight: kSnackBarHeight),
+        child: snackBar
       ));
     }
 
-    if (snackBar != null || floatingActionButton != null) {
-      List<Widget> floatingChildren = <Widget>[];
-
-      if (floatingActionButton != null) {
-        floatingChildren.add(new Padding(
-          // TODO(eseidel): These change based on device size!
-          padding: const EdgeDims.only(right: 16.0, bottom: 16.0),
-          child: floatingActionButton
-        ));
-      }
-
-      // TODO(jackson): On tablet/desktop, minWidth = 288, maxWidth = 568
-      if (snackBar != null) {
-        floatingChildren.add(new ConstrainedBox(
-          constraints: const BoxConstraints(maxHeight: kSnackBarHeight),
-          child: snackBar
-        ));
-      }
+    final List<Widget> stackChildren = <Widget>[toolBarAndBody];
 
-      children.add(new Positioned(
-        right: 0.0, bottom: statusBarHeight, left: 0.0,
-        child: new Column(floatingChildren, alignItems: FlexAlignItems.end)
+    if (bottomColumnChildren.length > 0) {
+      stackChildren.add(new Positioned(
+        right: 0.0,
+        left: 0.0,
+        bottom: 0.0,
+        child: new Column(bottomColumnChildren, alignItems: FlexAlignItems.end)
       ));
     }
 
-    return new Stack(children);
+    return new Stack(stackChildren);
   }
 }

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

@@ -17,6 +17,7 @@ class ToolBar extends StatelessComponent {
     this.left,
     this.center,
     this.right,
+    this.bottom,
     this.level: 2,
     this.backgroundColor,
     this.textTheme
@@ -25,6 +26,7 @@ class ToolBar extends StatelessComponent {
   final Widget left;
   final Widget center;
   final List<Widget> right;
+  final Widget bottom;
   final int level;
   final Color backgroundColor;
   final TextTheme textTheme;
@@ -62,6 +64,16 @@ class ToolBar extends StatelessComponent {
     if (right != null)
       children.addAll(right);
 
+    final List<Widget> columnChildren = <Widget>[
+      new Container(height: kToolBarHeight, child: new Row(children))
+    ];
+
+    if (bottom != null)
+      columnChildren.add(new DefaultTextStyle(
+        style: centerStyle,
+        child: new Container(height: kExtendedToolBarHeight - kToolBarHeight, child: bottom)
+      ));
+
     Widget content = new AnimatedContainer(
       duration: kThemeChangeDuration,
       padding: new EdgeDims.symmetric(horizontal: 8.0),
@@ -71,14 +83,7 @@ class ToolBar extends StatelessComponent {
       ),
       child: new DefaultTextStyle(
         style: sideStyle,
-        child: new Column(<Widget>[
-            new Container(
-              child: new Row(children),
-              height: kToolBarHeight
-            ),
-          ],
-          justifyContent: FlexJustifyContent.end
-        )
+        child: new IntrinsicHeight(child: new Column(columnChildren))
       )
     );