Flutter Web - white screen / blank page on mobile iOS version of web application

Question

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?

Answer 1

Hosting flutter web app using Firebase Hosting CORRECT WAY

https://youtu.be/-GAHjhBhXEc

This video will help you to host your flutter web application on firebase hosting and will help to get rid of that blank white screen.

Answer 2

1. build your web project in release mode by using command -

flutter build web --release

2. Now go to your project root folder -> go to build , now you will find folder named as web . Now that's the folder that will be deployed for hosting.

3. Now you have to open your command prompt into your project root folder , you can also open your cmd in build folder but I suggest you to open in root folder so that you don't have to initialize firebase different functions again and again.

4. Now initialize firebase by using command -

firebase init

5. Now choose the firebase hosting option -> choose your project

6. Note this is the main step -- On asking 'what do you want to use as your public directory?'

what do you want to use as your public directory? (public)

just hit backspace and delete (public) and write build/web

what do you want to use as your public directory? build/web

then press enter

7. Now after two commands it will ask to overwrite your index.html another main step .

file web/index.html already exists. Overwrite?y/n

just press n for No . We don't want to overwrite that file

8. Now after you firebase initialization successful completion write -

firebase deploy

And your project/webapp will run with no blank white screen:)

Answer 3

A similar issue has been reported where the Flutter web page is blank in Safari. Possible cause of this issue is one of the plugins that's being used. You can isolate the cause of this issue by commenting out the plugins being used.

Another path that you can also try is by upgrading the Flutter version that the Flutter app uses as well as the plugins being used.