ToolBar with a TabBar shouldn't have a shadow This patch makes the level of the ToolBar configurable. I've also cleaned up the Tab code slightly. For some reason, there's still a hairline between the ToolBar and the TabBar. We might need to rethink how we draw the background a bit here. Fixes #1454
diff --git a/examples/stocks/lib/stock_home.dart b/examples/stocks/lib/stock_home.dart index f793887..9c914b7 100644 --- a/examples/stocks/lib/stock_home.dart +++ b/examples/stocks/lib/stock_home.dart
@@ -126,22 +126,23 @@ 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;
diff --git a/packages/flutter/lib/src/material/constants.dart b/packages/flutter/lib/src/material/constants.dart index b106845..f33eb1a 100644 --- a/packages/flutter/lib/src/material/constants.dart +++ b/packages/flutter/lib/src/material/constants.dart
@@ -17,7 +17,8 @@ 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);
diff --git a/packages/flutter/lib/src/widgets/material.dart b/packages/flutter/lib/src/widgets/material.dart index c14b29f..138994c 100644 --- a/packages/flutter/lib/src/widgets/material.dart +++ b/packages/flutter/lib/src/widgets/material.dart
@@ -67,7 +67,7 @@ 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],
diff --git a/packages/flutter/lib/src/widgets/tabs.dart b/packages/flutter/lib/src/widgets/tabs.dart index e5dc0f7..89367d9 100644 --- a/packages/flutter/lib/src/widgets/tabs.dart +++ b/packages/flutter/lib/src/widgets/tabs.dart
@@ -11,6 +11,7 @@ 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 @@ } } - 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 @@ } 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 @@ Key key, List<Widget> children, this.selectedIndex, - this.backgroundColor, this.indicatorColor, this.indicatorRect, this.textAndIcons, @@ -273,7 +257,6 @@ }) : super(key: key, children: children); final int selectedIndex; - final Color backgroundColor; final Color indicatorColor; final Rect indicatorRect; final bool textAndIcons; @@ -288,7 +271,6 @@ 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 @@ textAndIcons = true; } - Widget tabBar = new IconTheme( + Widget content = new IconTheme( data: new IconThemeData(color: iconThemeColor), child: new DefaultTextStyle( style: textStyle, @@ -548,7 +530,6 @@ return new _TabBarWrapper( children: tabs, selectedIndex: config.selectedIndex, - backgroundColor: backgroundColor, indicatorColor: indicatorColor, indicatorRect: _indicatorRect.value, textAndIcons: textAndIcons, @@ -560,16 +541,23 @@ ) ); - 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 @@ 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 ),
diff --git a/packages/flutter/lib/src/widgets/tool_bar.dart b/packages/flutter/lib/src/widgets/tool_bar.dart index 543531a..b92c938 100644 --- a/packages/flutter/lib/src/widgets/tool_bar.dart +++ b/packages/flutter/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 @@ 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 @@ ) ); - // 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 @@ ], justifyContent: FlexJustifyContent.end ) - ), - padding: new EdgeDims.symmetric(horizontal: 8.0), - decoration: new BoxDecoration( - backgroundColor: toolbarColor, - boxShadow: shadows[2] ) );