ColorFilter on Android/Interpeller leads to garbage on screen #163466
Description
Steps to reproduce
- mini app to reproduce is attached. needs an image "KaisheimerHof.jpg" next to main.dart in lib which needs to be added to your pubspec.yaml
- Run app and press on "+"
- Will show garbage on screen
- uncomment // Image( width: 70, height: 90, fit: BoxFit.cover, image: AssetImage( 'lib/KaisheimerHof.jpg' ) ) and comment out the three lines below it that use the Colorfilter to make the image greyscale, and the app looks fine.
- app always looks fine on OS X and Web, not on Android from 3.29
- A similar bug was was there in 3.28, but only on older device (I have an old Samsung A51 tablet)
- Now it is also present on more recent device "Sasung S23 FE phone" and the output looks worse than it did previously.
Expected results
Actual results
Code sample
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@OverRide
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@OverRide
State createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
int _counter = 0;
void _incrementCounter()
{
_counter ++;
int selectedQuest = -1;
showModalBottomSheet<void>(
context: context,
isScrollControlled: true,
backgroundColor: Colors.transparent,
builder: (BuildContext context)
{
return StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only( topRight: Radius.circular(15.0), topLeft: Radius.circular(15.0) ),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Colors.blue, Colors.green] ),
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(80),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(0, 4) ) ] ),
height: 700,
child: Padding(
padding: EdgeInsets.all( 20 ),
child:
Column(
children: <Widget> [
Expanded( child:
ListView.builder(
padding: const EdgeInsets.all(8),
itemCount: 7,
itemBuilder: (BuildContext context, int index)
{
return ListTile(
title: Row( children: <Widget> [
// Image( width: 70, height: 90, fit: BoxFit.cover, image: AssetImage( 'lib/KaisheimerHof.jpg' ) ),
ColorFiltered(
colorFilter: ColorFilter.mode( Colors.grey, BlendMode.saturation ),
child: Image( width: 70, height: 90, fit: BoxFit.cover, image: AssetImage( 'lib/KaisheimerHof.jpg' ) )
),
SizedBox( width: 20 ),
Expanded( child: Text( "this is text" ) ) ] )
,
onTap: ()=> setState(()=> selectedQuest = index ),
selectedColor: Colors.white,
selected: selectedQuest == index );
}
)
),
SizedBox( width: 20, height: 10 ),
Padding( padding: EdgeInsets.all( 0 ), child: Divider( color: Colors.white ) ),
Row( children: <Widget> [
Expanded( child: SizedBox( width: 20, height: 20 ) ),
Padding( padding: EdgeInsets.all( 10 ), child: ElevatedButton( child: Text( 'Back' ),
onPressed: () {
Navigator.of(context).pop();
} ) ),
] ) // Row
]
) ) );
} );
} );
}
@OverRide
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('You have pushed the button this many times:'),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
Screenshots or Video
Screenshots / Video demonstration
[Upload media here]
Logs
Logs
[Paste your logs here]Flutter Doctor output
flutter doctor -v
[!] Flutter (Channel stable, 3.29.0, on macOS 15.3 24D60 darwin-arm64, locale de-DE) [750ms]
• Flutter version 3.29.0 on channel stable at /Users/robert/flutter
! The dart binary is not on your path. Consider adding /Users/robert/flutter/bin to your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 35c388a (7 days ago), 2025-02-10 12:48:41 -0800
• Engine revision f73bfc4
• Dart version 3.7.0
• DevTools version 2.42.2
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git"
directly to perform update checks and upgrades.
[!] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [749ms]
• Android SDK at /Users/robert/Library/Android/sdk