CODEWITHSUNDEEP
flutterfirebase
mvasco
mvasco

Reputation: 5101

Flutter web app project throwing errors locally and online

I am working on an existing and published Flutter app.

Now I need to create the web version of the app.

Here you have my pubspec.yaml file:

name: capenergy_ns
description: A new Flutter project.

publish_to: 'none' # Remove this line if you wish to publish to pub.dev


version: 1.2.35+37

environment:
  sdk: ">=2.18.4 <3.0.0"


dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  shared_preferences: ^2.0.15
  easy_localization: ^3.0.1
  flutter_native_splash: ^2.2.3
  http: ^0.13.4
  fluttertoast: ^8.0.9
  autocomplete_textfield_ns: ^2.0.0
  package_info_plus: ^1.4.2
  image_cropper: ^2.0.3
  image_picker: ^0.8.5+3
  provider: ^6.0.3
  badges: ^2.0.3
  mime: ^1.0.2
  carousel_slider: ^4.1.1
  video_player: ^2.4.5
  firebase_core: ^2.3.0
  flutter_local_notifications: ^9.2.0
  firebase_messaging: ^14.1.2
  overlay_support: ^1.2.1
  video_thumbnail_imageview: ^0.0.5
  url_launcher: ^6.1.5
  connectivity_plus: ^2.3.9
  date_format: ^2.0.7
  photo_view: ^0.14.0
  random_string: ^2.3.1
  chips_choice: ^2.1.1
  ftoast: ^2.0.0
  progress_dialog_null_safe: ^1.0.7
  auto_size_text_field: ^2.1.0
  flutter_stripe: ^7.0.0
  flutter_bloc: ^8.1.1
  equatable: ^2.0.5
  pin_code_fields: ^7.4.0


flutter_native_splash:
  image: assets/images/logo_capenergy.png
  color: "#ffffff"

dev_dependencies:
  flutter_test:
    sdk: flutter


  flutter_lints: ^1.0.0


flutter:


  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - logo_capenergy.png
    - assets/images/
    - idiomas/



  fonts:
    - family: Montserrat Medium
      fonts:
        - asset: assets/fonts/mo_me.ttf

    - family: Montserrat Regular
      fonts:
        - asset: assets/fonts/mo_re.ttf

Here you have the index.html file:

<!DOCTYPE html>
<html>
<head>

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-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="capenergy_ns">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>capenergy_ns</title>
  <link rel="manifest" href="manifest.json">

  <script>
    // The value below is injected by flutter build, do not touch.
    var serviceWorkerVersion = null;
  </script>
  <!-- This script adds the flutter initialization JS code -->
  <script src="flutter.js" defer></script>
</head>
<body>
  <script>
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        }
      }).then(function(engineInitializer) {
        return engineInitializer.initializeEngine();
      }).then(function(appRunner) {
        return appRunner.runApp();
      });
    });
  </script>
  <script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-messaging.js"></script>
  <script>

  const firebaseConfig = {
    apiKey: ...",
        authDomain: "...",
        projectId: "...",
        storageBucket: "...",
        messagingSenderId: "...",
        appId: "...",
        measurementId: "..."
};
  firebase.initializeApp(firebaseConfig);
  </script>
  <script src="main.dart.js" type="application/javascript"></script>
  <script>
  if ("serviceWorker" in navigator) {
      window.addEventListener("load", function () {
        navigator.serviceWorker.register("/firebase-messaging-sw.js");
      });
    }
    </script>

</body>
</html>

And here you have the firebase-messaging-sw.js file:

importScripts("https://www.gstatic.com/firebasejs/8.7.1/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/8.7.1/firebase-messaging.js");
firebase.initializeApp({
    apiKey: "...",
        authDomain: "...",
        projectId: "...",
        storageBucket: "...",
        messagingSenderId: "...",
        appId: "...",
        measurementId: "..."
});
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function (payload) {
    const promiseChain = clients
        .matchAll({
            type: "window",
            includeUncontrolled: true
        })
        .then(windowClients => {
            for (let i = 0; i < windowClients.length; i++) {
                const windowClient = windowClients[i];
                windowClient.postMessage(payload);
            }
        })
        .then(() => {
            return registration.showNotification("New Message");
        });
    return promiseChain;
});
self.addEventListener('notificationclick', function (event) {
    console.log('notification received: ', event)
});

I would like to know if there is something missing or wrong, then both apps iOS and Android are running well, but the web app is showing a blank screen running locally and on the web server.

Upvotes: 0

Views: 349

Answers (1)

TheGees
TheGees

Reputation: 115

I am struggling after upgrading to flutter_stripe: 7.0.0 on the web too. I get the error:

Error: Unsupported operation: Platform._operatingSystem

Anyway, you miss the script to run flutter_stripe on web/index.html

<script src="https://js.stripe.com/v3/"></script>

Do you also get the above mentioned error?

EDIT 30/11/2022:

To use flutter_stripe on web you have to include also flutter_stripe_web package in pubspec.yaml.

Unfortunately, the latest flutter_stripe_web: 2.0.1 has analysis issues and, although it should work together with flutter_stripe 7.0.0, it does not since it misses some methods.

Since dart does not support multiple package versions in pubspec.yaml, I had to switch between flutter_stripe: 7.0.0 (and no flutter_stripe_web in pubspec.yaml) when building the apps and flutter_stripe: 2.4.0 with flutter_stripe_web: 0.1.3 when building the web.

NOTE: since there are breaking changes between 2.4.0 and 7.0.0 you also have to refactor your code according to the version you are using.

Every time I switch app/web, I delete pubspec.lock and run flutter pub get.

One flutter_stripe_web 2.0.1 (or the next one) is fixed, we would most likely be able to include in pubspec.yaml both flutter_stripe 7.0.0 and flutter_stripe_web 2.0.1.

Hope it helps.

Upvotes: 3

Related Questions