SliverFloatingHeader #151145

HansMuller · 2024-07-01T23:21:23Z

A sliver that shows its [child] when the user scrolls forward and hides it when the user scrolls backwards. Similar headers can be found in Google Photos and Facebook.

This sliver is preferable to the general purpose SliverPersistentHeader for its relatively narrow use case because there's no need to create a SliverPersistentHeaderDelegate or to predict the header's size.

Screen.Recording.2024-07-02.at.9.03.23.AM.mov

QuncCccccc

Overall this looks good to me! Just left some nits and questions:)

QuncCccccc · 2024-07-02T19:10:34Z

packages/flutter/lib/src/widgets/sliver_floating_header.dart

+/// [SliverPersistentHeaderDelegate] or to predict the header's size.
+///
+/// {@tool dartpad}
+/// This example shows how to create a SliverFloatingHeader.


Suggested change

/// This example shows how to create a SliverFloatingHeader.

/// This example shows how to create a [SliverFloatingHeader].

QuncCccccc · 2024-07-02T19:12:39Z

examples/api/lib/widgets/sliver/sliver_floating_header.0.dart

+    final ColorScheme colorScheme = theme.colorScheme;
+
+    return Container(
+      color: colorScheme.background,


ColorScheme.background is deprecated, ColorScheme.surface can be used to replace it:)

QuncCccccc · 2024-07-02T19:17:43Z

packages/flutter/lib/src/widgets/sliver_floating_header.dart

+///    configured as a pinned, resizing, or floating header.
+class SliverFloatingHeader extends StatefulWidget {
+  /// Create a floating header sliver that animates into view when the user
+  /// scrolls forward, and disappears the user starts scrolling in the


Suggested change

/// scrolls forward, and disappears the user starts scrolling in the

/// scrolls forward, and disappears when the user starts scrolling in the

QuncCccccc · 2024-07-02T19:18:43Z

packages/flutter/lib/src/widgets/sliver_floating_header.dart

+  });
+
+  /// Non null properties override the default durations (300ms) and
+  /// curves (Curves.easeInOut) for subsequent header animations.


Suggested change

/// curves (Curves.easeInOut) for subsequent header animations.

/// curves ([Curves.easeInOut]) for subsequent header animations.

QuncCccccc · 2024-07-02T19:22:28Z

packages/flutter/lib/src/widgets/sliver_floating_header.dart

+}
+
+class _SliverFloatingHeaderState extends State<SliverFloatingHeader> with SingleTickerProviderStateMixin {
+  ScrollPosition? position;


It seems that position is not used anywhere in this class, maybe we can remove it?

YES. Thanks for catching that!

QuncCccccc · 2024-07-02T19:33:26Z

packages/flutter/lib/src/widgets/sliver_floating_header.dart

+  AnimationController? snapController;
+  double? lastScrollOffset;
+
+  // The distance from the start of the header to the start of the viewport. Whent the


Suggested change

// The distance from the start of the header to the start of the viewport. Whent the

// The distance from the start of the header to the start of the viewport. When the

QuncCccccc · 2024-07-02T19:41:23Z

packages/flutter/lib/src/widgets/sliver_floating_header.dart

+
+  // The distance from the start of the header to the start of the viewport. Whent the
+  // header is showing it varies between 0 (completely visible) and childExtent (not visible
+  // because it's just abopve the viewport's starting edge). It's used to compute the


Suggested change

// because it's just abopve the viewport's starting edge). It's used to compute the

// because it's just above the viewport's starting edge). It's used to compute the

packages/flutter/lib/src/widgets/sliver_floating_header.dart

QuncCccccc · 2024-07-02T20:41:37Z

packages/flutter/lib/src/widgets/sliver_floating_header.dart

+    super.detach();
+  }
+
+  // True if the header has been laid at at least once (lastScrollOffset != null) and either:


Suggested change

// True if the header has been laid at at least once (lastScrollOffset != null) and either:

// True if the header has been laid out at least once (lastScrollOffset != null) and either:

QuncCccccc · 2024-07-02T20:59:12Z

packages/flutter/lib/src/widgets/sliver_floating_header.dart

