extended_nested_scroll_view

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package that extends the built-in NestedScrollView to resolve common issues with pinned headers and synchronized inner scrollables. It ensures smooth scrolling behavior when nested scroll views are used together, particularly when headers remain pinned while inner content scrolls. Ideal for complex UIs like collapsible headers with multiple scrollable sections. The package is maintained by fluttercandies.com and supports all major platforms including mobile, web, and desktop.

Use cases

Complex layouts with pinned headers
Synchronized scrolling in nested scroll views
Collapsible header designs
Multi-section scrollable interfaces
Custom scroll coordination
Responsive UIs with dynamic content

Key features

Fixes pinned header sync issues
Supports all Flutter platforms
Enhanced scroll coordination
Easy integration with existing NestedScrollView
Optimized performance for nested scrolling
Extends native NestedScrollView functionality

Suitable for

Developers building advanced scrollable UIs
Apps with collapsible or pinned headers
Teams needing reliable nested scroll behavior
UI-heavy applications on multiple platforms
Flutter developers seeking stable scroll synchronization

Considerations

Requires understanding of NestedScrollView mechanics
May add slight overhead for simple scroll cases
Best suited for complex scroll hierarchies
Not needed for basic scrollable layouts
Limited customization beyond scroll syncing

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Language: English | 中文简体

NestedScrollView: extended nested scroll view to fix following issues.

1.pinned sliver header issue

2.inner scrollables in tabview sync issue

3.do without ScrollController in NestedScrollView's body

Web demo for ExtendedNestedScrollView

extended_nested_scroll_view
Example for issue 1
Example for issue 2
- ExtendedVisibilityDetector
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;

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

Example for issue 2

We usually keep list scroll position with following:

scene	onlyOneScrollInBody	description
AutomaticKeepAliveClientMixin	true	ScrollPosition will not be disposed, set onlyOneScrollInBody to true so that we can know which list is isActived.
PageStorageKey	false	ScrollPosition will be disposed, PageStorageKey just record the position info,the scroll positions in ExtendedNestedScrollView will always single one.

    ExtendedNestedScrollView(
       onlyOneScrollInBody: true,
    )

ExtendedVisibilityDetector

Provide ExtendedVisibilityDetector to point out which list is visible

   ExtendedVisibilityDetector(
      uniqueKey: const Key('Tab1'),
      child: ListView(),
   )

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

show how to do it without ScrollController
pinned header height

show how to change pinned header height dynamically.

Search packages, repositories and app categories