Configuration of Flutter web and Firebase

Asked

Viewed 317 times

0

I am trying to make a web application with Flutter Web and in my file index.html pasted the script indicated by google firebase, but when I run the application, it runs for hours "compaling lib\main.dart for the web". The application is not composed, in Chrome there is only one tab without content.

Obs:

  • Applications without firebase run perfectly;

  • I am running the application in profile mode in VS Code and my device is "Chrome(Avascript)";

  • I’m not using firebase hosting, I’m using a localhost.

code of my index.html inside the body tag:

<script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-app.js"></script>

<script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js"></script>

<script>
 
  var firebaseConfig = {
    apiKey: ...,
    authDomain: ... 
    databaseURL: ...,
    projectId: ...,
    storageBucket: ...,
    messagingSenderId: ...,
    appId: ...,
    measurementId: ...
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

This would be some configuration error?

If you can’t find a solution, you could send me a link from a tutorial to configure flutter and firebase?

Help me please!

firebase flutter dart

1 answer

1

This is the following structure that your index.html must have to work with firebas:

<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('load', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
  </script>
  <script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-analytics.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-firestore.js"></script>  
  <script>
    // Your web app's Firebase configuration
    var firebaseConfig = {
      apiKey: "...",
      authDomain: "...",
      databaseURL: "...",
      projectId: "...",
      storageBucket: "...",
      messagingSenderId: "...",
      appId: "...",
      measurementId: "..."
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
  </script> 
  <script src="main.dart.js" type="application/javascript"></script>
</body>

From what you’ve shown us, that script is missing from yours

<script src="main.dart.js" type="application/javascript"></script>

Regarding the Flutter Packages use the following:

• firebase_auth:
• cloud_firestore:

  • ok, I’ll test here. It’s normal if the application takes considerable time?

  • @Luan what would be a "considerable time"? Each one has a different PC, there will be different compilation times... If it’s like you said "Keep compiling for hours" then it’s a problem, it’s not normal.

Browser other questions tagged firebase flutter dart

You are not signed in. Login or sign up in order to post.