[Impeller] nine-patch images not rendering correctly when a colorFilter is applied #176544
Description
Steps to reproduce
When a DecorationImage has an image configured with the centerSlice property (nine-patch image), and a colorFilter is applied (I am using BlendMode.srcIn), only the top-left patch in the nine-patch image is masked and displayed properly with the new color. The other 8 patches don't show at all.
I have only tested this on android.
This is the nine-patch image I am using:
Expected results
When I disable impeller with flutter run --no-enable-impeller and run the repro code, I see the full image with the correct color as expected:
Actual results
But when I don't disable impeller, only one of the patches in the nine-patch image is showing:
If you modify the Rect.fromLTRB values to (20, 20, 38, 38), you will see that the image now shows more of the background image. It looks like only the top-left patch is getting the color mask applied correctly.
Code sample
Code sample
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
image: DecorationImage(
colorFilter: ColorFilter.mode(Colors.blue, BlendMode.srcIn),
fit: BoxFit.fill,
image: AssetImage('assets/panel-border-000.png'),
centerSlice: Rect.fromLTRB(10, 10, 38, 38),
),
),
),
),
),
);
}
}pubspec.yaml snippet:
...
flutter:
uses-material-design: true
assets:
- assets/panel-border-000.pngScreenshots or Video
Logs
zip of performance trace during issue
[dart_devtools_2025-10-05_11_21_41.197.zip](https://github.com/user-attachments/files/22711034/dart_devtools_2025-10-05_11_21_41.197.zip)Flutter Doctor output
Doctor output
$ flutter doctor -v
[✓] Flutter (Channel stable, 3.35.5, on Fedora Linux 42 (Workstation Edition) 6.16.8-200.fc42.x86_64, locale en_US.UTF-8) [29ms]
• Flutter version 3.35.5 on channel stable at /home/shanebauman/development/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision ac4e799d23 (9 days ago), 2025-09-26 12:05:09 -0700
• Engine revision d3d45dcf25
• Dart version 3.9.2
• DevTools version 2.48.0
• Feature flags: enable-web, enable-linux-desktop, enable-macos-desktop, enable-windows-desktop, enable-android, enable-ios, cli-animations,
enable-lldb-debugging
[!] Android toolchain - develop for Android devices (Android SDK version 36.0.0) [161ms]
• Android SDK at /home/shanebauman/Android/Sdk
• Emulator version 35.6.11.0 (build_id 13610412) (CL:N/A)
✗ cmdline-tools component is missing.
Try installing or updating Android Studio.
Alternatively, download the tools from https://developer.android.com/studio#command-line-tools-only and make sure to set the ANDROID_HOME
environment variable.
See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/to/linux-android-setup for more details.
[✓] Chrome - develop for the web [8ms]
• Chrome at google-chrome
[✗] Linux toolchain - develop for Linux desktop [97ms]
✗ clang++ is required for Linux development.
It is likely available from your distribution (e.g.: apt install clang), or can be downloaded from https://releases.llvm.org/
✗ CMake is required for Linux development.
It is likely available from your distribution (e.g.: apt install cmake), or can be downloaded from https://cmake.org/download/
✗ ninja is required for Linux development.
It is likely available from your distribution (e.g.: apt install ninja-build), or can be downloaded from
https://github.com/ninja-build/ninja/releases
• pkg-config version 2.3.0
✗ GTK 3.0 development libraries are required for Linux development.
They are likely available from your distribution (e.g.: apt install libgtk-3-dev)
! Unable to access driver information using 'eglinfo'.
It is likely available from your distribution (e.g.: apt install mesa-utils)
[✓] Android Studio (version 2025.1.1) [7ms]
• Android Studio at /usr/local/android-studio
• 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.6+-13391695-b895.109)
[✓] VS Code (version 1.104.2) [6ms]
• VS Code at /usr/share/code
• Flutter extension version 3.120.0
[✓] Connected device (3 available) [134ms]
• sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64 • Android 16 (API 36) (emulator)
• Linux (desktop) • linux • linux-x64 • Fedora Linux 42 (Workstation Edition) 6.16.8-200.fc42.x86_64
• Chrome (web) • chrome • web-javascript • Google Chrome 141.0.7390.54
[✓] Network resources [335ms]
• All expected network resources are available.