Skip to content

NestedScrollView : is there any way to support multiple child for SliverOverlapAbsorber #22393

Closed
@zmtzawqlp

Description

@zmtzawqlp

As [flutter document(https://docs.flutter.io/flutter/widgets/NestedScrollView-class.html) said about SliverOverlapAbsorber
// This widget takes the overlapping behavior of the SliverAppBar,
// and redirects it to the SliverOverlapInjector below. If it is
// missing, then it is possible for the nested "inner" scroll view
// below to end up under the SliverAppBar even when the inner
// scroll view thinks it has not been scrolled.
// This is not necessary if the "headerSliverBuilder" only builds
// widgets that do not overlap the next sliver.

SliverOverlapAbsorber can fix the Scroll postion in body scroll widget. is there any way to support
multiple child. as i use a pinned SliverPersistentHeader under a SliverOverlapAbsorber
more info please see the gif and demo code. thanks

373096261108bffd940561f8af23535c
main6.zip

Activity

added
frameworkflutter/packages/flutter repository. See also f: labels.
f: scrollingViewports, list views, slivers, etc.
on Sep 28, 2018
added this to the Goals milestone on Sep 28, 2018
zmtzawqlp

zmtzawqlp commented on Nov 15, 2018

@zmtzawqlp
ContributorAuthor

i have done some things to solve this thing, may be you have better solution 。please check it when you have the time.
i notice outerscrollcontrol will handle the pinned scroll extend, so i done some to fix it.
https://github.com/fluttercandies/extended_nested_scroll_view

changed the title [-]is there any way to support multiple child for SliverOverlapAbsorber[/-] [+]NestedScrollView : is there any way to support multiple child for SliverOverlapAbsorber[/+] on Dec 20, 2018
vanlooverenkoen

vanlooverenkoen commented on Aug 6, 2019

@vanlooverenkoen
Contributor

Any progress on this issue? This should be fixed in the flutter itself as well

shinvi

shinvi commented on Aug 26, 2019

@shinvi

It’s already in the second half of 2019, and I still haven’t seen any progress on this issue. T_T

hahnrobert

hahnrobert commented on Apr 30, 2020

@hahnrobert

@vanlooverenkoen I don't understand why this ticket was closed. This ticket is definitely not addressed as of today.
Flutter provides no solution to absorb the height of more than one child. This limits design abilities as no fixed size element can be used between the AppBar and the scrolling content of a child.

added
P2Important issues not at the top of the work list
on May 29, 2020
bikashKatwal

bikashKatwal commented on Jun 16, 2020

@bikashKatwal

I am still having this issue, it is not yet resolved from flutter

removed this from the None. milestone on Aug 17, 2020

23 remaining items

Angeloqo

Angeloqo commented on Nov 24, 2022

@Angeloqo

This code support double sliver pinned appbar without the issue where small body go behind second app bar.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Home(),
    ),
  );
}

class Home extends StatelessWidget {
  Home({super.key});

  final SliverOverlapAbsorberHandle appBar = SliverOverlapAbsorberHandle();
  final SliverOverlapAbsorberHandle disconnectBar =
      SliverOverlapAbsorberHandle();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: NestedScrollView(
        physics: const ClampingScrollPhysics(),
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) =>
            <Widget>[
          SliverOverlapAbsorber(
            handle: appBar,
            sliver: const SliverAppBar(
              pinned: true,
              backgroundColor: Colors.red,
              elevation: 0,
              toolbarHeight: 50,
              expandedHeight: 100,
              title: Center(
                child: Text("First pinned appbar"),
              ),
            ),
          ),
          SliverOverlapAbsorber(
            handle: disconnectBar,
            sliver: const SliverAppBar(
              pinned: true,
              backgroundColor: Colors.green,
              elevation: 0,
              primary: false,
              toolbarHeight: 20,
              expandedHeight: 100,
              title: Center(
                child: Text("Second pinned appbar"),
              ),
            ),
          ),
        ],
        body: Builder(
          builder: (BuildContext context) => CustomScrollView(
            slivers: <Widget>[
              SliverOverlapInjector(handle: appBar),
              SliverOverlapInjector(handle: disconnectBar),
              SliverToBoxAdapter(
                child: Container(
                  color: Colors.grey,
                  height: 100,
                  width: double.infinity,
                  child: const Center(child: Text("body")),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

untitled untitled

worked out fine for me!! thanks!!

nerder

nerder commented on Jan 9, 2023

@nerder

#22393 (comment)

The solution presented here doesn't work properly when you have a CustomScrollView in the body of your NestedScrollView, only the MultiSliver seems to do the work.

jong950715

jong950715 commented on Feb 15, 2023

@jong950715

#22393 (comment)

It works for my case.
headerSliverBuilder of NestedScrollView has one floating appbar, one pinned appbar

and body has CustomScrollview, it has 2 SliverOverlapInjector.

It works properly even with CustomScrollView in the body of NestedScrollView

Piinks

Piinks commented on Apr 7, 2023

@Piinks
Contributor

Resolving #33137 (currently in progress) will resolve this as well since multiple slivers will be able to go into the group, and the group itself will be able to go into the SliverOverlapAbsorber. 👍

added
P3Issues that are less important to the Flutter project
and removed
P2Important issues not at the top of the work list
on May 30, 2023
Piinks

Piinks commented on Jun 8, 2023

@Piinks
Contributor

This has been resolved by #126596. With SliverMainAxisGroup, multiple slivers can be wrapped by the group, and then the group can be provided to the SliverOverlapAbsorber. :) cc @thkim1011

github-actions

github-actions commented on Jun 23, 2023

@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.

locked as resolved and limited conversation to collaborators on Jun 23, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P3Issues that are less important to the Flutter projectc: new featureNothing broken; request for a new capabilityf: scrollingViewports, list views, slivers, etc.frameworkflutter/packages/flutter repository. See also f: labels.

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @zoechi@Hixie@kf6gpe@JPM84@thkim1011

      Issue actions

        NestedScrollView : is there any way to support multiple child for SliverOverlapAbsorber · Issue #22393 · flutter/flutter