Detalhes do pacotev0.1.2

vertical_scrollable_tabview

Um widget Flutter que sincroniza um ScrollView e uma visualização de guias personalizada.

AndroidiOSWebmacOSWindowsLinux

pub.dev Documentação da API Código-fonte

Downloads em 30 dias: 1,2 mil
Curtidas: 105
Pontos Pub: 150

Instalar pacote

flutter pub add vertical_scrollable_tabview

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Um widget Flutter que sincroniza uma ScrollView vertical com uma visualização de guias personalizada, garantindo rolagem suave e navegação por guias em conjunto. Permite aos usuários navegar pelo conteúdo deslizando verticalmente enquanto o indicador de guia correspondente é atualizado dinamicamente. Ideal para interfaces com grande quantidade de conteúdo onde a organização por guias e rolagem contínua são necessárias. O pacote oferece suporte a todas as principais plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux, tornando-o versátil para aplicações multiplataforma.

Casos de uso

painéis de conteúdo intenso
Navegação vertical com guias
Listas com indicadores de guia
Layouts de aplicativos móveis e web
Sincronização dinâmica de guias

Principais recursos

Rolagem e seleção de guia sincronizadas
Aparência de guia personalizável
Compatibilidade multiplataforma
Experiência de rolagem suave
Suporta múltiplas plataformas

Indicado para

Desenvolvedores construindo interfaces verticais com abas
Aplicativos que exigem rolagem sincronizada e navegação por guias
Projetos Flutter multiplataforma
UIs com conteúdo vertical extenso

Considerações

Pode exigir estilos adicionais para designs personalizados
Impacto no desempenho com conjuntos de dados muito grandes
Limitado à rolagem vertical apenas
Requer manipulação cuidadosa do estado da posição de rolagem
Não adequado para layouts de tabulação horizontal

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

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.