Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[web] pushImageFilter not implemented #47163

Closed
flar opened this issue Dec 16, 2019 · 10 comments
Closed

[web] pushImageFilter not implemented #47163

flar opened this issue Dec 16, 2019 · 10 comments
Labels
framework flutter/packages/flutter repository. See also f: labels. P2 Important issues not at the top of the work list platform-web Web applications specifically

Comments

@flar
Copy link
Contributor

flar commented Dec 16, 2019

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
Copy link
Contributor Author

flar commented Dec 16, 2019

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

@iapicca iapicca added dependency: dart Dart team may need to help us framework flutter/packages/flutter repository. See also f: labels. platform-web Web applications specifically labels Dec 17, 2019
@ferhatb ferhatb added this to the Near-term Goals milestone Dec 19, 2019
flar added a commit to flutter/engine that referenced this issue Dec 20, 2019
@vsmenon vsmenon removed the dependency: dart Dart team may need to help us label Feb 4, 2020
filmil pushed a commit to filmil/engine that referenced this issue Mar 13, 2020
@Jemshi101
Copy link

ColorFiltered Widget is also throwing the same error

@kf6gpe kf6gpe added the P1 High-priority issues at the top of the work list label May 29, 2020
@kf6gpe kf6gpe modified the milestone: Near-term Goals Jun 1, 2020
@ferhatb ferhatb added this to In Progress in [web] Rendering API / Fidelity Jun 15, 2020
@yjbanov yjbanov added P2 Important issues not at the top of the work list and removed P1 High-priority issues at the top of the work list labels Jun 16, 2020
@kf6gpe kf6gpe modified the milestone: [DEPRECATED] Near-term Goals Jul 7, 2020
@kf6gpe kf6gpe removed this from the [DEPRECATED] Near-term Goals milestone Jul 22, 2020
@Hixie Hixie removed this from the None milestone Aug 17, 2020
@markusaksli-nc
Copy link
Member

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
Copy link
Contributor Author

flar commented Aug 27, 2020

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
Copy link
Contributor Author

flar commented Aug 27, 2020

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
Copy link
Contributor Author

flar commented Aug 28, 2020

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 flar closed this as completed Aug 28, 2020
[web] Rendering API / Fidelity automation moved this from In Progress to Done Aug 28, 2020
@flar
Copy link
Contributor Author

flar commented Aug 28, 2020

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

flutter/engine#20840

@markusaksli-nc
Copy link
Member

markusaksli-nc commented Aug 28, 2020

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.
Annotation 2020-08-28 112050

@flar
Copy link
Contributor Author

flar commented Aug 28, 2020

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
Copy link

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Aug 13, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
framework flutter/packages/flutter repository. See also f: labels. P2 Important issues not at the top of the work list platform-web Web applications specifically
Development

No branches or pull requests

9 participants