Elva Scroll View #

A Flutter package for nested scrolling with coordinated scrolling and inertial scrolling transfer capabilities.

Documentation: https://github.com/Y2Yi/toy

Features #

• Nested Scrolling Support: Supports multi-level nested scroll views with smooth scrolling coordination
• Inertial Scrolling Transfer: Inertial scrolling animations can be transferred across multiple scroll components
• Shell Mode: Supports preventing scroll offset from continuing to propagate upward, enabling independent scroll areas
• Flexible Builder Pattern: Uses the Builder pattern for easy integration into existing code
• Custom Notification System: Provides rich scroll event notifications

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  elva_scroll_view:
    path: ./elva_scroll_view

Or if published to pub.dev:

dependencies:
  elva_scroll_view: ^0.1.0

Usage #

Basic Usage #

ElvaScrollViewBuilder(
  builder: (context, controller) {
    return CustomScrollView(
      controller: controller,
      slivers: [
        SliverAppBar(...),
        SliverList(...),
      ],
    );
  }
)

Nested Scrolling #

ElvaScrollViewBuilder(
  debugLabel: "parent",
  builder: (context, parentController) {
    return CustomScrollView(
      controller: parentController,
      slivers: [
        SliverAppBar(...),
        SliverFillRemaining(
          child: Row(
            children: [
              Expanded(
                child: ElvaScrollViewBuilder(
                  debugLabel: "child_1",
                  builder: (context, childController) {
                    return CustomScrollView(
                      controller: childController,
                      slivers: [...]
                    );
                  }
                )
              ),
              Expanded(
                child: ElvaScrollViewBuilder(
                  debugLabel: "child_2",
                  builder: (context, childController) {
                    return CustomScrollView(
                      controller: childController,
                      slivers: [...]
                    );
                  }
                )
              ),
            ],
          ),
        ),
      ],
    );
  }
)

Shell Mode #

ElvaScrollViewBuilder(
  isShell: true,
  builder: (context, controller) {
    return CustomScrollView(
      controller: controller,
      slivers: [...]
    );
  }
)

Core Components #

ElvaScrollViewBuilder #

The main builder component for wrapping CustomScrollView that needs coordinated scrolling.

Parameters:

• builder: Builder function that receives context and controller
• debugLabel: Debug label for logging purposes
• isShell: Whether it's a shell component. When true, scroll offset won't continue to propagate upward

ElvaScrollViewScrollController #

Custom scroll controller that implements TransportPixelNode mixin, responsible for handling scroll coordination and transfer.

ElvaScrollViewPosition #

Custom scroll position manager that extends Flutter's native ScrollPositionWithSingleContext, implementing:

• User drag offset handling
• Inertial scrolling startup and management
• Animation offset application

ElvaScrollViewAnimationOverscrollDispatcher #

Inertial scrolling animation dispatcher, responsible for:

• Collecting components that need to accept scroll events
• Dispatching inertial scrolling animations in order
• Managing overscroll transfer

Notifications #

ElvaScrollViewAnimationScrollingNotification #

Dispatched when global overscroll event animation occurs.

Properties:

• overscroll: The overscroll amount
• consumed: The amount consumed by current scroll view

Example #

See the example directory for a complete example application.

License #

MIT