[Feature]Support sliver Issue(#5)

CHANGELOG.md

@@ -1,6 +1,12 @@
+## 0.0.5
+
+* Remove support for horizontal scroll direction
+* Change ListView to SliverAppBar
+* Add slivers parameters in CustomScrollView
+
 ## 0.0.4
 
-* Support for Web Application
+* Support for Web Applicationy
 
 ## 0.0.3
 

README.md

@@ -22,31 +22,38 @@ To use this widget we must first define how our tabs will look like.
 | `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 |
-| `scrollDirection`| Your preferred scrollDirection |
+| `TabBar` | A TabBar, That required in slivers[SliverAppbar(bottom:TabBar())] |
 
 ## Example
 
     import 'package:vertical_scrollable_tabview/vertical_scrollable_tabview.dart';
 
-    // Required it
-    TabBar(
-        onTap: (index) {
-            VerticalScrollableTabBarStatus.setIndex(index); <- Required 
-        },
-    )
-
-    and
-
     VerticalScrollableTabView(
-        tabController: tabController,                             <- Required TabBarController
-        listItemData: data,                                       <- Required List<dynamic>
-        scrollDirection: Axis.horizontal or Axis.vertical,        <- Required Axis
-        eachItemChild: (object,index){
-            return CategorySection(category: object as Category); <- Object and index
-        },
+        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
+              },
+            ),
+          ),
+        ],
+      ),
 
 
 ## Contribution

example/ios/Flutter/AppFrameworkInfo.plist

@@ -21,6 +21,6 @@
   <key>CFBundleVersion</key>
   <string>1.0</string>
   <key>MinimumOSVersion</key>
-  <string>8.0</string>
+  <string>9.0</string>
 </dict>
 </plist>

example/lib/main.dart

@@ -16,7 +16,7 @@ class MyApp extends StatelessWidget {
     return MaterialApp(
         title: 'Vertical Scrollable TabView Demo',
         theme: ThemeData(
-          primarySwatch: Colors.purple,
+          primarySwatch: Colors.blue,
         ),
         home: MyHomePage(title: 'Vertical Scrollable TabView Plugin'));
   }
@@ -33,6 +33,7 @@ class MyHomePage extends StatefulWidget {
 class _MyHomePageState extends State<MyHomePage>
     with SingleTickerProviderStateMixin {
   final List<Category> data = ExampleData.data;
+
   // TabController More Information => https://api.flutter.dev/flutter/material/TabController-class.html
   late TabController tabController;
 
@@ -52,32 +53,40 @@ class _MyHomePageState extends State<MyHomePage>
   Widget build(BuildContext context) {
     return Scaffold(
       backgroundColor: Colors.white,
-      appBar: AppBar(
-        title: Text(widget.title),
-        bottom: TabBar(
-          isScrollable: true,
-          controller: tabController,
-          indicatorPadding: 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);
-          },
-        ),
-      ),
       body: VerticalScrollableTabView(
-          tabController: tabController,
-          listItemData: data,
-          verticalScrollPosition: VerticalScrollPosition.middle,
-          //Change this to your preferred scroll direction
-          scrollDirection: Axis.vertical,
-          eachItemChild: (object, index) =>
-              CategorySection(category: object as Category)),
+        tabController: tabController,
+        listItemData: data,
+        verticalScrollPosition: VerticalScrollPosition.begin,
+        eachItemChild: (object, index) =>
+            CategorySection(category: object as Category),
+        slivers: [
+          SliverAppBar(
+            pinned: true,
+            expandedHeight: 250.0,
+            flexibleSpace: FlexibleSpaceBar(
+              title: Text("SliverAppBar"),
+              titlePadding: EdgeInsets.only(bottom: 50),
+              collapseMode: CollapseMode.pin,
+              background: FlutterLogo(),
+            ),
+            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);
+              },
+            ),
+          ),
+        ],
+      ),
     );
   }
 }

example/pubspec.yaml

@@ -3,7 +3,6 @@ description: Demonstrates how to use the vertical_scrollable_tabview plugin.
 
 # The following line prevents the package from being accidentally published to
 # pub.dev using `pub publish`. This is preferred for private packages.
-publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 
 environment:
   sdk: ">=2.12.0 <3.0.0"

lib/vertical_scrollable_tabview.dart

@@ -35,19 +35,29 @@ class VerticalScrollableTabView extends StatefulWidget {
   /// VerticalScrollPosition = is ann Animation style from scroll_to_index,
   /// It's show the item position in listView.builder
   final VerticalScrollPosition _verticalScrollPosition;
-  final Axis _axisOrientation;
-  const VerticalScrollableTabView({
-    required TabController tabController,
+
+  /// TODO Horizontal ScrollDirection
+  // final Axis _axisOrientation;
+
+  /// Required SliverAppBar, And TabBar must inside of SliverAppBar, and In the TabBar
+  /// onTap: (index) => VerticalScrollableTabBarStatus.setIndex(index);
+  final List<Widget> _slivers;
+
+  VerticalScrollableTabView({required TabController tabController,
     required List<dynamic> listItemData,
-    required Axis scrollDirection,
+    /// TODO Horizontal ScrollDirection
+    // required Axis scrollDirection,
     required Widget Function(dynamic aaa, int index) eachItemChild,
     VerticalScrollPosition verticalScrollPosition =
         VerticalScrollPosition.begin,
-  })  : _tabController = tabController,
+    required List<Widget> slivers,})
+      : _tabController = tabController,
         _listItemData = listItemData,
-        _axisOrientation = scrollDirection,
+        ///TODO Horizontal ScrollDirection
+        // _axisOrientation = scrollDirection,
         _eachItemChild = eachItemChild,
-        _verticalScrollPosition = verticalScrollPosition;
+        _verticalScrollPosition = verticalScrollPosition,
+        _slivers = slivers;
 
   @override
   _VerticalScrollableTabViewState createState() =>
@@ -58,7 +68,6 @@ class _VerticalScrollableTabViewState extends State<VerticalScrollableTabView>
     with SingleTickerProviderStateMixin {
   /// Instantiate scroll_to_index (套件提供的方法)
   late AutoScrollController scrollController;
-
   /// When the animation is started, need to pause onScrollNotification to calculate Rect
   /// 動畫的時候暫停去運算 Rect
   bool pauseRectGetterIndex = false;
@@ -86,7 +95,6 @@ class _VerticalScrollableTabViewState extends State<VerticalScrollableTabView>
 
   @override
   void dispose() {
-    widget._tabController.dispose();
     scrollController.dispose();
     super.dispose();
   }
@@ -98,23 +106,43 @@ class _VerticalScrollableTabViewState extends State<VerticalScrollableTabView>
       // NotificationListener 是一個由下往上傳遞通知，true 阻止通知、false 傳遞通知，確保指監聽滾動的通知
       // ScrollNotification => https://www.jianshu.com/p/d80545454944
       child: NotificationListener<ScrollNotification>(
-        child: buildScrollView(),
+        child: CustomScrollView(
+          controller: scrollController,
+          slivers: [
+            ...widget._slivers, buildVerticalSliverList()
+          ],
+        ),
         onNotification: onScrollNotification,
       ),
     );
   }
 
-  Widget buildScrollView() {
-    return ListView.builder(
-      controller: scrollController,
-      itemCount: widget._listItemData.length,
-      scrollDirection: widget._axisOrientation,
-      itemBuilder: (BuildContext context, int index) {
-        /// Initial Key of itemKeys
-        /// 初始化 itemKeys 的 key
-        itemsKeys[index] = RectGetter.createGlobalKey();
-        return buildItem(index);
-      },
+  /// TODO()  横向滑動區域
+  // Widget buildScrollView() {
+  //   return ListView.builder(
+  //     controller: widget._scrollController,
+  //     itemCount: widget._listItemData.length,
+  //     /// TODO Horizontal ScrollDirection
+  //     // scrollDirection: widget._axisOrientation,
+  //     itemBuilder: (BuildContext context, int index) {
+  //       /// Initial Key of itemKeys
+  //       /// 初始化 itemKeys 的 key
+  //       itemsKeys[index] = RectGetter.createGlobalKey();
+  //       return buildItem(index);
+  //     },
+  //   );
+  // }
+
+  SliverList buildVerticalSliverList() {
+    return SliverList(
+      delegate: SliverChildListDelegate(List.generate(
+        widget._listItemData.length,
+            (index) {
+          // 建立 itemKeys 的 Key
+          itemsKeys[index] = RectGetter.createGlobalKey();
+          return buildItem(index);
+        },
+      )),
     );
   }
 
@@ -162,7 +190,6 @@ class _VerticalScrollableTabViewState extends State<VerticalScrollableTabView>
   /// true表示消費掉當前通知不再向上一级NotificationListener傳遞通知，false則會再向上一级NotificationListener傳遞通知；
   bool onScrollNotification(ScrollNotification notification) {
     if (pauseRectGetterIndex) return true;
-
     /// get tabBar index
     /// 取得 tabBar 的長度
     int lastTabIndex = widget._tabController.length - 1;
@@ -184,8 +211,8 @@ class _VerticalScrollableTabViewState extends State<VerticalScrollableTabView>
       int sumIndex = visibleItems.reduce((value, element) => value + element);
       // 5 ~/ 2 = 2  => Result is an int 取整數
       int middleIndex = sumIndex ~/ visibleItems.length;
-      if (widget._tabController.index != middleIndex)
-        widget._tabController.animateTo(middleIndex);
+      if (widget._tabController.index != middleIndex){
+        widget._tabController.animateTo(middleIndex);}
     }
     return false;
   }
@@ -197,7 +224,9 @@ class _VerticalScrollableTabViewState extends State<VerticalScrollableTabView>
     Rect? rect = RectGetter.getRectFromKey(listViewKey);
     List<int> items = [];
     if (rect == null) return items;
-    bool isHoriontalScroll = widget._axisOrientation == Axis.horizontal;
+    /// TODO Horizontal ScrollDirection
+    // bool isHoriontalScroll = widget._axisOrientation == Axis.horizontal;
+    bool isHoriontalScroll = false;
     itemsKeys.forEach((index, key) {
       Rect? itemRect = RectGetter.getRectFromKey(key);
       if (itemRect == null) return;

pubspec.yaml

@@ -1,6 +1,6 @@
 name: vertical_scrollable_tabview
 description: A Flutter widget which syncronize a ScrollView and a custom tab view.
-version: 0.0.4
+version: 0.0.5
 repository: https://github.com/wayne900204/vertical_scrollable_tabview
 issue_tracker: https://github.com/wayne900204/vertical_scrollable_tabview/issues
 homepage: https://github.com/wayne900204/vertical_scrollable_tabview
@@ -13,7 +13,7 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
-  scroll_to_index: ^2.1.0
+  scroll_to_index: ^2.1.1
   rect_getter: ^1.1.0
 dev_dependencies:
   flutter_test: