Floating SliverPersistantHeader hidden by pinned SliverAppBar

Hi,

I'm trying to have a SliverAppBar (which is fixed/pinned to the top) and under it a floating persistant header.

It goes like this :

import 'package:flutter/material.dart';

class SliverExample extends StatefulWidget {

  @override
  _SliverExampleState createState() => _SliverExampleState();
}

class _SliverExampleState extends State<SliverExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        physics: BouncingScrollPhysics(),
        slivers: [
          SliverAppBar(
            pinned: true,
            title: Text('Pinned AppBar'),
          ),
          SliverPersistentHeader(
            floating: true,
            delegate: FloatingHeader(),
          ),
          SliverList(
              delegate: SliverChildListDelegate([
            Container(
                height: 2000,
                color: Colors.white,
                child: Center(
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                      Text('TOP'),
                      Text('MIDDLE'),
                      Text('BOTTOM'),
                    ]))),
          ]))
        ],
      ),
    );
  }
}

class FloatingHeader extends SliverPersistentHeaderDelegate {
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Colors.red,
      child: Center(
          child:
              Text('Floating Header', style: TextStyle(color: Colors.white))),
    );
  }

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

  @override
  double get maxExtent => 250.0;

  @override
  double get minExtent => 80.0;
}

It works, but the problem is when you scroll down (and so the floating header disappear), and scroll back up so the header appears again, it appears but the top part is hidden by the SliverAppBar.

Then when you scroll back to the top of the page, everything is positionned as you would expect it to be (the SliverAppBar at the top and under it the floating header completely visible).

Here is what it looks like :

I don't know if this is a bug or I'm missing something.
How can I deal with that ? Such as the floating persistant header always appears completely under the SliverAppBar when you scroll back up after scrolling down for a while.

@RobinLbt

Hi @RobinLbt,
The experience seems to be as expected to me. Unless you scroll down completely, you won't see the Top section appear below Floating Header and for it, you'll need to scroll down completely because you have wrapped the entire scaffold body with CustomScrollView.
This is working as intended.

@darshankawar

Thank you for your quick answer @darshankawar,

I'm not sure if we are talking about the same thing, I'm not trying to put the SliverAppBar below the floating header.
If you look at the gif, you can see when I'm scrolling down and then up:

The SliverAppBar is pinned , desired behaviour
The SliverPersistantHeader is floating, desired behaviour
The SliverPersistantHeader is behind the SliverAppBar, desired behaviour
But the top part of the SliverPersistantHeader is hidden (the size of the SliverAppBar because it's behind it), unless you scroll to the very top where it appears 100%. I don't think this is a desired behaviour, who would want to hide a part of the header when it supposed to appears completely ?

@RobinLbt

@RobinLbt I see what you are saying. Probably I misread your issue. Keeping this issue open for further analysis.

flutter doctor -v

Flutter 1.20.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision bbfbf1770c (15 hours ago) • 2020-08-13 08:33:09 -0700
Engine • revision 9d5b21729f
Tools • Dart 2.9.1

Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.20.2, on Mac OS X 10.15.2 19C57, locale en-US)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    ✗ Android license status unknown.
      Try re-installing or updating your Android SDK Manager.
      See https://developer.android.com/studio/#downloads or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions.
[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
[✓] Android Studio (version 3.6)
[✓] Connected device (1 available)

! Doctor found issues in 1 category.

@Piinks

CC @Piinks - have we seen this issue before?

Can the top appbar just live outside the scrollview, e.g. by setting Scaffold.appBar?

@RobinLbt

Just playing around with this a bit, I borrowed from this popular Medium article about Sliver composition and plugged in your reproduction:
https://medium.com/flutter/slivers-demystified-6ff68ab0296f

import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CollapsingList(),
      ),
    );
  }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate({
    @required this.minHeight,
    @required this.maxHeight,
    @required this.child,
  });
  final double minHeight;
  final double maxHeight;
  final Widget child;
  @override
  double get minExtent => minHeight;
  @override
  double get maxExtent => math.max(maxHeight, minHeight);
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new SizedBox.expand(child: child);
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return maxHeight != oldDelegate.maxHeight ||
        minHeight != oldDelegate.minHeight ||
        child != oldDelegate.child;
  }
}

class CollapsingList extends StatelessWidget {
  SliverPersistentHeader makeHeader(
    String headerText,
    double minHeight,
    double maxHeight,
    Color color,
  ) {
    return SliverPersistentHeader(
      pinned: true,
      delegate: _SliverAppBarDelegate(
        minHeight: minHeight,
        maxHeight: maxHeight,
        child: Container(
          color: color,
          child: Center(
            child: Text(
              headerText,
              style: TextStyle(color: Colors.white),
            ),
          )
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        makeHeader('Pinned', 100, 100, Colors.blue),
        makeHeader('Floating', 0, 250, Colors.red),
        SliverList(
          delegate: SliverChildListDelegate([
            Container(
              height: 2000,
              color: Colors.white,
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('TOP'),
                    Text('MIDDLE'),
                    Text('BOTTOM'),
                  ]
                )
              )
            ),
          ])
        )
      ],
    );
  }
}

Does this create the effect you were looking for @RobinLbt ? I highly recommend the article as well. :)

@Piinks

@Piinks thank you for providing an example. It's definitely better !
There is still a problem, the floating header appears only at the top of the page now, not when you scroll down and then scroll up a bit (in the middle of the page for example) like it should.
Is it even possible ?

Can the top appbar just live outside the scrollview, e.g. by setting Scaffold.appBar?

Yes this is working ! I'm closing the issue. Thanks you everyone.

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.

Navigation Menu

Repository navigation

Floating SliverPersistantHeader hidden by pinned SliverAppBar #64137

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Floating SliverPersistantHeader hidden by pinned SliverAppBar #64137

Description

Activity

darshankawar commented on Aug 19, 2020

RobinLbt commented on Aug 19, 2020

darshankawar commented on Aug 19, 2020

HansMuller commented on Aug 19, 2020

goderbauer commented on Aug 19, 2020

Piinks commented on Aug 19, 2020

RobinLbt commented on Aug 20, 2020

RobinLbt commented on Aug 21, 2020

github-actions commented on Aug 13, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions