SliverOverlapAbsorber being able to accept multiple slivers

[paulosigales]

I want to create a NestedScrollView with two SliverPersistentHeader, but the problem is that the body content stay behind of the second SliverPersistentHeader. It happens because the SliverOverlapAbsorber only accept one child.

Use case

import 'package:flutter/material.dart';

class Sample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        physics: BouncingScrollPhysics(),
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return <Widget>[
            SliverOverlapAbsorber(
              handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              child: SliverSafeArea(
                top: false,
                bottom: false,
                sliver: SliverPersistentHeader(
                  delegate: Header(),
                  pinned: true,
                ),
              ),
            ),
            SliverSafeArea(
              top: false,
              bottom: false,
              sliver: SliverPersistentHeader(
                delegate: SubHeader(),
                pinned: true,
              ),
            ),
          ];
        },
        body: ListView.builder(
          padding: EdgeInsets.zero,
          itemBuilder: (context, index) {
            return Container(
              height: 200,
              color: index.isOdd ? Colors.red : Colors.orange,
            );
          },
          itemCount: 2,
        ),
      ),
    );
  }
}

class Header extends SliverPersistentHeaderDelegate {
  @override
  double get minExtent => 100.0;

  @override
  double get maxExtent => 200.0;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate _) => true;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Colors.purple,
      child: Center(child: Text('Header')),
    );
  }
}

class SubHeader extends SliverPersistentHeaderDelegate {
  @override
  double get minExtent => 100.0;

  @override
  double get maxExtent => 100.0;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate _) => true;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Colors.green,
      child: Center(child: Text('SubHeader')),
    );
  }
}

Proposal

That SliverOverlapAbsorber being able to accept multiple slivers.

SliverOverlapAbsorber(
  handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
  slivers: <Widget>[
    SliverSafeArea(
      top: false,
      bottom: false,
      sliver: SliverPersistentHeader(
        delegate: Header(),
        pinned: true,
      ),
    ),
    SliverSafeArea(
      top: false,
      bottom: false,
      sliver: SliverPersistentHeader(
        delegate: SubHeader(),
        pinned: true,
      ),
    ),
  ],
),

[paulosigales]

[✓] Flutter (Channel stable, v1.12.13+hotfix.5, on Mac OS X 10.15.2 19C57, locale en-BR)
    • Flutter version 1.12.13+hotfix.5 at /Users/paulosigales/Development/flutter
    • Framework revision 27321ebbad (3 months ago), 2019-12-10 18:15:01 -0800
    • Engine revision 2994f7e1e6
    • Dart version 2.7.0

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/paulosigales/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.2
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.3, Build version 11C29
    • CocoaPods version 1.8.4

[✓] Android Studio (version 3.5)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 42.1.1
    • Dart plugin version 191.8593
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)

[✓] VS Code (version 1.42.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.8.1

[✓] Connected device (1 available)
    • iPhone 11 Pro • B6DF5F79-96E1-4FB9-9151-EB41679F5C0B • ios •
      com.apple.CoreSimulator.SimRuntime.iOS-13-3 (simulator)

• No issues found!

[Piinks]

This is a duplicate of #22393
I am going to close this one since the other has more upvotes and therefore higher priority ranking. :)
Thanks!

[aradhwan]

Is there any workaround ? I have the same issue. I have two headers and I don't want the body to overlap with any of them. As it leads to an empty space at the bottom.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.