A Flutter widget which synchronize a ScrollView and a custom tab view.
The main idea is to create a custom tab view synchronizing with inner ScrollView. The scroll activity will trigger custom tab view at the top to follow the index of the inner scroll view widget.
exposes Scrollbar and CustomScrollView parameters to VerticalScrollableTabView
Add dependency for package on your pubspec.yaml:
dependencies:
vertical_scrollable_tabview: <latest>
scroll_to_index: <latest>
To use this widget we must first define how our tabs will look like.
you need to implement TabController and AutoScrollController
| Parameter | Definition |
|---|---|
autoScrollController |
Scrollbar's controller and CustomScrollView's controller. |
tabController |
Trailing widget for a tab, typically an TabController. |
listItemData |
It must be List< dynamic > Type |
eachItemChild |
A item child that in ListView.Builder, First parameter is an object that you put in listItemData, Second parameter is the index in ListView.Builder |
verticalScrollPosition |
A Item Position |
TabBar |
A TabBar, That required in slivers[SliverAppbar(bottom:TabBar())] |
| Parameter | Definition ( parameter from Scrollbar ) |
|---|---|
scrollbarThumbVisibility |
thumbVisibility |
scrollbarTrackVisibility |
trackVisibility |
scrollbarThickness |
thickness |
scrollbarRadius |
radius |
scrollbarNotificationPredicate |
notificationPredicate |
scrollInteractive |
interactive |
scrollbarOrientation |
scrollbarOrientation |
| Parameter | Definition ( parameter from CustomScrollView ) |
|---|---|
scrollDirection |
scrollDirection |
reverse |
reverse |
primary |
primary |
physics |
physics |
scrollBehavior |
scrollBehavior |
shrinkWrap |
shrinkWrap |
center |
center |
anchor |
anchor |
cacheExtent |
cacheExtent |
slivers |
slivers |
semanticChildCount |
semanticChildCount |
dragStartBehavior |
dragStartBehavior |
keyboardDismissBehavior |
keyboardDismissBehavior |
restorationId |
restorationId |
clipBehavior |
clipBehavior |
** IMPORTANT** DON'T FORGET IMPLEMENT TabController and AutoScrollController
import 'package:vertical_scrollable_tabview/vertical_scrollable_tabview.dart';
VerticalScrollableTabView(
autoScrollController: autoScrollController, <- Required AutoScrollController
tabController: tabController, <- Required TabBarController
listItemData: data,<- Required List<dynamic>
verticalScrollPosition: VerticalScrollPosition.begin,
eachItemChild: (object, index) =>
CategorySection(category: object as Category), <- Object and index
slivers: [ <- Required slivers
SliverAppBar( <- Required SliverAppBar
bottom: TabBar(
isScrollable: true,
controller: tabController,
indicatorPadding: const EdgeInsets.symmetric(horizontal: 16.0),
indicatorColor: Colors.cyan,
labelColor: Colors.cyan,
unselectedLabelColor: Colors.white,
indicatorWeight: 3.0,
tabs: data.map((e) {
return Tab(text: e.title);
}).toList(),
onTap: (index) {
VerticalScrollableTabBarStatus.setIndex(index); <- Required
},
),
),
],
),
for full example, please see this Demo.
Contributions are accepted via pull requests. For more information about how to contribute to this package, please check the contribution guide.
This project is licensed under the MIT license, additional knowledge about the license can be found here.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent