Skip to content

Commit

Permalink
No shrinking for BackdropFilter's cull rect (flutter#28174)
Browse files Browse the repository at this point in the history
* No shrinking for BackdropFilter's cull rect

This will be a breaking change. Our old behavior may generate confusions
for a sample app like our added golden test: Skia will shrink the cull
rect (and thus the filtered area) to the text. The new behavior will
fill the BackdropFilter to its parent/ancestor clip. This is more
in align with our clip behaviors (no clip by default).

If this breaks your app, wrap the BackdropFilter with a ClipRect.

[wip] The golden images are not uploaded yet. I'll wait for the initial
round of review to approve the golden test before uploading them.

* Statically define the callback

* Add TODO to remind the hacking code removal

* Nit fix

* Update goldens
  • Loading branch information
liyuqian authored and Piinks committed Mar 15, 2019
1 parent e5696c2 commit 0067efc
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 1 deletion.
11 changes: 10 additions & 1 deletion packages/flutter/lib/src/rendering/proxy_box.dart
Original file line number Diff line number Diff line change
Expand Up @@ -1033,11 +1033,20 @@ class RenderBackdropFilter extends RenderProxyBox {
@override
bool get alwaysNeedsCompositing => child != null;

// TODO(liyuqian): remove this after updating the engine BackdropFilterLayer.
void _addTrasnparentPaint(PaintingContext context, Offset offset) {
// Draw a fully transparent paint to make sure that the cull rect won't be
// shrunk by Skia.
final Paint transparentPaint = Paint()..color = const Color(0x00000000);
context.canvas.drawPaint(transparentPaint);
super.paint(context, offset);
}

@override
void paint(PaintingContext context, Offset offset) {
if (child != null) {
assert(needsCompositing);
context.pushLayer(BackdropFilterLayer(filter: _filter), super.paint, offset);
context.pushLayer(BackdropFilterLayer(filter: _filter), _addTrasnparentPaint, offset);
}
}
}
Expand Down
50 changes: 50 additions & 0 deletions packages/flutter/test/widgets/backdrop_filter_test.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'dart:io';
import 'dart:ui';

import 'package:flutter/widgets.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:flutter/material.dart';

void main() {
testWidgets('BackdropFilter\'s cull rect does not shrink', (WidgetTester tester) async {
await tester.pumpWidget(
MaterialApp(
home: Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Text('0 0 ' * 10000),
Center(
// ClipRect needed for filtering the 200x200 area instead of the
// whole screen.
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 5.0,
sigmaY: 5.0,
),
child: Container(
alignment: Alignment.center,
width: 200.0,
height: 200.0,
child: const Text('Hello World'),
),
),
),
),
],
)
)
)
);
await expectLater(
find.byType(RepaintBoundary).first,
matchesGoldenFile('backdrop_filter_test.cull_rect.1.png'),
skip: !Platform.isLinux,
);
});
}

0 comments on commit 0067efc

Please sign in to comment.