Error with ColorFilter() in Flutter web #82637
Description
Steps to Reproduce
- Run
flutter create bug - Make any widget that doesn't take up the full screen then wrap it in a
BackDropFilter()widget. - Set the
filterparameter to be aColorFilter.mode() - Run the app on an iOS device (pretty sure works on android as well)
- Run the app on the web ('Chrome (web)')
- You should get the following error with the path of the file causing the issue before it:
Error: The argument type 'ColorFilter' can't be assigned to the parameter type 'ImageFilter'.
Here is what I used for the BackdropFilter() (FYI it was inside of a popup route buildTransition()).
return BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: BackdropFilter(
filter:
ColorFilter.mode(Colors.black.withOpacity(0.55), BlendMode.darken),
child: Transform(
transform: Matrix4.diagonal3Values(
1,
CurvedAnimation(curve: Curves.easeInOut, parent: animation).value,
1),
alignment: FractionalOffset.center,
child: child,
),
),
);
Expected results:
The app should run normally on the web. Here is a video of what the backdrop filter looks like on mobile:
Backdrop.filter.mp4
Actual results:
The app crashes. I was changing from the iPhone 6s emulator to the iPhone 12 Pro Max emulator as I was testing how my app looks on different screen sizes. VS Code didn't switch the device automatically so it ran the app on the web and the error above appeared so thought I would report it. I haven't built web apps before and the app I am building is not for the web so I do not know if this is the default behaviour or if there is anything I have to do to make an app compatible with the web but I think that this should work fine on web and mobile.
Logs
info • 'accentColor' is deprecated and shouldn't be used. Use colorScheme.secondary instead. This feature
was deprecated after v2.3.0-0.1.pre. • lib/main.dart:31:15 • deprecated_member_use
info • 'accentColor' is deprecated and shouldn't be used. Use colorScheme.secondary instead. This feature
was deprecated after v2.3.0-0.1.pre. • lib/main.dart:151:15 • deprecated_member_use
info • This class (or a class that this class inherits from) is marked as '@immutable', but one or more of
its instance fields aren't final: ResetPassword.email • lib/screens/authentication/log_in.dart:460:7
• must_be_immutable
info • The declaration '_getColor' isn't referenced • lib/screens/authentication/log_in.dart:485:9 •
unused_element
info • 'accentIconTheme' is deprecated and shouldn't be used. No longer used by the framework, please remove
any reference to it. This feature was deprecated after v2.3.0-0.1.pre. •
lib/screens/authentication/log_in.dart:556:57 • deprecated_member_use
info • 'accentIconTheme' is deprecated and shouldn't be used. No longer used by the framework, please remove
any reference to it. This feature was deprecated after v2.3.0-0.1.pre. •
lib/screens/authentication/log_in.dart:561:55 • deprecated_member_use
info • 'accentIconTheme' is deprecated and shouldn't be used. No longer used by the framework, please remove
any reference to it. This feature was deprecated after v2.3.0-0.1.pre. •
lib/screens/authentication/log_in.dart:817:46 • deprecated_member_use
info • 'accentIconTheme' is deprecated and shouldn't be used. No longer used by the framework, please remove
any reference to it. This feature was deprecated after v2.3.0-0.1.pre. •
lib/screens/authentication/log_in.dart:823:44 • deprecated_member_use
info • 'accentIconTheme' is deprecated and shouldn't be used. No longer used by the framework, please remove
any reference to it. This feature was deprecated after v2.3.0-0.1.pre. •
lib/screens/authentication/log_in.dart:839:46 • deprecated_member_use
info • Unused import: 'package:releaf/screens/authentication/veryify.dart' •
lib/screens/authentication/register.dart:4:8 • unused_import
info • 'accentIconTheme' is deprecated and shouldn't be used. No longer used by the framework, please remove
any reference to it. This feature was deprecated after v2.3.0-0.1.pre. •
lib/screens/authentication/register.dart:151:46 • deprecated_member_use
info • 'accentIconTheme' is deprecated and shouldn't be used. No longer used by the framework, please remove
any reference to it. This feature was deprecated after v2.3.0-0.1.pre. •
lib/screens/authentication/register.dart:157:44 • deprecated_member_use
info • 'accentIconTheme' is deprecated and shouldn't be used. No longer used by the framework, please remove
any reference to it. This feature was deprecated after v2.3.0-0.1.pre. •
lib/screens/authentication/register.dart:173:46 • deprecated_member_use
info • Unused import: 'package:releaf/shared/const/app_theme.dart' •
lib/screens/authentication/veryify.dart:4:8 • unused_import
info • 'accentIconTheme' is deprecated and shouldn't be used. No longer used by the framework, please remove
any reference to it. This feature was deprecated after v2.3.0-0.1.pre. •
lib/screens/authentication/veryify.dart:103:52 • deprecated_member_use
info • 'accentIconTheme' is deprecated and shouldn't be used. No longer used by the framework, please remove
any reference to it. This feature was deprecated after v2.3.0-0.1.pre. •
lib/screens/authentication/veryify.dart:112:54 • deprecated_member_use
info • The value of the local variable '_ratio' isn't used • lib/screens/authentication/welcome.dart:18:11 •
unused_local_variable
info • 'accentIconTheme' is deprecated and shouldn't be used. No longer used by the framework, please remove
any reference to it. This feature was deprecated after v2.3.0-0.1.pre. •
lib/screens/authentication/welcome.dart:81:58 • deprecated_member_use
info • 'accentIconTheme' is deprecated and shouldn't be used. No longer used by the framework, please remove
any reference to it. This feature was deprecated after v2.3.0-0.1.pre. •
lib/screens/authentication/welcome.dart:123:58 • deprecated_member_use
info • Unused import: 'package:releaf/services/database.dart' • lib/screens/home/dashboard.dart:6:8 •
unused_import
info • The value of the field '_auth' isn't used • lib/screens/home/dashboard.dart:9:9 • unused_field
info • The value of the local variable 'theme' isn't used • lib/screens/home/dashboard.dart:13:11 •
unused_local_variable
info • Unused import: 'package:firebase_storage/firebase_storage.dart' • lib/screens/home/home.dart:1:8 •
unused_import
info • Unused import: 'package:provider/provider.dart' • lib/screens/home/home.dart:3:8 • unused_import
info • Unused import: 'package:releaf/shared/const/app_theme.dart' • lib/screens/home/home.dart:4:8 •
unused_import
info • Unused import: 'package:releaf/services/auth.dart' • lib/screens/home/home.dart:5:8 • unused_import
info • Unused import: 'package:releaf/services/database.dart' • lib/screens/home/home.dart:6:8 •
unused_import
info • Unused import: 'package:provider/provider.dart' • lib/screens/home/journal.dart:2:8 • unused_import
info • Unused import: 'package:releaf/screens/home/dashboard.dart' • lib/screens/home/journal.dart:3:8 •
unused_import
info • Unused import: 'package:releaf/shared/const/app_theme.dart' • lib/screens/home/journal.dart:4:8 •
unused_import
info • Unused import: 'package:releaf/services/auth.dart' • lib/screens/home/journal.dart:5:8 •
unused_import
info • Unused import: 'package:releaf/services/database.dart' • lib/screens/home/journal.dart:6:8 •
unused_import
info • Unused import: 'package:provider/provider.dart' • lib/screens/home/meditation.dart:2:8 •
unused_import
info • Unused import: 'package:releaf/screens/home/dashboard.dart' • lib/screens/home/meditation.dart:3:8 •
unused_import
info • Unused import: 'package:releaf/shared/const/app_theme.dart' • lib/screens/home/meditation.dart:4:8 •
unused_import
info • Unused import: 'package:releaf/services/auth.dart' • lib/screens/home/meditation.dart:5:8 •
unused_import
info • Unused import: 'package:releaf/services/database.dart' • lib/screens/home/meditation.dart:6:8 •
unused_import
info • Unused import: 'dart:ui' • lib/screens/home/setting_popup.dart:1:8 • unused_import
info • Unused import: 'package:email_validator/email_validator.dart' •
lib/screens/home/setting_popup.dart:4:8 • unused_import
info • Unused import: 'package:releaf/services/auth.dart' • lib/screens/home/setting_popup.dart:5:8 •
unused_import
info • Unused import: 'package:releaf/shared/assets/custom_form_field.dart' •
lib/screens/home/setting_popup.dart:7:8 • unused_import
info • The value of the local variable '_theme' isn't used • lib/screens/home/setting_popup.dart:16:11 •
unused_local_variable
info • The value of the local variable '_theme' isn't used • lib/screens/home/settings.dart:299:11 •
unused_local_variable
info • The value of the local variable '_theme' isn't used • lib/screens/home/settings.dart:405:11 •
unused_local_variable
info • Unused import: 'package:provider/provider.dart' • lib/screens/home/tasks.dart:2:8 • unused_import
info • Unused import: 'package:releaf/screens/home/dashboard.dart' • lib/screens/home/tasks.dart:3:8 •
unused_import
info • Unused import: 'package:releaf/shared/const/app_theme.dart' • lib/screens/home/tasks.dart:4:8 •
unused_import
info • Unused import: 'package:releaf/services/auth.dart' • lib/screens/home/tasks.dart:5:8 • unused_import
info • Unused import: 'package:releaf/services/database.dart' • lib/screens/home/tasks.dart:6:8 •
unused_import
info • Unused import: 'package:releaf/services/database.dart' • lib/services/auth.dart:4:8 • unused_import
info • 'accentColor' is deprecated and shouldn't be used. Use colorScheme.secondary instead. This feature
was deprecated after v2.3.0-0.1.pre. • lib/shared/assets/themed_button.dart:94:55 •
deprecated_member_use
info • 'accentColor' is deprecated and shouldn't be used. Use colorScheme.secondary instead. This feature
was deprecated after v2.3.0-0.1.pre. • lib/shared/assets/themed_button.dart:96:27 •
deprecated_member_use
info • 'accentColor' is deprecated and shouldn't be used. Use colorScheme.secondary instead. This feature
was deprecated after v2.3.0-0.1.pre. • lib/shared/assets/themed_button.dart:240:55 •
deprecated_member_use
53 issues found. (ran in 3.2s)
[✓] Flutter (Channel master, 2.3.0-2.0.pre.44, on macOS 11.3.1 20E241 darwin-x64, locale en-AU)
• Flutter version 2.3.0-2.0.pre.44 at /Users/hadymashhour/Developer/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 14d5eab43c (10 days ago), 2021-05-05 21:51:53 -0700
• Engine revision 378e4dbc41
• Dart version 2.14.0 (build 2.14.0-48.0.dev)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
• Android SDK at /Users/hadymashhour/Library/Android/sdk
• Platform android-30, build-tools 30.0.2
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.5, Build version 12E262
• CocoaPods version 1.10.1
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 4.1)
• 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 1.8.0_242-release-1644-b3-6915495)
[✓] VS Code (version 1.56.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.22.0
[✓] Connected device (2 available)
• iPhone 12 Pro Max (mobile) • BD55A391-EEF1-45D8-831D-3FC41EF96918 • ios •
com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
• Chrome (web) • chrome • web-javascript • Google Chrome
88.0.4324.182
• No issues found!