Skip to content

Can't capture the output of a BackdropFilterLayer without painting it to the screen #170792

@timcreatedit

Description

@timcreatedit

Steps to reproduce

For my implementation of Liquid Glass I need a way to capture an image of a BackdropFilterLayer to pass into my shader, but the image shouldn't actually be painted to the screen.

What I've tried is the same approach I use to paint foreground masks:

// Semi-pseudo code

class MyLayer extends ContainerLayer {
  @override
  void addToScene(SceneBuilder builder) {
    // I can't capture an image of this scene without the builder being invalid afterwards
   super.addToScene(builder);
  }

  Image captureBlurredBackground() {
    // And this way, the actual current background is not included in the scene.
    final builder = ui.SceneBuilder()..pushBackdropFilter(ImageFilter.shader(shader));
    return builder.build().toImageSync(100, 100);
  }
}

However, this builder doesn't actually pick up on the Backdrop of the scene that the app is built in.

I also couldn't find any way to capture the scene that is being built in addToScene.

Expected results

I should be able to capture the output of a BackdropFilterLayer without having to paint it to the screen.

Actual results

I can't :)

Code sample

see above

Screenshots or Video

No response

Logs

No response

Flutter Doctor output

Doctor output
[✓] Flutter (Channel stable, 3.32.4, on macOS 15.5 24F74 darwin-arm64, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.2)
[✓] VS Code (version 1.101.0)
[✓] Connected device (3 available)
    ! Error: Browsing on the local area network for iPhone von mir. Ensure the
      device is unlocked and attached with a cable or associated with the same local
      area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)
    ! Error: Browsing on the local area network for Tim’s iPad. Ensure the device is
      unlocked and attached with a cable or associated with the same local area
      network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources

Metadata

Metadata

Assignees

Labels

P3Issues that are less important to the Flutter projectc: new featureNothing broken; request for a new capabilityc: proposalA detailed proposal for a change to Flutterengineflutter/engine related. See also e: labels.frameworkflutter/packages/flutter repository. See also f: labels.team-engineOwned by Engine teamtriaged-engineTriaged by Engine teamwaiting for customer responseThe Flutter team cannot make further progress on this issue until the original reporter responds

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions