When using CupertinoTabBar with other opacity value than 1, which activates the blur filter on the CupertinoTabBar, you get the following warnings repeatedly in the Chrome dev tools Web console:
Steps to Reproduce
The issue is caused by the CupertinoTabBar blur filter made with:
ClipRect( child: BackdropFilter( filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0), child: result, ), );
This warning occurs when using:
- Channel master –debug build with CanvasKit (Channel master, 1.22.0-10.0.pre.137)
- Channel dev –debug build with CanvasKit (Channel dev, 1.22.0-9.0.pre)
- Channel beta –debug build with CanvasKit (Channel beta, 1.21.0-9.2.pre)
The issue as such can also be duplicated by just using the backdrop filter with Image filter. I just thought a real use case example with a Widget that is supported on Web, is more relevant and it was the use case where I found the issue as well.
This small demo application shows a typical use case where the issue occurs repeatedly:
Demo source code
Source code for the demo can be found here:
If you scroll the page you get the mentioned warnings every time the blur effect is rebuilt.
This warning is not visible in CanvasKit release builds where warnings are suppressed. The blur filter actually seem to work fine, also on debug builds, but its existence is an indication that something is wrong.
In apps that use CupertinoTabBar with opacity on all screens and all screens scroll, you get a lot of rebuilds of the CupertinoTabBar resulting in this warning being triggered repeatedly. I easily get over 100k rows of this warning in a app, making debugging the application close to impossible. The only workaround for now is to not use blur filter or any Widget using it. Additionally, the suspicion remains that the warning cannot be good, its cause might result in some other hidden issues.
If you in the demo app turn off the “Use opacity on bottom bar” the issue goes away because the CupertinoTabBar only includes the blur effect causing the warning when the background color opacity is other than 1.
Demo source code
Source code for the issue demo application can be found here:
And the issue can be observed with debug SKIA builds on master, dev and beta channels:
flutter run -d chrome --debug --verbose --dart-define=FLUTTER_WEB_USE_SKIA=true --dart-define=FLUTTER_WEB_USE_EXPERIMENTAL_CANVAS_TEXT=true
When built and running in Chrome open up the Chrome Dev Tools console to see the issue as shown in the screenshot above.
- In Windows open Chrome dev tools console with: CTRL+SHIT+J
- On Mac open Chrome dev tools console with: CMD+OPTION+J