Flutter Web - 移动 iOS 版 Web 应用程序上的白屏/空白页

Question

目前正在使用 Flutter web 开发一个 Web 应用程序。当我在笔记本电脑或 Android 设备上构建、运行和访问 Firebase 托管应用程序时，工作正常，但是当我尝试在移动 iOS 设备上访问该应用程序时，我会看到空白屏幕。我已经用多种设备对此进行了测试，它们都显示相同的空白页面。为了找到罪魁祸首，我尝试了以下方法：

\n

\n
• 使用通道 master / dev / beta 进行构建和部署
\n
• 使用以下命令在构建中添加和省略 canvas 和/或 --releaseflutter build web --web-renderer canvaskit --release
\n
• 清理我的项目并删除所有生成的代码flutter clean && find lib -maxdepth 20 -type f \\( -name \\"*.freezed.dart\\" -o -name \\"*.g.dart\\" -o -name \\"*.chopper.dart\\" \\) -delete
\n
• 更改<base href="/">为<base href="./">我的index.html
\n
• 将第一个 iOS 元标记更新到<meta name="mobile-web-app-capable" content="yes">我的 index.html 中
\n
• 在 StackOverflow 和 Flutter issues 中搜索类似问题但没有结果
\n
• 清理我的缓存并尝试不同的手机
\n

\n

编辑：桌面上的 Safari 似乎也会导致白屏（！）

\n

我的pubspec.yaml：

\n

name: X\ndescription: X\n\n# The following line prevents the package from being accidentally published to\n# pub.dev using `pub publish`. This is preferred for private packages.\npublish_to: 'none' # Remove this line if you wish to publish to pub.dev\n\n# The following defines the version and build number for your application.\n# A version number is three numbers separated by dots, like 1.2.43\n# followed by an optional build number separated by a +.\n# Both the version and the builder number may be overridden in flutter\n# build by specifying --build-name and --build-number, respectively.\n# In Android, build-name is used as versionName while build-number used as versionCode.\n# Read more about Android versioning at https://developer.android.com/studio/publish/versioning\n# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.\n# Read more about iOS versioning at\n# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html\nversion: 0.1.0+1\n\nenvironment:\n  sdk: ">=2.7.0 <3.0.0"\n\ndependencies:\n  flutter:\n    sdk: flutter\n  flutter_localizations:\n    sdk: flutter\n\n  # Firebase\n  firebase_core: ^1.0.2\n  cloud_firestore: ^1.0.3\n  firebase_auth: ^1.0.1\n\n  # Stacked\n  stacked: ^2.0.2\n\n  # Data\n  freezed: ^0.14.1+2\n  freezed_annotation: ^0.14.1\n  json_serializable: ^4.1.0\n\n  # Util\n  get: 4.1.1\n  intl: ^0.17.0\n  get_it: ^6.0.0\n  url_strategy: ^0.2.0\n  flutter_dotenv: ^4.0.0-nullsafety.0\n  logger: ^1.0.0\n  flutter_screenutil: ^5.0.0\n  flutter_form_builder: ^6.0.0-nullsafety.1\n\n  # Https\n  chopper: 4.0.0-nullsafety.0\n\n  # UI\n  progress_indicators: ^1.0.0\n  cupertino_icons: ^1.0.2\n  overlay_support: ^1.2.1\n  flutter_svg: ^0.21.0+1\n  google_fonts: ^2.0.0\n\ndev_dependencies:\n  flutter_test:\n    sdk: flutter\n  build_runner: ^1.12.2\n  stacked_generator: ^0.3.3\n  chopper_generator: 4.0.0-nullsafety.0\n\nflutter:\n\n  # The following line ensures that the Material Icons font is\n  # included with your application, so that you can use the icons in\n  # the material Icons class.\n  uses-material-design: true\n\n  # To add assets to your application, add an assets section, like this:\n  assets:\n    - .env\n    - icon/\n    - svg/\n    - font/\n\n  # An image asset can refer to one or more resolution-specific "variants", see\n  # https://flutter.dev/assets-and-images/#resolution-aware.\n\n  # For details regarding adding assets from package dependencies, see\n  # https://flutter.dev/assets-and-images/#from-packages\n\n  # To add custom fonts to your application, add a fonts section here,\n  # in this "flutter" section. Each entry in this list should have a\n  # "family" key with the font family name, and a "fonts" key with a\n  # list giving the asset and other descriptors for the font. For\n  # example:\n  # fonts:\n  #   - family: Schyler\n  #     fonts:\n  #       - asset: fonts/Schyler-Regular.ttf\n  #       - asset: fonts/Schyler-Italic.ttf\n  #         style: italic\n  #   - family: Trajan Pro\n  #     fonts:\n  #       - asset: fonts/TrajanPro.ttf\n  #       - asset: fonts/TrajanPro_Bold.ttf\n  #         weight: 700\n  #\n  # For details regarding fonts from package dependencies,\n  # see https://flutter.dev/custom-fonts/#from-packages\nflutter_intl:\n  enabled: true # Required. Must be set to true to activate the package. Default: false\n  class_name: LocalizedStrings # Optional. Sets the name for the generated localization class. Default: S\n  main_locale: en # Optional. Sets the main locale used for generating localization files. Provided value should consist of language code and optional script and country codes separated with underscore (e.g. 'en', 'en_GB', 'zh_Hans', 'zh_Hans_CN'). Default: en\n  arb_dir: lib/l10n # Optional. Sets the directory of your ARB resource files. Provided value should be a valid path on your system. Default: lib/l10n\n  output_dir: lib/generated # Optional. Sets the directory of generated localization files. Provided value should be a valid path on your system. Default: lib/generated\n  use_deferred_loading: false # Optional. Must be set to true to generate localization code that is loaded with deferred loading. Default: false\n#  localizely: # Optional settings if you use Localizely platform. Read more: https://localizely.com/flutter-localization-workflow\n#    project_id: # Get it from the https://app.localizely.com/projects page.\n#    branch: # Get it from the \xe2\x80\x9cBranches\xe2\x80\x9d page on the Localizely platform, in case branching is enabled and you want to use a non-main branch.\n#    upload_overwrite: # Set to true if you want to overwrite translations with upload. Default: false\n#    upload_as_reviewed: # Set to true if you want to mark uploaded translations as reviewed. Default: false\n#    download_empty_as: # Set to empty|main|skip, to configure how empty translations should be exported from the Localizely platform. Default: empty\n#    ota_enabled: # Set to true if you want to use Localizely Over-the-air functionality. Default: false\n

