[iOS] [Impeller] Flutter 3.27 BoxShadow.spreadRadius draws black box artefact around widget on physical iOS device, not on simulator #162128
Description
Steps to reproduce
- Use Flutter 3.27 (tested on 3.27.2 and 3.27.3) or master
- Run the code sample on a physical iOS device (tested on iOS 18.2.1). I can not reproduce this on an iOS simulator running iOS 18.2.
- Observe the black box artefacts around the image widgets.
- Commenting out
spreadRadiusremoves black box artefacts. - Running the same code on Android produces no such artefacts.
- Running the same code on iOS (physical device and simulator) using
--no-enable-impellerproduces no such artefacts. - Running the same code sample on Flutter 3.24.5 produces no such artefacts on iOS (physical device and simulator)### Expected results
No black box artefacts around images.
Actual results
Black box artefacts around images.
Code sample
Code sample
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
static const String title = 'BoxShadow Impeller iOS Glitch';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: title,
home: const ExamplePage(title: title),
);
}
}
class ExamplePage extends StatelessWidget {
const ExamplePage({
super.key,
required this.title,
});
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: ListView.separated(
padding: const EdgeInsets.all(24),
itemCount: 5,
separatorBuilder: (_, __) => const SizedBox(height: 16),
itemBuilder: (_, int index) =>
ExampleRow(imageUrl: 'https://picsum.photos/80/60?image=$index'),
),
);
}
}
class ExampleRow extends StatelessWidget {
const ExampleRow({
super.key,
required this.imageUrl,
});
final String imageUrl;
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(4),
clipBehavior: Clip.antiAlias,
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: const Color.fromRGBO(0, 0, 0, 0.4),
),
child: Align(
alignment: Alignment.center,
child: DecoratedBox(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
offset: Offset(0, 8),
blurRadius: 32,
spreadRadius: -40, // Broken in Flutter 3.27
),
BoxShadow(
color: Colors.grey.withOpacity(0.1),
offset: Offset(0, 2),
blurRadius: 8,
spreadRadius: -1, // Broken in Flutter 3.27
),
],
),
child: SizedBox(
width: 80,
height: 60,
child: ClipRRect(
borderRadius: BorderRadius.circular(4),
child: Image.network(imageUrl, fit: BoxFit.cover),
),
),
),
),
),
);
}
}You can also find an example project exhibiting the bug here https://github.com/techouse/flutter_boxshadow_ios_impeller_glitch_example
Screenshots or Video
| Flutter 3.24.5 ✅ | Flutter 3.27.3 ❌ | Flutter master ❌ |
|---|---|---|
 |
 |
 |
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
[✓] Flutter (Channel stable, 3.27.3, on macOS 15.2 24C101 darwin-arm64, locale en-GB)
• Flutter version 3.27.3 on channel stable at /Users/techouse/fvm/versions/3.27.3
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision c519ee916e (2 days ago), 2025-01-21 10:32:23 -0800
• Engine revision e672b006cb
• Dart version 3.6.1
• DevTools version 2.40.2
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
• Android SDK at /Users/techouse/Library/Android/sdk
• Platform android-35, build-tools 35.0.0
• ANDROID_HOME = /Users/techouse/Library/Android/sdk
• Java binary at: /Users/techouse/Applications/Android Studio Koala Feature Drop 2024.1.2 Patch 1.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 16.2)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 16C5032a
• CocoaPods version 1.16.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2024.1)
• Android Studio at /Users/techouse/Applications/Android Studio Koala Feature Drop 2024.1.2 Patch 1.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 17.0.11+0-17.0.11b1207.24-11852314)
[✓] Android Studio (version 2024.2)
• Android Studio at /Users/techouse/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 21.0.4+-12422083-b607.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2024.3.2.1)
• IntelliJ at /Users/techouse/Applications/IntelliJ IDEA Ultimate.app
• Flutter plugin version 83.0.4
• Dart plugin version 243.23654.44
[✓] Connected device (4 available)
• techouse’s iPhone (mobile) • XXXXXXXX-XXXXXXXXXXXXXXXX • ios • iOS 18.2.1 22C161
• macOS (desktop) • macos • darwin-arm64 • macOS 15.2 24C101 darwin-arm64
• Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 15.2 24C101 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 131.0.6778.267
[✓] Network resources
• All expected network resources are available.
• No issues found!Metadata
Metadata
Assignees
Labels
High-priority issues at the top of the work listIt was better in the past than it is nowImpeller rendering backend issues and features requestsflutter/engine related. See also e: labels.Found to occur in 3.27Found to occur in 3.29The issue has been confirmed reproducible and is ready to work oniOS applications specificallyIssue is closed as already fixed in a newer versionOwned by Engine teamTriaged by Engine team