Impeller: Animated Widget placed above ImageFiltered with Blur causes UI Glitches #135013
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
Steps to reproduce
- Run the sample code provided - with a Stack containing a Blurred Container below an Animated Element (in this case a animating
CupertinoActivityIndicator)
I was able to reproduce this on:
3.15.0-15.1.prewith Impeller3.13.4with Impeller
The issue does not occur when using Skia.
(I am able to work around the glitches using BackdropFilter, but I am not sure if this is proper fix - I am worried about performance issues)
Expected results
The animation and surrounding box should be drawn properly.
Actual results
The surrounding box of the animation has glitches. Please see screenshot.
Code sample
Code sample
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
ImageFiltered(
imageFilter: ImageFilter.blur(sigmaX: 40, sigmaY: 40),
child: Container(
decoration: const BoxDecoration(
gradient: RadialGradient(
radius: 0.3,
colors: [Colors.pink, Colors.green],
),
),
),
),
const Center(
child: CupertinoActivityIndicator(
radius: 30,
animating: true,
),
)
],
),
);
}
}
Screenshots or Video
Screenshots / Video demonstration
Screenshots are taken using Flutter 3.13.4.
Skia (Expected Result):
Impeller (Actual Result):
Logs
No Logs
[Paste your logs here]Flutter Doctor output
Doctor output
[✓] Flutter (Channel stable, 3.13.4, on macOS 13.5.2 22G91 darwin-arm64, locale en-AT)
• Flutter version 3.13.4 on channel stable at /Users/stpu/fvm/versions/3.13.4
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 367f9ea16b (6 days ago), 2023-09-12 23:27:53 -0500
• Engine revision 9064459a8b
• Dart version 3.1.2
• DevTools version 2.25.0
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
• Android SDK at /Users/stpu/Library/Android/sdk
• Platform android-33, build-tools 32.1.0-rc1
• ANDROID_HOME = /Users/stpu/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
• Xcode at /Applications/Xcode-14.3.app/Contents/Developer
• Build 14E222b
• CocoaPods version 1.12.1
[✓] Android Studio (version 2021.3)
• 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.13+0-b1751.21-8125866)
[✓] VS Code (version 1.82.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.72.0
[✓] Connected device (2 available)
• iPhone 11 Pro (mobile) • 8502B9A2-1553-4219-93B0-21E155C971E7 • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator)
• macOS (desktop) • macos • darwin-arm64 • macOS 13.5.2 22G91 darwin-arm64
[✓] Network resources
• All expected network resources are available.
• No issues found!