fyi @hellohuanlin (I think you've worked with this previously)

Hi @Hari-07, for ease of review & future reference, could you clarify (in PR description) what the blues and reds are in the screenshots? Also please address the gemini comments first? Thanks!

Hi @Hari-07, for ease of review & future reference, could you clarify (in PR description) what the blues and reds are in the screenshots? Also please address the gemini comments first? Thanks!

Sure yeah I just added the code snippet, had forgotten that. Will address the gemini comments when I get some time next

The android changes are just to handle the signature change. I think its better to have explicit empty arg than have it be optional and implicit. Happy to revert that if any of you would prefer that

Hey @Hari-07, thanks for continuing to drill down on the platform view issues. Based on your previous contributions would you be interested in being sponsored for commit access? In addition to other rights, this means only one reviewer is required for your code, not two: https://github.com/flutter/flutter/blob/master/docs/contributing/Contributor-access.md
Feel free to DM me on Discord (I tried to DM you but the message bounced).

Hey sure that sounds great , I tried messaging you on discord now too and it said that you only receive messages from friends, and it didn't let me send a friend request either. Not sure what's up there

@Hari-07 hi, could you clarify in the PR description which screenshot is BEFORE and which is AFTER? and could you elaborate what "overlay" and "underlay" are in the PR description?

Hi, I am still a bit confused by the PR description.

Currently the underlay is always clipped by platform view in a rectangular shape. This isn't correct because the platform view can have clips on it such as a rounded rect or a custom path even

By underlay, are you referring to the blue background with "Some random text"? What's the incorrect result of "clipped in a rectangular shape"? The blue background widget with text seems to render correctly.

The overlay was also always drawn in a rectangular shape

By overlay do you mean the center blue box?

Blurred text can only be part of the underlay because there's no background information in overlay.

Which blurred text? The upper left corner or the center text?

When a blured text was in the corner of a backdrop filter containing a platform view, the underlay which contains the blurred text got sliced away and overlay had unblurred text

which blur text? Also in your code example, the backdrop filter does not contain a platform view, but rather it's a sibling of the platform view on a Stack widget.

Perhaps its easier to understand with a textured background rather than text. On current main

Without Platform View

  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned.fill(
          child: Image.network(
            'https://images.unsplash.com/photo-1605106702842-01a887a31122?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8R2VvbWV0cnl8ZW58MHx8MHx8fDA%3D',
            fit: BoxFit.cover,
          ),
        ),
        BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
          child: Center(
            child: Container(height: 100, width: 100, color: Colors.blueAccent),
          ),
        ),
      ],
    );
  }

With Platform View

  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned.fill(
          child: Image.network(
            'https://images.unsplash.com/photo-1605106702842-01a887a31122?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8R2VvbWV0cnl8ZW58MHx8MHx8fDA%3D',
            fit: BoxFit.cover,
          ),
        ),
        Center(
          child: AspectRatio(
            aspectRatio: 1,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(250),
              child: const PlatformViewWidget(), // platform view on top
            ),
          ),
        ),
        BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
          child: Center(
            child: Container(height: 100, width: 100, color: Colors.blueAccent),
          ),
        ),
      ],
    );
  }

In your code example, the backdrop filter does not contain a platform view, but rather it's a sibling of the platform view on a Stack widget.

By Blur containing platform view I meant - the Blur blurs a platform view. If it contained as in has a child that's a platform view the platform view wouldn't be itself getting blurred

Lets say these are the layers of the stack

When correctly rendered it should look like

Currently the portion of the UI that's rendered by flutter but within the Platform View Rect is unblurred

Current Rendering System

Note that z-index is preserved

Updated Rendering System

The primary change is that when preserve_underlay is true the background canvas (underlay) isn't clipped out

if (!preserve_underlay) {
        // Clip the background canvas, so it doesn't contain any of the pixels
        // drawn on the overlay layer.
        background_canvas->ClipRect(full_joined_rect, DlClipOp::kDifference);
      }

and that the overlay itself is clipped to the exact path of the platform view rather than the rect occupied by the platform view

if (preserveUnderlayForViews.find(viewId) != preserveUnderlayForViews.end()) {
      ApplyComplexClipToOverlayCanvas(overlayCanvas, self.currentCompositionParams[viewId]);
    }

With the updated engine code the same code with platform view looks like

I did actually think about that case.

There are a couple issues. What I showed above is actually a slight simplification. Cos actually the background image isn't part of the overlay at all. The overlay only contains objects drawn in front of the platform view.

In the current scenario when overlay is transparent in the region that's inside the rect but outside platform view (4 corners) and we clip the underlay as well, its actually a different layer that's drawn even behind the underlay that shows up.

So blurring the overlay wouldn't solve the bug that I originally pointed out.
So unless we sample behind the platform view, then propogate that to the overlay this wouldn't work
Which seems more expensive than just rendering the area occupied by the platform view twice

The issue you pointed out is separete

To solve that I did think about blurring the overlay as well. As far I can say, that's a one line change here to not skip on applying the blur (not sure what other side effects that may have) but there are some issues with that

• There's no background to sample so if the thing being blurred is translucent it wont be correct

• Another problem is the edge of the underlay and overlay, which is both non platform view, would have a visible artifact at the border because of how blur works. The edges on either side has no information about the other side.

I used a different image to hopefully make it clearer

Thanks for providing new details. This will be on the top of my review stack. Will try to get to it this week.

For blurring over the platform and solving the edge at once, I did find a solution that I posted about here. But that's a wider change I need to think about more

There are a couple issues. What I showed above is actually a slight simplification. Cos actually the background image isn't part of the overlay at all. The overlay only contains objects drawn in front of the platform view.

Could you provide a similar diagram to what was provided? I will be very helpful for future reference. Thanks!

Hey @hellohuanlin , have made the nit changes and marked as ready again. Apologies for the delays