+    final double paintExtent = childExtent - effectiveScrollOffset;
+    final double layoutExtent = childExtent - constraints.scrollOffset;


Can these two be the same value childExtent - effectiveScrollOffset?

Yes, although that would cause slightly different behavior when the header animated in our out. If paintExtent and layoutExtent were the same then the list would appear to scroll up or down when the header snapped in or out of view. That's a useful alternative (that's the way the Instagram floating header works) although it's not the same way that the existing floating SliverPersistentHeader works.

It would be easy enough to make this an option although, if it's OK with you, I'll do that in a separate PR.

Ah got it! I agree to be consistent with SliverPersistentHeader:) Thanks for the explanation!

QuncCccccc

LGTM! Sorry I spent a little longer time to review this PR. It took me some time to understand the paint() method in AxisDirection.up and AxisDirection.left conditions:)

HansMuller · 2024-07-03T18:45:45Z

This PR includes a temporary workaround for dart-lang/sdk#56129 in focus_manager.dart:

String debugDescribeFocusTree() {
  String? result;
  assert(() {
    // TODO(yjbanov): remove this once https://github.com/dart-lang/sdk/issues/56129 has been fixed.
    // ignore: unnecessary_statements
    FocusManager.instance.toStringDeep;
    result = FocusManager.instance.toStringDeep();
    return true;
  }());

auto-submit · 2024-07-03T19:14:57Z

auto label is removed for flutter/flutter/151145, due to - The status or check suite Mac_arm64 build_tests_2_4 has failed. Please fix the issues identified (or deflake) before re-applying this label.

Roll Flutter from af913a7 to fafd67d (41 revisions) flutter/flutter@af913a7...fafd67d 2024-07-05 [email protected] Roll Flutter Engine from 74d40c160e48 to 4ee09d3b7f3b (1 revision) (flutter/flutter#151346) 2024-07-05 [email protected] Roll Flutter Engine from ba9c7b6336ef to 74d40c160e48 (1 revision) (flutter/flutter#151340) 2024-07-05 [email protected] Roll Flutter Engine from 1f0f950ea02a to ba9c7b6336ef (1 revision) (flutter/flutter#151331) 2024-07-05 [email protected] Roll Flutter Engine from 3c6a373bda3e to 1f0f950ea02a (1 revision) (flutter/flutter#151326) 2024-07-04 [email protected] Roll Flutter Engine from 79a91e38c587 to 3c6a373bda3e (2 revisions) (flutter/flutter#151318) 2024-07-04 [email protected] Roll Packages from d2705fb to 754de19 (3 revisions) (flutter/flutter#151315) 2024-07-04 [email protected] Roll Flutter Engine from 2b6bb516e7e6 to 79a91e38c587 (2 revisions) (flutter/flutter#151314) 2024-07-04 [email protected] Roll Flutter Engine from 8e2d05fa95d7 to 2b6bb516e7e6 (2 revisions) (flutter/flutter#151299) 2024-07-04 [email protected] Roll Flutter Engine from 4190543cb093 to 8e2d05fa95d7 (13 revisions) (flutter/flutter#151293) 2024-07-03 [email protected] Roll pub packages (flutter/flutter#151203) 2024-07-03 [email protected] Fix invalid URL suggestion for gradle incompatability (flutter/flutter#150999) 2024-07-03 [email protected] Cupertino transparent navigation bars (flutter/flutter#149102) 2024-07-03 [email protected] Prepares semantics_update_test for upcoming link URL change (flutter/flutter#151261) 2024-07-03 [email protected] Add a message about spam/brigading (flutter/flutter#150583) 2024-07-03 [email protected] PinnedHeaderSliver example based on the iOS Settings AppBar (flutter/flutter#151205) 2024-07-03 [email protected] Update deprecation policy (flutter/flutter#151257) 2024-07-03 [email protected] SliverFloatingHeader (flutter/flutter#151145) 2024-07-03 [email protected] Remove warning when KGP version not detected (flutter/flutter#151254) 2024-07-03 [email protected] Feat: Add withOpacity to gradient (flutter/flutter#150670) 2024-07-03 [email protected] Fix references in examples (flutter/flutter#151204) 2024-07-03 [email protected] Fix link in tree hygene doc (flutter/flutter#151235) 2024-07-03 [email protected] content dimensions are not established get controller value error (flutter/flutter#148938) 2024-07-03 [email protected] chore: fix typos and link broken (flutter/flutter#150402) 2024-07-03 [email protected] Add example of goldenFileComparator usage in widget tests (flutter/flutter#150422) 2024-07-03 [email protected] Fix project name fallback (flutter/flutter#150614) 2024-07-03 [email protected] Roll Flutter Engine from a3e61c0fd1c2 to 4190543cb093 (1 revision) (flutter/flutter#151241) 2024-07-03 [email protected] Roll Flutter Engine from 8274f54f11be to a3e61c0fd1c2 (2 revisions) (flutter/flutter#151237) 2024-07-03 [email protected] Force regeneration of platform-specific manifests before running performance tests (flutter/flutter#151003) 2024-07-03 [email protected] Handle a SocketException thrown when sending the browser close command to Chrome (flutter/flutter#151197) 2024-07-03 [email protected] Roll Flutter Engine from a02e3f673da3 to 8274f54f11be (4 revisions) (flutter/flutter#151226) 2024-07-03 [email protected] Roll Flutter Engine from c5c0c54d6d1d to a02e3f673da3 (1 revision) (flutter/flutter#151212) 2024-07-03 [email protected] Roll Flutter Engine from 44278941443e to c5c0c54d6d1d (9 revisions) (flutter/flutter#151208) 2024-07-02 [email protected] Fix scheduler event loop being stuck due to task with Priority.idle (flutter/flutter#151168) 2024-07-02 [email protected] Fix result propagation in RenderSliverEdgeInsetsPadding.hitTestChildren (flutter/flutter#149825) 2024-07-02 [email protected] docImports for flutter_test (flutter/flutter#151189) 2024-07-02 [email protected] Interactable ScrollView content when settling a scroll activity (flutter/flutter#145848) 2024-07-02 [email protected] [flutter_tools] Update the mapping for the Dart SDK internal URI (flutter/flutter#151170) 2024-07-02 [email protected] Roll pub packages (flutter/flutter#151129) 2024-07-02 [email protected] Fix typo (flutter/flutter#151192) 2024-07-02 [email protected] [tool] Fix `stdin.flush` calls on processes started by `FakeProcessManager` (flutter/flutter#151183) 2024-07-02 [email protected] Roll Flutter Engine from 433d360eee11 to 44278941443e (4 revisions) (flutter/flutter#151186) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected],[email protected] on the revert to ensure that a human ...

A sliver that shows its [child] when the user scrolls forward and hides it when the user scrolls backwards. Similar headers can be found in Google Photos and Facebook. This sliver is preferable to the general purpose SliverPersistentHeader for its relatively narrow use case because there's no need to create a SliverPersistentHeaderDelegate or to predict the header's size. https://github.com/flutter/flutter/assets/1377460/82b67dfb-5d38-4adf-9415-fc8527d0eb9f

k-ane · 2024-09-13T06:05:36Z

Hi @HansMuller I found a tiny bug here where I believe min() is being used instead of max()

This causes the following behaviour

CleanShot.2024-09-13.at.15.19.55.mp4

From a quick test on my machine just changing to max so that the overlap is used fixes the issue :)

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: scrolling Viewports, list views, slivers, etc. labels Jul 1, 2024

HansMuller force-pushed the floating_header_sliver branch 2 times, most recently from 6533bfb to dbc7208 Compare July 2, 2024 16:27

github-actions bot added d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos labels Jul 2, 2024

HansMuller requested a review from QuncCccccc July 2, 2024 16:30

HansMuller force-pushed the floating_header_sliver branch from 7e8a98a to 92cd153 Compare July 2, 2024 21:17

QuncCccccc reviewed Jul 2, 2024

View reviewed changes

QuncCccccc approved these changes Jul 2, 2024

View reviewed changes

HansMuller mentioned this pull request Jul 3, 2024

FocusManager.instance.toStringDeep hangs when flutter test specifies --wasm --web-renderer=skwasm dart-lang/sdk#56129

Closed

HansMuller added 6 commits July 3, 2024 11:26

incomplete

8d4ee9b

initial MVP

be892cd

Added tests

baf0135

updated

ad5fd0f

Added an example

130a54f

Added workaround for dart-lang/sdk#56129

608cc08

HansMuller force-pushed the floating_header_sliver branch from 6873abd to 608cc08 Compare July 3, 2024 18:27

github-actions bot added the f: focus Focus traversal, gaining or losing focus label Jul 3, 2024

HansMuller added autosubmit Merge PR when tree becomes green via auto submit App labels Jul 3, 2024

auto-submit bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Jul 3, 2024

HansMuller added the autosubmit Merge PR when tree becomes green via auto submit App label Jul 3, 2024

auto-submit bot merged commit d1e1500 into flutter:master Jul 3, 2024

HansMuller deleted the floating_header_sliver branch July 3, 2024 20:07

engine-flutter-autoroll mentioned this pull request Jul 4, 2024

Roll Flutter from af913a75b5d2 to 36e392630b98 (34 revisions) flutter/packages#7057

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 4, 2024

d1e1500 SliverFloatingHeader (flutter/flutter#151145)

49e7ad0

engine-flutter-autoroll mentioned this pull request Jul 4, 2024

Roll Flutter from af913a75b5d2 to 2a7fff6ab94a (35 revisions) flutter/packages#7058

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 4, 2024

d1e1500 SliverFloatingHeader (flutter/flutter#151145)

657e1ab

engine-flutter-autoroll mentioned this pull request Jul 4, 2024

Roll Flutter from af913a75b5d2 to 360bd54ff4c4 (36 revisions) flutter/packages#7059

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 4, 2024

d1e1500 SliverFloatingHeader (flutter/flutter#151145)

f29ac11

engine-flutter-autoroll mentioned this pull request Jul 4, 2024

Roll Flutter from af913a75b5d2 to a33c5302cbd0 (37 revisions) flutter/packages#7060

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 4, 2024

d1e1500 SliverFloatingHeader (flutter/flutter#151145)

cc5e734

engine-flutter-autoroll mentioned this pull request Jul 5, 2024

Roll Flutter from af913a75b5d2 to 602288d37082 (40 revisions) flutter/packages#7061

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 5, 2024

d1e1500 SliverFloatingHeader (flutter/flutter#151145)

83da40c

engine-flutter-autoroll mentioned this pull request Jul 5, 2024

Roll Flutter from af913a75b5d2 to fafd67d34d68 (41 revisions) flutter/packages#7062

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 5, 2024

d1e1500 SliverFloatingHeader (flutter/flutter#151145)

9be5f1b

Piinks mentioned this pull request Jul 12, 2024

Flutter Framework Team: Notable Commits #121415

Closed

k-ane mentioned this pull request Sep 13, 2024

SliverPersistentHeaderDelegate.build overlapsContent does not work reliably #26667

Open

	/// This example shows how to create a SliverFloatingHeader.
	/// This example shows how to create a [SliverFloatingHeader].

	/// scrolls forward, and disappears the user starts scrolling in the
	/// scrolls forward, and disappears when the user starts scrolling in the

	/// curves (Curves.easeInOut) for subsequent header animations.
	/// curves ([Curves.easeInOut]) for subsequent header animations.

	// The distance from the start of the header to the start of the viewport. Whent the
	// The distance from the start of the header to the start of the viewport. When the

	// because it's just abopve the viewport's starting edge). It's used to compute the
	// because it's just above the viewport's starting edge). It's used to compute the

	// True if the header has been laid at at least once (lastScrollOffset != null) and either:
	// True if the header has been laid out at least once (lastScrollOffset != null) and either:

		final double paintExtent = childExtent - effectiveScrollOffset;
		final double layoutExtent = childExtent - constraints.scrollOffset;

SliverFloatingHeader #151145

SliverFloatingHeader #151145

Uh oh!

Conversation

HansMuller commented Jul 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

QuncCccccc left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HansMuller commented Jul 3, 2024

Uh oh!

auto-submit bot commented Jul 3, 2024

Uh oh!

k-ane commented Sep 13, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

HansMuller commented Jul 1, 2024 •

edited

Loading

QuncCccccc left a comment •

edited

Loading