\n

我的flutter doctor：

\n

[\xe2\x9c\x93] Flutter (Channel dev, 2.2.0-10.1.pre, on Mac OS X 10.15.7 19H524 darwin-x64, locale\n    en-NL)\n[\xe2\x9c\x93] Android toolchain - develop for Android devices (Android SDK version 29.0.2)\n[\xe2\x9c\x93] Xcode - develop for iOS and macOS\n[\xe2\x9c\x93] Chrome - develop for the web\n[\xe2\x9c\x93] Android Studio (version 3.5)\n[\xe2\x9c\x93] IntelliJ IDEA Ultimate Edition (version 2021.1)\n[\xe2\x9c\x93] VS Code (version 1.55.2)\n[\xe2\x9c\x93] Connected device (1 available)\n    ! Error: iPhone is not connected. Xcode will continue when iPhone is connected.\n      (code -13)\n\n\xe2\x80\xa2 No issues found!\n

\n

我的index.html：

\n

<!DOCTYPE html>\n<html>\n<head>\n    <base href="./">\n\n    <meta charset="UTF-8">\n    <meta content="IE=Edge" http-equiv="X-UA-Compatible">\n    <meta name="description" content="X">\n\n    <!-- iOS meta tags & icons -->\n    <meta name="mobile-web-app-capable" content="yes">\n    <meta name="apple-mobile-web-app-status-bar-style" content="black">\n    <meta name="apple-mobile-web-app-title" content="dashboard">\n    <link rel="apple-touch-icon" href="icons/Icon-192.png">\n\n    <!-- Favicon -->\n    <link rel="icon" type="image/png" href="favicon.png"/>\n\n    <title>X</title>\n    <link rel="manifest" href="manifest.json">\n</head>\n<body>\n<!-- This script installs service_worker.js to provide PWA functionality to\n     application. For more information, see:\n     https://developers.google.com/web/fundamentals/primers/service-workers -->\n<script>\n    if ('serviceWorker' in navigator) {\n        window.addEventListener('flutter-first-frame', function () {\n            navigator.serviceWorker.register('flutter_service_worker.js?v=107771284');\n        });\n    }\n</script>\n<!--Firebase-->\n<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js"></script>\n<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-analytics.js"></script>\n<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-firestore.js"></script>\n<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-auth.js"></script>\n<script>\n    var firebaseConfig = {\n//\n    };\n    firebase.initializeApp(firebaseConfig);\n    firebase.analytics();\n</script>\n<script src="main.dart.js" type="application/javascript"></script>\n</body>\n</html>\n

\n

是什么导致了这个问题以及如何解决它？

\n

Answer 1

据报告，Flutter 网页在 Safari 中为空白，也存在类似问题。此问题的可能原因是正在使用的插件之一。您可以通过注释掉正在使用的插件来隔离此问题的原因。

您还可以尝试的另一种方法是升级 Flutter 应用程序使用的 Flutter 版本以及正在使用的插件。