vertical_scrollable_tabview

Description:

vertical scrollable tabview

vertical_scrollable_tabview #
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

Installation #
Add dependency for package on your pubspec.yaml:
dependencies:
vertical_scrollable_tabview: <latest>
scroll_to_index: <latest>
copied to clipboard
Usage #
To use this widget we must first define how our tabs will look like.
VerticalScrollableTabView #
you need to implement TabController and AutoScrollController
Import Parameter 👇



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())]



Copy parameters from Scrollbar



Parameter
Definition ( parameter from Scrollbar )




scrollbarThumbVisibility
thumbVisibility


scrollbarTrackVisibility
trackVisibility


scrollbarThickness
thickness


scrollbarRadius
radius


scrollbarNotificationPredicate
notificationPredicate


scrollInteractive
interactive


scrollbarOrientation
scrollbarOrientation



Copy parameters from CustomScrollView



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



Example #
** 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
},
),
),
],
),
copied to clipboard
for full example, please see this Demo.
Contribution #
Contributions are accepted via pull requests. For more information about how to contribute to this package, please check the contribution guide.
License #
This project is licensed under the MIT license, additional knowledge about the license can be found here.