Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
vertical_scrollable_tabview cover
Package detailsv0.1.2

vertical_scrollable_tabview

A Flutter widget which syncronize a ScrollView and a custom tab view.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
1.2K
Likes
105
Pub points
150

Install package

flutter pub add vertical_scrollable_tabview

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter widget that synchronizes a vertical ScrollView with a custom tab view, ensuring smooth scrolling and tab navigation in tandem. It enables users to navigate through content by swiping vertically while the corresponding tab indicator updates dynamically. Ideal for content-heavy interfaces where tab-based organization and continuous scrolling are required. The package supports all major platforms including Android, iOS, Web, macOS, Windows, and Linux, making it versatile for cross-platform applications.

Use cases

  • Content-heavy dashboards
  • Vertical navigation with tabs
  • Scrolling lists with tab indicators
  • Mobile and web app layouts
  • Dynamic tab synchronization

Key features

  • Synchronized scroll and tab selection
  • Customizable tab appearance
  • Cross-platform compatibility
  • Smooth scrolling experience
  • Supports multiple platforms

Suitable for

  • Developers building tabbed vertical interfaces
  • Apps requiring synchronized scrolling and tab navigation
  • Cross-platform Flutter projects
  • UIs with extensive vertical content

Considerations

  • May require additional styling for custom designs
  • Performance impact with very large datasets
  • Limited to vertical scrolling only
  • Requires careful handling of scroll position state
  • Not suitable for horizontal tab layouts

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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.

Categories

Tab

Dependencies

Dependency list 2 items

Source repository

Projects using this package

No data available yet.