wayne900204/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

Demo

Installation

Add dependency for package on your pubspec.yaml:

dependencies:
    vertical_scrollable_tabview: <latest>
    scroll_to_index: <latest>

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 :point_down:

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
          },
        ),
      ),
    ],
  ),

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.