目前正在使用 Flutter web 开发一个 Web 应用程序。当我在笔记本电脑或 Android 设备上构建、运行和访问 Firebase 托管应用程序时，工作正常，但是当我尝试在移动 iOS 设备上访问该应用程序时，我会看到空白屏幕。我已经用多种设备对此进行了测试，它们都显示相同的空白页面。为了找到罪魁祸首，我尝试了以下方法：
flutter build web --web-renderer canvaskit --releaseflutter clean && find lib -maxdepth 20 -type f \( -name \"*.freezed.dart\" -o -name \"*.g.dart\" -o -name \"*.chopper.dart\" \) -delete<base href="/"><base href="./"><meta name="mobile-web-app-capable" content="yes">编辑：桌面上的 Safari 似乎也会导致白屏（！）
我的
pubspec.yamlname: X
description: X
# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 0.1.0+1
environment:
sdk: ">=2.7.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
# Firebase
firebase_core: ^1.0.2
cloud_firestore: ^1.0.3
firebase_auth: ^1.0.1
# Stacked
stacked: ^2.0.2
# Data
freezed: ^0.14.1+2
freezed_annotation: ^0.14.1
json_serializable: ^4.1.0
# Util
get: 4.1.1
intl: ^0.17.0
get_it: ^6.0.0
url_strategy: ^0.2.0
flutter_dotenv: ^4.0.0-nullsafety.0
logger: ^1.0.0
flutter_screenutil: ^5.0.0
flutter_form_builder: ^6.0.0-nullsafety.1
# Https
chopper: 4.0.0-nullsafety.0
# UI
progress_indicators: ^1.0.0
cupertino_icons: ^1.0.2
overlay_support: ^1.2.1
flutter_svg: ^0.21.0+1
google_fonts: ^2.0.0
dev_dependencies:
flutter_test:
sdk: flutter
build_runner: ^1.12.2
stacked_generator: ^0.3.3
chopper_generator: 4.0.0-nullsafety.0
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets:
- .env
- icon/
- svg/
- font/
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware.
# For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages
flutter_intl:
enabled: true # Required. Must be set to true to activate the package. Default: false
class_name: LocalizedStrings # Optional. Sets the name for the generated localization class. Default: S
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
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
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
use_deferred_loading: false # Optional. Must be set to true to generate localization code that is loaded with deferred loading. Default: false
# localizely: # Optional settings if you use Localizely platform. Read more: https://localizely.com/flutter-localization-workflow
# project_id: # Get it from the https://app.localizely.com/projects page.
# branch: # Get it from the “Branches” page on the Localizely platform, in case branching is enabled and you want to use a non-main branch.
# upload_overwrite: # Set to true if you want to overwrite translations with upload. Default: false
# upload_as_reviewed: # Set to true if you want to mark uploaded translations as reviewed. Default: false
# download_empty_as: # Set to empty|main|skip, to configure how empty translations should be exported from the Localizely platform. Default: empty
# ota_enabled: # Set to true if you want to use Localizely Over-the-air functionality. Default: false
我的
flutter doctor[✓] Flutter (Channel dev, 2.2.0-10.1.pre, on Mac OS X 10.15.7 19H524 darwin-x64, locale
en-NL)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.5)
[✓] IntelliJ IDEA Ultimate Edition (version 2021.1)
[✓] VS Code (version 1.55.2)
[✓] Connected device (1 available)
! Error: iPhone is not connected. Xcode will continue when iPhone is connected.
(code -13)
• No issues found!
我的
index.html<!DOCTYPE html>
<html>
<head>
<base href="./">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="X">
<!-- iOS meta tags & icons -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="dashboard">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>X</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js?v=107771284');
});
}
</script>
<!--Firebase-->
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-auth.js"></script>
<script>
var firebaseConfig = {
//
};
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
导致此问题的原因是什么？如何解决？
已报告类似的问题，即 Safari 中的 Flutter 网页为空白。此问题的可能原因是正在使用的插件之一。您可以通过注释掉正在使用的插件来隔离此问题的原因。
您还可以尝试的另一种方法是升级 Flutter 应用程序使用的 Flutter 版本以及正在使用的插件。
GoogleServise-info.plist
文件，此文件仅需要通过Xcode添加，复制粘贴将不起作用，
您也可以尝试添加互联网权限，
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key><true/>
</dict>
在 info.plist 文件中那么你也可以尝试
flutter clean
>
flutter pub get>
flutter run