extended_nested_scroll_view 3.0.1-non-null-safety

extended nested scroll view to fix pinned header and inner scrollables sync issues.

extended_nested_scroll_view

Language: English | 中文简体

NestedScrollView: extended nested scroll view to fix following issues.

1.pinned sliver header issue

2.inner scrollables in tabview sync issue

3.pull to refresh is not work.

4.do without ScrollController in NestedScrollView's body

Web demo for ExtendedNestedScrollView

• extended_nested_scroll_view
• Example for issue 1
• Example for issue 2
  • Step1
  • Step2
• Example for NestedScrollView pull to refresh
• Do without ScrollController in NestedScrollView's body

Example for issue 1

give total height of pinned sliver headers in pinnedHeaderSliverHeightBuilder callback

 var tabBarHeight = primaryTabBar.preferredSize.height;
      var pinnedHeaderHeight =
          //statusBar height
          statusBarHeight +
              //pinned SliverAppBar height in header
              kToolbarHeight;

 return NestedScrollView(
        pinnedHeaderSliverHeightBuilder: () {
          return pinnedHeaderHeight;
        },
       

Example for issue 2

Step1

Put your list which in tabview into NestedScrollViewInnerScrollPositionKeyWidget,and get unique a key

 return extended.NestedScrollViewInnerScrollPositionKeyWidget(
        widget.tabKey,
        ListView.builder(
            itemBuilder: (c, i) {
              return Container(
                alignment: Alignment.center,
                height: 60.0,
                child: Text(widget.tabKey.toString() + ": List$i"),
              );
            },
            itemCount: 100)
        );

Step2

get current tab key in innerScrollPositionKeyBuilder callback. this key should as same as in step 1 given.

 extended.NestedScrollView(
        innerScrollPositionKeyBuilder: () {
          var index = "Tab";
          if (primaryTC.index == 0) {
            index +=
                (primaryTC.index.toString() + secondaryTC.index.toString());
          } else {
            index += primaryTC.index.toString();
          }
          return Key(index);
        },

Example for NestedScrollView pull to refresh

NestedScrollViewRefreshIndicator is as the same as Flutter RefreshIndicator.

 NestedScrollViewRefreshIndicator(
       onRefresh: onRefresh,
       child: extended.NestedScrollView(
         headerSliverBuilder: (c, f) {
           return _buildSliverHeader(primaryTabBar);
         },

Better one to pull to refresh

Please see the example app of this for a full example.

Do without ScrollController in NestedScrollView's body

• due to we can't set ScrollController for list in NestedScrollView's body(it will breaking behaviours of InnerScrollController in NestedScrollView),provide Demos

• pull to refresh,

• load more

• scroll to top

  to show how to do it without ScrollController

• pinned header height

  to show how to change pinned header height dynamically.