MacosScaffold's main content area not scrolling under the blurring Toolbar

[ricard-v]

Description

Not really sure if it is a feature request but after reading the source code I am inclined to believe it might be an omission.

Anyway, looking at some native MacOS Apps, such as the actual AppStore, the navigation bar allows for content to scroll under while applying the well-known blurring translucency:

How to reproduce the same effect using this macos_ui package?

I started to dig in the source code of the Toolbar widget that can be supplied to the MacosScaffold and I did find the logic where the background is blurred:

Source code (shortened and simplified)

return MediaQuery(
      data: MediaQuery.of(context).copyWith(
        padding: EdgeInsets.only(
          left: !kIsWeb && isMacOS ? 70 : 0,
        ),
      ),
      child: ClipRect(
        child: BackdropFilter(
          filter: widget.decoration?.color?.opacity == 1
              ? ImageFilter.blur()
              : ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0), // <<<< HERE
          child: Container(
             ...
            ).copyWith(
              ...
            ),
            child: NavigationToolbar(
              middle: title,
              centerMiddle: widget.centerTitle,
              trailing: OverflowHandler(...),
                children: ...,
              middleSpacing: 8,
              leading: ...,
            ),
          ),
        ),
      ),
    );

Then I moved on to the source code of MacosScaffold. Unsurpringly, the various parts (toolbar, children), are laid out in a Stack.

But there is something that looks maybe wrong: if a Toolbar is defined, then a top padding based on the Toolbar's height is applied to the body part of the MacosScaffold which causes the body to be placed under the toolbar:

double topPadding = 0;
if (widget.toolBar != null) topPadding += widget.toolBar!.height;

[...]

// Content Area
Positioned(
      top: 0,
      width: width,
      height: height,
      child: MediaQuery(
      data: mediaQuery.copyWith(
            padding: EdgeInsets.only(top: topPadding), // << HERE
       ),
       child: _ScaffoldBody(children: children),
       ),
),

In order to have the translucency I am looking for, I have to remove this top padding so that the my main content starts drawing under the Toolbar and I have to set a background color with some opacity that I decided to set at 0.9:

But I have trouble getting the same effect as the AppStore...

Strangely, If I dot not ouch the source code and apply a completely transparent background color to my Toolbar there is a little of blurring:

(zoomed screenshot)

So, in conclusion, I believe it was meant for the Toolbar to have the translucent blurring background however, I don't know how I should get it working using the package as-is. I am not that well knowledgeable in Flutter, but I believe a way would be so that the ContentArea provides a safe area to draw content taking into account the Toolbar's height much like the Cupertino widgets does it for the TabBar.

Logs

Flutter doctor

[✓] Flutter (Channel stable, 3.3.8, on macOS 12.6.1 21G217 darwin-arm, locale fr-FR)
    • Flutter version 3.3.8 on channel stable at /Users/XXXXXX/workspace/others/flutter-sdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 52b3dc25f6 (13 days ago), 2022-11-09 12:09:26 +0800
    • Engine revision 857bd6b74c
    • Dart version 2.18.4
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/XXXXX/Library/Android/sdk/
    • Platform android-33, build-tools 33.0.0
    • ANDROID_HOME = ~/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.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
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[!] Proxy Configuration
    • HTTP_PROXY is set
    • NO_PROXY is xxxxx127.0.0.1
    ! NO_PROXY does not contain localhost
    • NO_PROXY contains 127.0.0.1
    ! NO_PROXY does not contain ::1

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.6.1 21G217 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 107.0.5304.110

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

[GroovinChip]

Hi @ricard-v, thanks for filing this issue.

The Toolbars and scrolling in the App Store seem to behave slightly differently in various places, and are reminiscent of Flutter's NestedScrollView and SliverAppBar.

Since the topPadding you reference is necessary for scrollable content in a MacosScaffold to be fully visible below a Toolbar before scrolling down, I believe that we would need to create a version of Toolbar that is compatible with NestedScrollView, a SliverToolbar if you will, that would build itself through a SliverPersistentHeaderDelegate. It could then be used in NestedScrollView.headerSliverBuilder.

@whiplashoo, any thoughts on this?

[whiplashoo]

@GroovinChip Indeed, since we need to keep the original Toolbar behavior, a separate, but similar Sliver version would be the way to go.

[GroovinChip]

@GroovinChip Indeed, since we need to keep the original Toolbar behavior, a separate, but similar Sliver version would be the way to go.

Excellent, thank you for confirming.

[GroovinChip]

@ricard-v check out #368 👀