extended_nested_scroll_view 0.2.6 copy "extended_nested_scroll_view: ^0.2.6" to clipboard
extended_nested_scroll_view: ^0.2.6 copied to clipboard

outdated

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

extended_nested_scroll_view #

pub package

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.

Chinese bolg

new ExtendedNestedScrollView

Example for issue 1 and Example for issue 2 #

Chinese bolg

you only need to care about pinnedHeaderHeight. issue 2 will be handled with keepOnlyOneInnerNestedScrollPositionActive is true.

    var pinnedHeaderHeight =
        //statusBar height
        statusBarHeight +
            //pinned SliverAppBar height in header
            kToolbarHeight;

  child: ExtendedNestedScrollView(
           headerSliverBuilder: (c, f) {
             return buildSliverHeader(false);
           },
           //
           pinnedHeaderSliverHeight: pinnedHeaderHeight,
           keepOnlyOneInnerNestedScrollPositionActive: true,

old ExtendedNestedScrollView

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,
        // myRefresh.RefreshIndicator(
        // child:
        ListView.builder(
            itemBuilder: (c, i) {
              return Container(
                //decoration: BoxDecoration(border: Border.all(color: Colors.orange,width: 1.0)),
                alignment: Alignment.center,
                height: 60.0,
                child: Text(widget.tabKey.toString() + ": List$i"),
              );
            },
            itemCount: 100)
        //,
        //onRefresh: onRefresh,
        // )
        );

Step 2 #

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);
         },

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

282
likes
0
pub points
98%
popularity

Publisher

verified publisherfluttercandies.com

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

Homepage
Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

flutter

More

Packages that depend on extended_nested_scroll_view