Paketdetailsv0.1.2

vertical_scrollable_tabview

Ein Flutter-Widget, das einen ScrollView und eine benutzerdefinierte Tab-Ansicht synchronisiert.

AndroidiOSWebmacOSWindowsLinux

pub.dev API-Dokumentation Quellcode

30-Tage-Downloads: 1210
Likes: 105
Pub-Punkte: 150

Paket installieren

flutter pub add vertical_scrollable_tabview

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein Flutter-Widget, das eine vertikale ScrollView mit einer benutzerdefinierten Tab-Ansicht synchronisiert und eine reibungslose Scroll- und Tab-Navigation gewährleistet. Es ermöglicht Benutzern die Navigation durch Inhalte durch Vertikal-Schieben, während der entsprechende Tab-Indikator dynamisch aktualisiert wird. Ideal für content-intensive Interfaces, bei denen eine tabbasierte Organisation und kontinuierliches Scrollen erforderlich sind. Das Paket unterstützt alle wichtigen Plattformen, einschließlich Android, iOS, Web, macOS, Windows und Linux, was es vielseitig für plattformübergreifende Anwendungen macht.

Anwendungsfälle

inhaltsreiche Dashboards
Vertikale Navigation mit Tabs
Scrollbare Listen mit Tab-Indikatoren
Mobile- und Web-App-Layouts
Dynamische Registerkarten-Synchronisierung

Hauptmerkmale

Synchronisierte Scroll- und Registerkartenauswahl
Anpassbare Tab-Aussehen
Plattformübergreifende Kompatibilität
Glatte Scroll-Erfahrung
Unterstützt mehrere Plattformen

Geeignet für

Entwickler, die tabbasierte vertikale Schnittstellen erstellen
Apps, die synchronisiertes Scrollen und Tab-Navigation erfordern
Plattformübergreifende Flutter-Projekte
UIs mit umfangreichem vertikalem Inhalt

Hinweise

Kann zusätzliche Stilisierung für individuelle Designs erfordern
Leistungsbeeinträchtigung bei sehr großen Datensätzen
Nur begrenzt auf vertikales Scrollen
Erfordert sorgfältige Behandlung des Scrollpositionszustands
Nicht geeignet für horizontale Tabulatorlayouts

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

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.