[web][html] ImageFilter.matrix in BackdropFilter does not work

[guchengxi1994]

I was using magnifier with BackdropFilter and ImageFilter.matrix , but when I run codes with --web-renderer html , ImageFilter.matrix did not work well. Here are sample codes.

Code sample

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Homepage(),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    Matrix4 newMatrix = Matrix4.identity()..scale(1.5);

    return Scaffold(
        appBar: AppBar(title: Text("BackdropFilterDemo")),
        body: Stack(
          children: <Widget>[
            Container(
              alignment: Alignment.center,
              child: Text("BackdropFilterDemo" * 10),
            ),
            BackdropFilter(
              // filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
              filter: ImageFilter.matrix(newMatrix.storage),
              child: Container(
                color: Colors.white.withAlpha(0),
              ),
            )
          ],
        ));
  }
}

Here are results.

HTML	Canvaskit

[danagbemava-nc]

Reproducible using the code sample provided

Labeling for further insight from the team.

screenshots

HTML	Canvaskit

sample

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Homepage(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    Matrix4 newMatrix = Matrix4.identity()..scale(1.5);

    return Scaffold(
      appBar: AppBar(title: const Text("BackdropFilterDemo")),
      body: Stack(
        children: <Widget>[
          Container(
            alignment: Alignment.center,
            child: Text("BackdropFilterDemo" * 10),
          ),
          BackdropFilter(
            // filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
            filter: ImageFilter.matrix(newMatrix.storage),
            child: Container(
              color: Colors.white.withAlpha(0),
            ),
          )
        ],
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel stable, 3.0.5, on macOS 12.5 21G72 darwin-arm, locale en-GB)
    • Flutter version 3.0.5 at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1875d570e (4 weeks ago), 2022-07-13 11:24:16 -0700
    • Engine revision e85ea0e79c
    • Dart version 2.17.6
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • 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
    • 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.70.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.46.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.5 21G72 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 104.0.5112.79

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

• No issues found!

[✓] Flutter (Channel master, 3.1.0-0.0.pre.2166, on macOS 12.5 21G72 darwin-arm, locale en-GB)
    • Flutter version 3.1.0-0.0.pre.2166 on channel master at /Users/nexus/dev/sdks/flutters
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 87f1684476 (4 hours ago), 2022-08-08 23:00:11 -0700
    • Engine revision b6dd604d90
    • Dart version 2.19.0 (build 2.19.0-76.0.dev)
    • DevTools version 2.16.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • 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.70.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.46.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.5 21G72 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 104.0.5112.79

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

• No issues found!