Merge pull request #1504 from abarth/tab_shadow

ToolBar with a TabBar shouldn't have a shadow

examples/stocks/lib/stock_home.dart

@@ -126,22 +126,23 @@ class StockHomeState extends State<StockHome> {
 
   Widget buildToolBar() {
     return new ToolBar(
-        left: new IconButton(
-          icon: "navigation/menu",
-          onPressed: _showDrawer
+      level: 0,
+      left: new IconButton(
+        icon: "navigation/menu",
+        onPressed: _showDrawer
+      ),
+      center: new Text('Stocks'),
+      right: [
+        new IconButton(
+          icon: "action/search",
+          onPressed: _handleSearchBegin
         ),
-        center: new Text('Stocks'),
-        right: [
-          new IconButton(
-            icon: "action/search",
-            onPressed: _handleSearchBegin
-          ),
-          new IconButton(
-            icon: "navigation/more_vert",
-            onPressed: _handleMenuShow
-          )
-        ]
-      );
+        new IconButton(
+          icon: "navigation/more_vert",
+          onPressed: _handleMenuShow
+        )
+      ]
+    );
   }
 
   int selectedTabIndex = 0;

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

@@ -17,7 +17,8 @@ const double kToolBarHeight = 56.0;
 
 const double kMaterialDrawerHeight = 140.0;
 const double kScrollbarSize = 10.0;
-const double kScrollbarFadeDuration = 250.0;
-const double kScrollbarFadeDelay = 300.0;
+const Duration kScrollbarFadeDuration = const Duration(milliseconds: 250);
+const Duration kScrollbarFadeDelay = const Duration(milliseconds: 300);
 const double kFadingEdgeLength = 12.0;
-const double kPressedStateDuration = 64.0;
+const double kPressedStateDuration = 64.0; // units?
+const Duration kThemeChangeDuration = const Duration(milliseconds: 200);

sky/packages/sky/lib/src/widgets/material.dart

@@ -67,7 +67,7 @@ class Material extends StatelessComponent {
       style: Theme.of(context).text.body1,
       child: new AnimatedContainer(
         curve: ease,
-        duration: const Duration(milliseconds: 200),
+        duration: kThemeChangeDuration,
         decoration: new BoxDecoration(
           backgroundColor: _getBackgroundColor(context),
           borderRadius: _kEdges[type],

sky/packages/sky/lib/src/widgets/tabs.dart

@@ -11,6 +11,7 @@ import 'package:sky/gestures.dart';
 import 'package:sky/material.dart';
 import 'package:sky/painting.dart';
 import 'package:sky/rendering.dart';
+import 'package:sky/src/widgets/animated_container.dart';
 import 'package:sky/src/widgets/basic.dart';
 import 'package:sky/src/widgets/framework.dart';
 import 'package:sky/src/widgets/icon.dart';
@@ -51,15 +52,6 @@ class _RenderTabBar extends RenderBox with
     }
   }
 
-  Color _backgroundColor;
-  Color get backgroundColor => _backgroundColor;
-  void set backgroundColor(Color value) {
-    if (_backgroundColor != value) {
-      _backgroundColor = value;
-      markNeedsPaint();
-    }
-  }
-
   Color _indicatorColor;
   Color get indicatorColor => _indicatorColor;
   void set indicatorColor(Color value) {
@@ -240,13 +232,6 @@ class _RenderTabBar extends RenderBox with
   }
 
   void paint(PaintingContext context, Offset offset) {
-    if (backgroundColor != null) {
-      double width = layoutWidths != null
-        ? layoutWidths.reduce((sum, width) => sum + width)
-        : size.width;
-      Rect rect = offset & new Size(width, size.height);
-      context.canvas.drawRect(rect, new Paint()..color = backgroundColor);
-    }
     int index = 0;
     RenderBox child = firstChild;
     while (child != null) {
@@ -264,7 +249,6 @@ class _TabBarWrapper extends MultiChildRenderObjectWidget {
     Key key,
     List<Widget> children,
     this.selectedIndex,
-    this.backgroundColor,
     this.indicatorColor,
     this.indicatorRect,
     this.textAndIcons,
@@ -273,7 +257,6 @@ class _TabBarWrapper extends MultiChildRenderObjectWidget {
   }) : super(key: key, children: children);
 
   final int selectedIndex;
-  final Color backgroundColor;
   final Color indicatorColor;
   final Rect indicatorRect;
   final bool textAndIcons;
@@ -288,7 +271,6 @@ class _TabBarWrapper extends MultiChildRenderObjectWidget {
 
   void updateRenderObject(_RenderTabBar renderObject, _TabBarWrapper oldWidget) {
     renderObject.selectedIndex = selectedIndex;
-    renderObject.backgroundColor = backgroundColor;
     renderObject.indicatorColor = indicatorColor;
     renderObject.indicatorRect = indicatorRect;
     renderObject.textAndIcons = textAndIcons;
@@ -537,7 +519,7 @@ class _TabBarState extends ScrollableState<TabBar> {
         textAndIcons = true;
     }
 
-    Widget tabBar = new IconTheme(
+    Widget content = new IconTheme(
       data: new IconThemeData(color: iconThemeColor),
       child: new DefaultTextStyle(
         style: textStyle,
@@ -548,7 +530,6 @@ class _TabBarState extends ScrollableState<TabBar> {
             return new _TabBarWrapper(
               children: tabs,
               selectedIndex: config.selectedIndex,
-              backgroundColor: backgroundColor,
               indicatorColor: indicatorColor,
               indicatorRect: _indicatorRect.value,
               textAndIcons: textAndIcons,
@@ -560,16 +541,23 @@ class _TabBarState extends ScrollableState<TabBar> {
       )
     );
 
-    if (!config.isScrollable)
-      return tabBar;
+    if (config.isScrollable) {
+      content = new SizeObserver(
+        callback: _handleViewportSizeChanged,
+        child: new Viewport(
+          scrollDirection: ScrollDirection.horizontal,
+          scrollOffset: new Offset(scrollOffset, 0.0),
+          child: content
+        )
+      );
+    }
 
-    return new SizeObserver(
-      callback: _handleViewportSizeChanged,
-      child: new Viewport(
-        scrollDirection: ScrollDirection.horizontal,
-        scrollOffset: new Offset(scrollOffset, 0.0),
-        child: tabBar
-      )
+    return new AnimatedContainer(
+      decoration: new BoxDecoration(
+        backgroundColor: backgroundColor
+      ),
+      duration: kThemeChangeDuration,
+      child: content
     );
   }
 }
@@ -601,18 +589,13 @@ class TabNavigator extends StatelessComponent {
   final TabSelectedIndexChanged onChanged;
   final bool isScrollable;
 
-  void _handleSelectedIndexChanged(int tabIndex) {
-    if (onChanged != null)
-      onChanged(tabIndex);
-  }
-
   Widget build(BuildContext context) {
     assert(views != null && views.isNotEmpty);
     assert(selectedIndex >= 0 && selectedIndex < views.length);
     return new Column([
       new TabBar(
         labels: views.map((view) => view.label),
-        onChanged: _handleSelectedIndexChanged,
+        onChanged: onChanged,
         selectedIndex: selectedIndex,
         isScrollable: isScrollable
       ),

sky/packages/sky/lib/src/widgets/tool_bar.dart

@@ -4,35 +4,36 @@
 
 import 'package:sky/material.dart';
 import 'package:sky/painting.dart';
+import 'package:sky/src/widgets/animated_container.dart';
 import 'package:sky/src/widgets/basic.dart';
 import 'package:sky/src/widgets/framework.dart';
 import 'package:sky/src/widgets/icon.dart';
 import 'package:sky/src/widgets/theme.dart';
-import 'package:sky/src/rendering/flex.dart';
 
 class ToolBar extends StatelessComponent {
-
   ToolBar({
     Key key,
     this.left,
     this.center,
     this.right,
+    this.level: 2,
     this.backgroundColor
   }) : super(key: key);
 
   final Widget left;
   final Widget center;
   final List<Widget> right;
+  final int level;
   final Color backgroundColor;
 
   Widget build(BuildContext context) {
-    Color toolbarColor = backgroundColor;
+    Color color = backgroundColor;
     IconThemeData iconThemeData;
     TextStyle centerStyle = Typography.white.title;
     TextStyle sideStyle = Typography.white.body1;
-    if (toolbarColor == null) {
+    if (color == null) {
       ThemeData themeData = Theme.of(context);
-      toolbarColor = themeData.primaryColor;
+      color = themeData.primaryColor;
       if (themeData.primaryColorBrightness == ThemeBrightness.light) {
         centerStyle = Typography.black.title;
         sideStyle = Typography.black.body2;
@@ -44,11 +45,9 @@ class ToolBar extends StatelessComponent {
 
     List<Widget> children = new List<Widget>();
 
-    // left children
     if (left != null)
       children.add(left);
 
-    // center children (left-aligned, but takes all remaining space)
     children.add(
       new Flexible(
         child: new Padding(
@@ -58,11 +57,16 @@ class ToolBar extends StatelessComponent {
       )
     );
 
-    // right children
     if (right != null)
       children.addAll(right);
 
-    Widget content = new Container(
+    Widget content = new AnimatedContainer(
+      duration: kThemeChangeDuration,
+      padding: new EdgeDims.symmetric(horizontal: 8.0),
+      decoration: new BoxDecoration(
+        backgroundColor: color,
+        boxShadow: level == 0 ? null : shadows[2]
+      ),
       child: new DefaultTextStyle(
         style: sideStyle,
         child: new Column([
@@ -73,11 +77,6 @@ class ToolBar extends StatelessComponent {
           ],
           justifyContent: FlexJustifyContent.end
         )
-      ),
-      padding: new EdgeDims.symmetric(horizontal: 8.0),
-      decoration: new BoxDecoration(
-        backgroundColor: toolbarColor,
-        boxShadow: shadows[2]
       )
     );