Skip to content

ImageFiltered is displayed incorrectly. #111863

@ColdPaleLight

Description

@ColdPaleLight

Steps to Reproduce

Run the reproduce code and click the yellow button.

expected result

When the button is clicked, the red diamond will only have an opacity change, no translation.

actual result

When the button is clicked, the red diamond is translated

Screenrecorder-2022-09-19-16-34-57-284.mp4

Reproduce code

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('title')),
        body: MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return MyState();
  }
}

class MyState extends State<MyStatefulWidget> {
  bool enableOpacity = false;

  @override
  Widget build(BuildContext context) {
    var content = buildContent();
    if (enableOpacity) {
      content = Opacity(
        opacity: 0.5,
        child: content,
      );
    }

    return Column(
      children: [content, buildButton()],
    );
  }

  InkWell buildButton() {
    return InkWell(
      child: Container(
          width: 200,
          height: 40,
          color: Colors.yellow,
          child: Text(
              'click me to ${enableOpacity ? 'disable' : 'enable'} opacity')),
      onTap: () => setState(() {
        enableOpacity = !enableOpacity;
      }),
    );
  }

  Widget buildContent() {
    return ImageFiltered(
        imageFilter: ui.ImageFilter.matrix(Float64List.fromList([
          1, 0, 0, 0, //
          0.5, 1, 0, 0, //
          0, 0, 1, 0, //
          0, 0, 0, 1, //
        ])),
        child: Container(
          color: Colors.red,
          width: 200,
          height: 200,
        ));
  }
}

cc @jonahwilliams @flar

flutter doctor -v

Details
[!] Flutter (Channel fix_transform_issue, 3.4.0-19.0.pre.339, on macOS 12.2.1 21D62 darwin-arm64 (Rosetta), locale zh-Hans-CN)
    • Flutter version 3.4.0-19.0.pre.339 on channel fix_transform_issue at /Users/bytedance/Develop/upstream/flutter
    ! Upstream repository https://github.com/ColdPaleLight/flutter.git is not a standard remote.
      Set environment variable "FLUTTER_GIT_URL" to https://github.com/ColdPaleLight/flutter.git to dismiss this error.
    • Framework revision f34836a381 (4 minutes ago), 2022-09-19 15:23:33 +0800
    • Engine revision b22a795011
    • Dart version 2.19.0 (build 2.19.0-214.0.dev)
    • DevTools version 2.17.0
    • Pub download mirror https://dart-pub.byted.org
    • Flutter download mirror https://storage.flutter-io.cn
    • 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 32.1.0-rc1)
    • Android SDK at /Users/bytedance/Library/Android/sdk
    • Platform android-32, build-tools 32.1.0-rc1
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13F100
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.2)
    • 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.12+0-b1504.28-7817840)

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

[✓] Connected device (3 available)
    • M2011K2C (mobile) • e717b6a0 • android-arm64  • Android 12 (API 31)
    • macOS (desktop)   • macos    • darwin-arm64   • macOS 12.2.1 21D62 darwin-arm64 (Rosetta)
    • Chrome (web)      • chrome   • web-javascript • Google Chrome 105.0.5195.125

[✓] HTTP Host Availability
    • All required HTTP hosts are available

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work listfound in release: 3.3Found to occur in 3.3found in release: 3.4Found to occur in 3.4frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer version

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions