SliverPersistentHeader with floating does not respect constraints.overlap #147053

k-ane · 2024-04-19T13:54:16Z

Steps to reproduce

Start with a CustomScrollView
Add a pinned header to the top
Add a floating header directly below
Add some more content.
Scroll up and down

Expected results

It is expected that when the floating header is shown, it respects the overlap of the pinned header above.

https://share.cleanshot.com/NzPVhS4L

Actual results

As the floating header is shown, you will see it is hidden by the pinned header above.

https://share.cleanshot.com/tZNmLvkl

Code sample

import 'package:flutter/material.dart';

class FloatingHeaderExample extends StatelessWidget {
  const FloatingHeaderExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: CustomScrollView(
          slivers: [
            SliverPersistentHeader(
              pinned: true,
              delegate: _SliverAppBarDelegate(
                height: 50,
                child: Container(
                  color: Colors.red,
                  child: Center(child: Text('PINNED')),
                ),
              ),
            ),
            SliverPersistentHeader(
              floating: true,
              delegate: _SliverAppBarDelegate(
                height: 80,
                child: Container(
                  color: Colors.green,
                  child: Center(child: Text('FLOATING')),
                ),
              ),
            ),
            SliverToBoxAdapter(
              child: Container(
                height: 1000,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      Colors.grey.shade900,
                      Colors.grey.shade500,
                    ],
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate({
    required this.height,
    required this.child,
  });

  final double height;
  final Widget child;

  @override
  double get minExtent => height;
  @override
  double get maxExtent => height;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return child;
  }

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

Screenshots or Video

Screenshots / Video demonstration

https://share.cleanshot.com/tZNmLvkl

Logs

No response

Flutter Doctor output

Doctor output

flutter doctor -v
[✓] Flutter (Channel master, 3.21.0-14.0.pre.2, on macOS 14.4.1
    23E224 darwin-arm64, locale en-AU)
    • Flutter version 3.21.0-14.0.pre.2 on channel master at
      /Users/kanewickman/fvm/versions/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision d8854fd898 (4 weeks ago), 2024-03-23
      22:03:12 -0400
    • Engine revision 2f5afdf623
    • Dart version 3.4.0 (build 3.4.0-267.0.dev)
    • DevTools version 2.34.0-dev.12

[✓] Android toolchain - develop for Android devices (Android SDK
    version 34.0.0)
    • Android SDK at /Users/kanewickman/Library/Android/Sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/kanewickman/Library/Android/Sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.13.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google
      Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      17.0.7+0-17.0.7b1000.6-10550314)

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

[✓] VS Code (version 1.86.0-insider)
    • VS Code at /Applications/Visual Studio Code -
      Insiders.app/Contents
    • Flutter extension version 3.80.0

[✓] Connected device (5 available)
    • Kane's iPhone (mobile)          • 00008130-000925A921F2001C
      • ios            • iOS 17.4.1 21E236
    • iPhone 15 (mobile)              •
      05708B14-B0F9-41DA-A04C-F584FAB266D6 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-17-4 (simulator)
    • macOS (desktop)                 • macos
      • darwin-arm64   • macOS 14.4.1 23E224 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad
      • darwin         • macOS 14.4.1 23E224 darwin-arm64
    • Chrome (web)                    • chrome
      • web-javascript • Google Chrome 123.0.6312.124

[✓] Network resources
    • All expected network resources are available.

• No issues found!

huycozy · 2024-04-22T05:29:02Z

Thank you for the report. I also see the same issue as reported.

Demo of sample code

Screen.Recording.2024-04-22.at.12.26.43.mov

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.19.6, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.19.6 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 54e66469a9 (31 hours ago), 2024-04-17 13:08:03 -0700
    • Engine revision c4cd48e186
    • Dart version 3.3.4
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode15.3.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

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

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 123.0.6312.124

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.22.0-14.0.pre.67, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.22.0-14.0.pre.67 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 1a905d508d (17 hours ago), 2024-04-21 06:44:23 -0400
    • Engine revision 75ca2195c9
    • Dart version 3.5.0 (build 3.5.0-83.0.dev)
    • DevTools version 2.35.0-dev.8
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode15.3.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

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

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 124.0.6367.60

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

Piinks · 2024-04-23T18:38:23Z

I think this is the same issue as #26667, can you take a look @k-ane?

github-actions · 2024-05-14T19:08:11Z

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now.
If you find this problem please file a new issue with the same description, what happens, logs and the output of 'flutter doctor -v'. All system setups can be slightly different so it's always better to open new issues and reference the related ones.
Thanks for your contribution.

github-actions · 2024-05-28T20:00:39Z

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.

This was referenced Apr 19, 2024

Fix paintOrigin for RenderSliverFloatingPersistentHeader #147054

Closed

floating behavior of SliverPersistentHeader does not match that of SliverAppBar #129869

Open

huycozy added the in triage Presently being triaged by the triage team label Apr 22, 2024

Piinks added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 23, 2024

github-actions bot closed this as completed May 14, 2024

github-actions bot locked as resolved and limited conversation to collaborators May 28, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SliverPersistentHeader with floating does not respect constraints.overlap #147053

SliverPersistentHeader with floating does not respect constraints.overlap #147053

k-ane commented Apr 19, 2024 •

edited

huycozy commented Apr 22, 2024

Piinks commented Apr 23, 2024

github-actions bot commented May 14, 2024

github-actions bot commented May 28, 2024

SliverPersistentHeader with floating does not respect constraints.overlap #147053

SliverPersistentHeader with floating does not respect constraints.overlap #147053

Comments

k-ane commented Apr 19, 2024 • edited

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

huycozy commented Apr 22, 2024

Piinks commented Apr 23, 2024

github-actions bot commented May 14, 2024

github-actions bot commented May 28, 2024

k-ane commented Apr 19, 2024 •

edited