[Impeller] Backdrop filters sometimes escape clips when drawn after platform views. #153737
Description
Adding clipped backdrop blurs to the Wondrous tab buttons reveals buggy behavior, including a clip escape.
bdfbug.mov
Wondrous diff:
diff --git a/lib/ui/screens/wonder_details/wonder_details_tab_menu.dart b/lib/ui/screens/wonder_details/wonder_details_tab_menu.dart
index d4ab611..3f41e85 100644
--- a/lib/ui/screens/wonder_details/wonder_details_tab_menu.dart
+++ b/lib/ui/screens/wonder_details/wonder_details_tab_menu.dart
@@ -1,3 +1,5 @@
+import 'dart:ui';
+
import 'package:wonders/common_libs.dart';
class WonderDetailsTabMenu extends StatelessWidget {
@@ -220,16 +222,23 @@ class _TabBtn extends StatelessWidget {
selected: selected,
label: tabLabel,
child: ExcludeSemantics(
- child: AppBtn.basic(
+ child: ElevatedButton(
onPressed: () => onTap(index),
- semanticLabel: label,
- minimumSize: _isVertical ? Size(crossBtnSize, mainAxisSize) : Size(mainAxisSize, crossBtnSize),
- // Image icon
- child: Image.asset(
- iconImgPath,
- height: iconSize,
- width: iconSize,
- color: selected ? null : color,
+ clipBehavior: Clip.hardEdge,
+ child: BackdropFilter(
+ filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
+ child: AppBtn.basic(
+ onPressed: () => onTap(index),
+ semanticLabel: label,
+ minimumSize: _isVertical ? Size(crossBtnSize, mainAxisSize) : Size(mainAxisSize, crossBtnSize),
+ // Image icon
+ child: Image.asset(
+ iconImgPath,
+ height: iconSize,
+ width: iconSize,
+ color: selected ? null : color,
+ ),
+ ),
),
),
),