Skip to content

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

New issue
New issue
Closed
Closed
[web][html] ImageFilter.matrix in BackdropFilter does not work#109207
Labels
P2Important issues not at the top of the work liste: web_htmlHTML rendering backend for Webengineflutter/engine related. See also e: labels.found in release: 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyr: solvedIssue is closed as solvedteam-webOwned by Web platform teamtriaged-webTriaged by Web platform team

Description

@guchengxi1994
guchengxi1994
opened on Aug 9, 2022

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

Activity

  1. danagbemava-nc
    added
    in triagePresently being triaged by the triage team
    on Aug 9, 2022
  2. danagbemava-nc
    changed the title [-]ImageFilter.matrix in BackdropFilter does not work when using "flutter run -d chrome --web-renderer html"[/-] [+][web][html] ImageFilter.matrix in BackdropFilter does not work[/+] on Aug 9, 2022

  3. danagbemava-nc commented on Aug 9, 2022

    @danagbemava-nc
    danagbemava-nc
    on Aug 9, 2022
    Member

    Reproducible using the code sample provided

    Labeling for further insight from the team.

    screenshots
    HTML Canvaskit
    Screenshot 2022-08-09 at 10 04 52 Screenshot 2022-08-09 at 10 11 08
    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!
  4. danagbemava-nc
    added
    engineflutter/engine related. See also e: labels.
    platform-webWeb applications specifically
    e: web_htmlHTML rendering backend for Web
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    found in release: 3.0Found to occur in 3.0
    found in release: 3.1Found to occur in 3.1
    and removed
    in triagePresently being triaged by the triage team
    on Aug 9, 2022
  5. yjbanov
    added
    P2Important issues not at the top of the work list
    on Aug 11, 2022
  6. flutter-triage-bot
    added
    multiteam-retriage-candidate
    team-webOwned by Web platform team
    triaged-webTriaged by Web platform team
    on Jul 8, 2023
  7. Hixie
    removed
    multiteam-retriage-candidate
    on Mar 6, 2024

  8. yjbanov commented on May 27, 2025

    @yjbanov
    yjbanov
    on May 27, 2025
    Contributor

    As the HTML renderer has been deprecated and removed from the default Flutter SDK, we're now closing all issues that affect only the HTML renderer. For more information, please see:

  9. yjbanov
    closed this as completedon May 27, 2025
  10. danagbemava-nc
    added
    r: solvedIssue is closed as solved
    on May 28, 2025

  11. github-actions commented on Jun 11, 2025

    @github-actions
    github-actionsBot
    on Jun 11, 2025 – with GitHub Actions

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

  12. github-actions
    locked as resolved and limited conversation to collaborators on Jun 11, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work liste: web_htmlHTML rendering backend for Webengineflutter/engine related. See also e: labels.found in release: 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyr: solvedIssue is closed as solvedteam-webOwned by Web platform teamtriaged-webTriaged by Web platform team

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions