From 9651db22df5d29b76b15b69d2f9e9a0c2eb0ce68 Mon Sep 17 00:00:00 2001 From: Hans Muller Date: Thu, 10 Dec 2015 11:28:28 -0800 Subject: [PATCH 1/3] TabBarView is-a PageableList, doesn't need itemExtent --- packages/flutter/lib/src/material/tabs.dart | 28 ++++++++------------- 1 file changed, 11 insertions(+), 17 deletions(-) diff --git a/packages/flutter/lib/src/material/tabs.dart b/packages/flutter/lib/src/material/tabs.dart index 46344c3455..4fd847235c 100644 --- a/packages/flutter/lib/src/material/tabs.dart +++ b/packages/flutter/lib/src/material/tabs.dart @@ -28,7 +28,7 @@ const double _kMinTabWidth = 72.0; const double _kMaxTabWidth = 264.0; const EdgeDims _kTabLabelPadding = const EdgeDims.symmetric(horizontal: 12.0); const double _kTabBarScrollDrag = 0.025; -const Duration _kTabBarScroll = const Duration(milliseconds: 200); +const Duration _kTabBarScroll = const Duration(milliseconds: 800); class _TabBarParentData extends ContainerBoxParentDataMixin { } @@ -612,19 +612,17 @@ class _TabBarState extends ScrollableState { } } -class TabBarView extends ScrollableList { +class TabBarView extends PageableList { TabBarView({ Key key, this.selection, List items, - ItemBuilder itemBuilder, - double itemExtent + ItemBuilder itemBuilder }) : super( key: key, scrollDirection: ScrollDirection.horizontal, items: items, itemBuilder: itemBuilder, - itemExtent: itemExtent, itemsWrap: false ) { assert(selection != null); @@ -640,9 +638,11 @@ class _NotScrollable extends BoundedBehavior { bool get isScrollable => false; } -class _TabBarViewState extends ScrollableListState> { +class _TabBarViewState extends PageableListState> { - ScrollBehavior createScrollBehavior() => new _NotScrollable(); + final _NotScrollable _notScrollable = new _NotScrollable(); + ScrollBehavior createScrollBehavior() => _notScrollable; + ExtentScrollBehavior get scrollBehavior => _notScrollable; List _itemIndices = [0, 1]; AnimationDirection _scrollDirection = AnimationDirection.forward; @@ -655,10 +655,10 @@ class _TabBarViewState extends ScrollableListState> { scrollTo(0.0); } else if (selectedIndex == config.items.length - 1) { _itemIndices = [selectedIndex - 1, selectedIndex]; - scrollTo(config.itemExtent); + scrollTo(1.0); } else { _itemIndices = [selectedIndex - 1, selectedIndex, selectedIndex + 1]; - scrollTo(config.itemExtent); + scrollTo(1.0); } } @@ -680,12 +680,6 @@ class _TabBarViewState extends ScrollableListState> { super.dispose(); } - void didUpdateConfig(TabBarView oldConfig) { - super.didUpdateConfig(oldConfig); - if (oldConfig.itemExtent != config.itemExtent && !_performance.isAnimating) - _initItemIndicesAndScrollPosition(); - } - void _handleStatusChange(PerformanceStatus status) { final int selectedIndex = config.selection.index; final int previousSelectedIndex = config.selection.previousIndex; @@ -705,9 +699,9 @@ class _TabBarViewState extends ScrollableListState> { void _handleProgressChange() { if (_scrollDirection == AnimationDirection.forward) - scrollTo(config.itemExtent * _performance.progress); + scrollTo(_performance.progress); else - scrollTo(config.itemExtent * (1.0 - _performance.progress)); + scrollTo(1.0 - _performance.progress); } int get itemCount => _itemIndices.length; From 55f6593017107094dfc9983f1ecca6c5bf39b2ff Mon Sep 17 00:00:00 2001 From: Hans Muller Date: Thu, 10 Dec 2015 12:19:35 -0800 Subject: [PATCH 2/3] tabs scroll duration is 300ms --- packages/flutter/lib/src/material/tabs.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/flutter/lib/src/material/tabs.dart b/packages/flutter/lib/src/material/tabs.dart index 4fd847235c..e325853463 100644 --- a/packages/flutter/lib/src/material/tabs.dart +++ b/packages/flutter/lib/src/material/tabs.dart @@ -28,7 +28,7 @@ const double _kMinTabWidth = 72.0; const double _kMaxTabWidth = 264.0; const EdgeDims _kTabLabelPadding = const EdgeDims.symmetric(horizontal: 12.0); const double _kTabBarScrollDrag = 0.025; -const Duration _kTabBarScroll = const Duration(milliseconds: 800); +const Duration _kTabBarScroll = const Duration(milliseconds: 300); class _TabBarParentData extends ContainerBoxParentDataMixin { } From c4f52177cc2c9b7f439303ba54edadae91797f33 Mon Sep 17 00:00:00 2001 From: Hans Muller Date: Thu, 10 Dec 2015 12:25:59 -0800 Subject: [PATCH 3/3] demo updates --- .../material_gallery/lib/demo/tabs_demo.dart | 36 +++++++------------ examples/stocks/lib/stock_home.dart | 35 +++++++----------- 2 files changed, 24 insertions(+), 47 deletions(-) diff --git a/examples/material_gallery/lib/demo/tabs_demo.dart b/examples/material_gallery/lib/demo/tabs_demo.dart index 0f2ae8e36e..ea09f1d092 100644 --- a/examples/material_gallery/lib/demo/tabs_demo.dart +++ b/examples/material_gallery/lib/demo/tabs_demo.dart @@ -22,31 +22,19 @@ class TabsDemo extends StatefulComponent { } class _TabsDemoState extends State { - double _viewWidth = 100.0; - - void _handleSizeChanged(Size newSize) { - setState(() { - _viewWidth = newSize.width; - }); - } - Widget build(_) { - return new SizeObserver( - onSizeChanged: _handleSizeChanged, - child: new TabBarView( - selection: _selection, - items: _iconNames, - itemExtent: _viewWidth, - itemBuilder: (BuildContext context, String iconName, int index) { - return new Container( - key: new ValueKey(iconName), - padding: const EdgeDims.all(12.0), - child: new Card( - child: new Center(child: new Icon(icon: "action/$iconName", size:IconSize.s48)) - ) - ); - } - ) + return new TabBarView( + selection: _selection, + items: _iconNames, + itemBuilder: (BuildContext context, String iconName, int index) { + return new Container( + key: new ValueKey(iconName), + padding: const EdgeDims.all(12.0), + child: new Card( + child: new Center(child: new Icon(icon: "action/$iconName", size:IconSize.s48)) + ) + ); + } ); } } diff --git a/examples/stocks/lib/stock_home.dart b/examples/stocks/lib/stock_home.dart index cc4b3aa698..81fcd26147 100644 --- a/examples/stocks/lib/stock_home.dart +++ b/examples/stocks/lib/stock_home.dart @@ -272,36 +272,25 @@ class StockHomeState extends State { ); } - double _viewWidth = 100.0; - void _handleSizeChanged(Size newSize) { - setState(() { - _viewWidth = newSize.width; - }); - } - Widget build(BuildContext context) { return new Scaffold( key: _scaffoldKey, toolBar: _isSearching ? buildSearchBar() : buildToolBar(), floatingActionButton: buildFloatingActionButton(), drawer: _buildDrawer(context), - body: new SizeObserver( - onSizeChanged: _handleSizeChanged, - child: new TabBarView( - selection: _tabBarSelection, - items: [StockHomeTab.market, StockHomeTab.portfolio], - itemExtent: _viewWidth, - itemBuilder: (BuildContext context, StockHomeTab tab, _) { - switch (tab) { - case StockHomeTab.market: - return _buildStockTab(context, tab, config.symbols); - case StockHomeTab.portfolio: - return _buildStockTab(context, tab, portfolioSymbols); - default: - assert(false); - } + body: new TabBarView( + selection: _tabBarSelection, + items: [StockHomeTab.market, StockHomeTab.portfolio], + itemBuilder: (BuildContext context, StockHomeTab tab, _) { + switch (tab) { + case StockHomeTab.market: + return _buildStockTab(context, tab, config.symbols); + case StockHomeTab.portfolio: + return _buildStockTab(context, tab, portfolioSymbols); + default: + assert(false); } - ) + } ) ); }