Currently developing a web app with Flutter web. Building, running and accessing the Firebase hosted application works fine when I'm on my laptop or Android device, however when I try to visit the application on a mobile iOS device I get a blank screen. I have tested this with several devices and they all show the same blank page. In order to find the culprit I have tried the following:
- Building and deploying with channels master / dev / beta
- Adding and omitting canvas and/or --release to the build using
flutter build web --web-renderer canvaskit --release - Cleaning my project along with deleting all generated code using
flutter clean && find lib -maxdepth 20 -type f \( -name \"*.freezed.dart\" -o -name \"*.g.dart\" -o -name \"*.chopper.dart\" \) -delete - Changing
<base href="/">to<base href="./">in my index.html - Updating the first iOS meta tag to
<meta name="mobile-web-app-capable" content="yes">in my index.html - Searching StackOverflow and Flutter issues for similar issues with no result
- Cleaning my cache and trying different phones
Edit: Safari on desktop also seems to cause a white screen (!)
My pubspec.yaml:
name: 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
My 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!
My 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>
What's causing this problem and how do I fix it?
