[Impeller] Using `Image` with specified `color` causes weird behavior

[michalsrutek]

Steps to reproduce

Using Image.asset and specifying non-null color causes the Widget's frame to be different - which can be seen when a Transform is used.

Minimum reproducible example at https://github.com/michalsrutek/flutter-image-asset-color-bug

1. Clone project
2. Drag along the grey area - to start rotating the image - using a Transform widget

Expected results

The frame for color: null is the same as the frame for color: (any-non-null-value).

Actual results

The frame is different.

Code sample

Code sample

Minimum reproducible example at https://github.com/michalsrutek/flutter-image-asset-color-bug

Image.asset(
    'assets/img.png',
    width: innerCircleWidth,
    height: innerCircleWidth,
    // !!! Using a color does something weird
    color: useColor ? Colors.orange : null,
),

Screenshots or Video

Screenshots / Video demonstration

Logs

Logs

not important

Flutter Doctor output

Doctor output

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.1, on macOS 13.6 22G120 darwin-arm64, locale en-CZ)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Android Studio (version 2023.1)
[✓] VS Code (version 1.86.2)
[✓] Connected device (3 available)
[✓] Network resources

! Doctor found issues in 1 category.

[danagbemava-nc]

Reproducible using the code sample provided above. This is not specific to asset images. This only happens with impeller and not with skia. See the recordings below

Impeller	SKIA
RPReplay_Final1708937621.MP4	RPReplay_Final1708937319.MP4

updated sample

import 'dart:math' as math;

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

final class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Image Demo')),
        body: const Center(
          child: Padding(
            padding: EdgeInsets.all(16),
            child: DraggableWidget(
              frontBroken: ImageWidget(useColor: true),
              backBroken: ImageWidget(useColor: true),
              frontWorking: ImageWidget(useColor: false),
              backWorking: ImageWidget(useColor: false),
            ),
          ),
        ),
      ),
    );
  }
}

final class ImageWidget extends StatelessWidget {
  final bool useColor;

  const ImageWidget({super.key, required this.useColor});

  @override
  Widget build(BuildContext context) {
    const double outerCircleWidth = 210;
    const double innerCircleWidth = 170;

    return SizedBox(
      width: outerCircleWidth,
      child: Container(
        width: innerCircleWidth,
        decoration: BoxDecoration(
          color: Colors.grey.shade300,
        ),
        child: SizedBox(
          width: outerCircleWidth,
          height: outerCircleWidth,
          child: Center(
            child: Image.network(
              'https://storage.googleapis.com/cms-storage-bucket/c823e53b3a1a7b0d36a9.png',
              width: innerCircleWidth,
              height: innerCircleWidth,
              // !!! Using a color does something weird
              color: useColor ? Colors.orange : null,
            ),
          ),
        ),
      ),
    );
  }
}

final class DraggableWidget extends StatefulWidget {
  final Widget frontBroken;
  final Widget backBroken;

  final Widget frontWorking;
  final Widget backWorking;

  const DraggableWidget({
    super.key,
    required this.frontBroken,
    required this.backBroken,
    required this.frontWorking,
    required this.backWorking,
  });

  @override
  State<DraggableWidget> createState() => _DraggableWidgetState();
}

class _DraggableWidgetState extends State<DraggableWidget> {
  double _horizontalDragInDegrees = 0;
  double get _horizontalDragInRadians =>
      (_horizontalDragInDegrees * math.pi) / 180;

  bool get _showingFront =>
      (_horizontalDragInDegrees <= 90 || _horizontalDragInDegrees >= 270);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onHorizontalDragUpdate: (details) {
        setState(() {
          _horizontalDragInDegrees += details.delta.dx * 1.618;
        });
      },
      child: Column(
        children: [
          Text('Drag degrees: ${-_horizontalDragInDegrees.toInt()}'),
          const SizedBox(height: 24),
          const Text("Incorrect ❌"),
          const SizedBox(height: 24),
          _buildFlippableWidget(
            front: widget.frontBroken,
            back: widget.backBroken,
          ),
          const SizedBox(height: 48),
          const Text("Correct ✅"),
          const SizedBox(height: 24),
          _buildFlippableWidget(
            front: widget.frontWorking,
            back: widget.backWorking,
          ),
        ],
      ),
    );
  }

  Widget _buildFlippableWidget({required Widget front, required Widget back}) {
    return Transform(
      transform: Matrix4.identity()
        ..setEntry(3, 2, 0.001)
        ..rotateY(-_horizontalDragInRadians),
      alignment: Alignment.center,
      child: _showingFront ? front : back,
    );
  }
}

flutte doctor -v

[✓] Flutter (Channel stable, 3.19.1, on macOS 14.3.1 23D60 darwin-arm64, locale en-GB)
    • Flutter version 3.19.1 on channel stable at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision abb292a07e (5 days ago), 2024-02-20 14:35:05 -0800
    • Engine revision 04817c99c9
    • Dart version 3.3.0
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode-15.2.0.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.14.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.1)
    • Android Studio at /Users/nexus/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 17.0.7+0-17.0.7b1000.6-10550314)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5)
    • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 77.2.2
    • Dart plugin version 232.10286

[✓] VS Code (version 1.86.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.82.0

[✓] Connected device (4 available)
    • Nexus (mobile)       • 00008020-001875E83A38002E • ios            • iOS 17.3.1 21D61
    • Dean’s iPad (mobile) • 00008103-000825C811E3401E • ios            • iOS 17.3.1 21D61
    • macOS (desktop)      • macos                     • darwin-arm64   • macOS 14.3.1 23D60 darwin-arm64
    • Chrome (web)         • chrome                    • web-javascript • Google Chrome 121.0.6167.184

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.20.0-13.0.pre.31, on macOS 14.3.1 23D60 darwin-arm64, locale en-GB)
    • Flutter version 3.20.0-13.0.pre.31 on channel master at /Users/nexus/dev/sdks/flutters
    ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision d8503febb1 (4 hours ago), 2024-02-25 23:42:25 -0500
    • Engine revision fd3136782a
    • Dart version 3.4.0 (build 3.4.0-175.0.dev)
    • DevTools version 2.33.0-dev.11
    • 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 34.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode-15.2.0.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.14.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.1)
    • Android Studio at /Users/nexus/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 17.0.7+0-17.0.7b1000.6-10550314)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5)
    • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 77.2.2
    • Dart plugin version 232.10286

[✓] VS Code (version 1.86.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.82.0

[✓] Connected device (5 available)
    • Nexus (mobile)                  • 00008020-001875E83A38002E • ios            • iOS 17.3.1 21D61
    • Dean’s iPad (mobile)            • 00008103-000825C811E3401E • ios            • iOS 17.3.1 21D61
    • macOS (desktop)                 • macos                     • darwin-arm64   • macOS 14.3.1 23D60 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad     • darwin         • macOS 14.3.1 23D60 darwin-arm64
    • Chrome (web)                    • chrome                    • web-javascript • Google Chrome 121.0.6167.184

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

[jonahwilliams]

Something is going wrong with how we're applying the image filter here. We should be able to build a minimal repro with the linked issues transform matrix.