[web] pushImageFilter not implemented

With the upcoming implementation of the ImageFiltered widget on iOS and Android, the web support for this widget is stubbed out similarly to the ColorFiltered widget. As a result, developers will see the following error if they try to use an ImageFiltered widget in their application:

The following UnimplementedError was thrown during a scheduler callback:
UnimplementedError

When the exception was thrown, this was the stack:
package:dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 196:49  throw_
package:build_web_compilers/lib/_engine/engine/surface/scene_builder.dart 174:5       pushImageFilter
package:flutter/src/rendering/layer.dart 1578:26                                      addToScene
package:flutter/src/rendering/layer.dart 442:5                                        [_addToSceneWithRetainedRendering]
package:flutter/src/rendering/layer.dart 1059:14                                      addChildrenToScene
package:flutter/src/rendering/layer.dart 1197:5                                       addToScene
package:flutter/src/rendering/layer.dart 442:5                                        [_addToSceneWithRetainedRendering]
package:flutter/src/rendering/layer.dart 1059:14                                      addChildrenToScene
package:flutter/src/rendering/layer.dart 2038:5                                       addToScene
package:flutter/src/rendering/layer.dart 442:5                                        [_addToSceneWithRetainedRendering]
package:flutter/src/rendering/layer.dart 1059:14                                      addChildrenToScene
package:flutter/src/rendering/layer.dart 1197:5                                       addToScene
package:flutter/src/rendering/layer.dart 442:5                                        [_addToSceneWithRetainedRendering]
package:flutter/src/rendering/layer.dart 1059:14                                      addChildrenToScene
package:flutter/src/rendering/layer.dart 1197:5                                       addToScene
package:flutter/src/rendering/layer.dart 442:5                                        [_addToSceneWithRetainedRendering]
package:flutter/src/rendering/layer.dart 1059:14                                      addChildrenToScene
package:flutter/src/rendering/layer.dart 1645:5                                       addToScene
package:flutter/src/rendering/layer.dart 796:5                                        buildScene
package:flutter/src/rendering/view.dart 230:36                                        compositeFrame
package:flutter/src/rendering/binding.dart 405:18                                     drawFrame
package:flutter/src/widgets/binding.dart 797:13                                       drawFrame
package:flutter/src/rendering/binding.dart 283:5                                      [_handlePersistentFrameCallback]
package:flutter/src/scheduler/binding.dart 1108:15                                    [_invokeFrameCallback]
package:flutter/src/scheduler/binding.dart 1047:9                                     handleDrawFrame
package:flutter/src/scheduler/binding.dart 963:5                                      [_handleDrawFrame]
package:build_web_compilers/lib/_engine/engine.dart 187:21                            <fn>

See flutter-team-archive/engine#14491 for the first part of this widget support in the Engine...

Engine support for ImageFiltered widget (#14491)

Engine support for ImageFiltered widget (flutter-team-archive#14491)

ColorFiltered Widget is also throwing the same error

@flar

Hi @flar
This seems fixed on the the latest master 1.22.0-2.0.pre.93, although the behavior is weird.

Code sample

import 'dart:ui';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Sample'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ImageFiltered(
                //Looks different on web when compared to Android and Windows
                imageFilter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
                child: Container(
                  width: 50,
                  height: 50,
                  color: Colors.red,
                ),
              ),
              //Still unimplemented
              /*ColorFiltered(
                colorFilter: ColorFilter.mode(Colors.blue, BlendMode.multiply),
                child: Container(
                  width: 50,
                  height: 50,
                  color: Colors.red,
                ),
              ),*/
            ],
          ),
        ),
      ),
    );
  }
}

flutter doctor -v

[√] Flutter (Channel master, 1.22.0-2.0.pre.93, on Microsoft Windows [Version 10.0.19041.450], locale en-US)
    • Flutter version 1.22.0-2.0.pre.93 at C:\Development\flutter_master
    • Framework revision f35a8b7470 (4 hours ago), 2020-08-26 21:33:03 -0700
    • Engine revision 388193a67b
    • Dart version 2.10.0 (build 2.10.0-62.0.dev)

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at C:\Users\marku\AppData\Local\Android\sdk
    • Platform android-30, build-tools 30.0.1
    • Java binary at: C:\Users\marku\AppData\Local\JetBrains\Toolbox\apps\AndroidStudio\ch-0\193.6626763\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.6.5)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.6.30320.27
    • Windows 10 SDK version 10.0.18362.0

[√] Android Studio (version 4.0)
    • Android Studio at C:\Users\marku\AppData\Local\JetBrains\Toolbox\apps\AndroidStudio\ch-0\193.6626763
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] Connected device (4 available)
    • sdk gphone x86 arm (mobile) • emulator-5554 • android-x86    • Android 11 (API 30) (emulator)
    • Windows (desktop)           • windows       • windows-x64    • Microsoft Windows [Version 10.0.19041.450]
    • Web Server (web)            • web-server    • web-javascript • Flutter Tools
    • Chrome (web)                • chrome        • web-javascript • Google Chrome 84.0.4147.135

• No issues found!

Can this issue be closed?

I tried my original test case on my Moto G 4 and the web and they both seem to blur now, but the blur radius seems much blurrier on the web version. I'm looking into it for more information.

Compiling with the CanvasKit back end seems to perform similarly to what I see on my Moto G4 and my iPhone. It is the regular back end that seems off (by 2x?).

It looks like this was fixed by flutter-team-archive/engine#13768

There is a multiply by 2 in the non-canvaskit implementation in that PR that seems to have persisted to this day complete with a comment that it looks too aggressive in HTML. I'll file a different issue on the HTML difference, but this issue can be considered close.

PR submitted to fix the blur radius issue on HTML...

flutter-team-archive/engine#20840

Is MaskFilter.blur completely unaffected by this? FYI #58546 seems to track this but I don't think it actually does. The blur also has a weird strech/clip on desktop, don't see any open issues regarding this. It seems to be caused by #30671 since it changes when resizing.

That appearance does seem unexpected. Try filing a separate issue as this issue is primarily about the fact that we didn't use to have any implementation at all (the methods just threw a bare Unimplemented exception).

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.

Navigation Menu

Repository navigation

[web] pushImageFilter not implemented #47163

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[web] pushImageFilter not implemented #47163

Description

Activity

flar commented on Dec 16, 2019

Jemshi101 commented on Apr 29, 2020

markusaksli-nc commented on Aug 27, 2020

flar commented on Aug 27, 2020

flar commented on Aug 27, 2020

flar commented on Aug 28, 2020

flar commented on Aug 28, 2020

markusaksli-nc commented on Aug 28, 2020

flar commented on Aug 28, 2020

github-actions commented on Aug 13, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions