[web] pushImageFilter not implemented

[flar]

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>

[flar]

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

[Jemshi101]

ColorFiltered Widget is also throwing the same error

[markusaksli-nc]

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?

[flar]

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.

[flar]

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?).

[flar]

It looks like this was fixed by flutter/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.

[flar]

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

flutter/engine#20840

[markusaksli-nc]

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.

[flar]

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).

[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.