패키지 상세v0.1.2

vertical_scrollable_tabview

ScrollView와 사용자 정의 탭 뷰를 동기화하는 Flutter 위젯입니다.

AndroidiOSWebmacOSWindowsLinux

pub.dev API 문서 소스 코드

30일 다운로드: 1.2천
좋아요: 105
Pub 점수: 150

패키지 설치

flutter pub add vertical_scrollable_tabview

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

수직 스크롤 뷰와 사용자 정의 탭 뷰를 동기화하는 플러터 위젯으로, 부드러운 스크롤링과 탭 탐색을 함께 보장합니다. 사용자는 콘텐츠를 수직으로 스와이프하면서 해당 탭 인디케이터가 동적으로 업데이트되도록 합니다. 탭 기반 조직과 지속적인 스크롤링이 필요한 콘텐츠 중심 인터페이스에 적합합니다. 이 패키지는 Android, iOS, Web, macOS, Windows, Linux 등 모든 주요 플랫폼을 지원하여 크로스플랫폼 애플리케이션에 유연하게 활용할 수 있습니다.

사용 사례

콘텐츠 중심 대시보드
탭이 있는 수직 탐색
탭 표시기와 함께 스크롤 가능한 목록
모바일 및 웹 앱 레이아웃
다이나믹 탭 동기화

주요 기능

동기화된 스크롤 및 탭 선택
사용자 정의 가능한 탭 표시
크로스 플랫폼 호환성
부드러운 스크롤 경험
다수의 플랫폼을 지원합니다

적합한 대상

탭 기반 수직 인터페이스를 구축하는 개발자
동기화된 스크롤링과 탭 탐색이 필요한 앱
크로스 플랫폼 Flutter 프로젝트
광범위한 수직 콘텐츠를 가진 UI

고려 사항

맞춤형 디자인을 위해 추가 스타일링이 필요할 수 있습니다
매우 큰 데이터 세트와 함께 사용할 때의 성능 영향
수직 스크롤링만 가능
스크롤 위치 상태를 신중하게 다뤄야 합니다
수평 탭 레이아웃에 적합하지 않습니다

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

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.