1

Estou tentando fazer um aplicação Web com o Flutter Web e no meu arquivo index.html colei o script indicado pelo google firebase, porém quando rodo a aplicação, ele fica horas executando "compaling lib\main.dart for the web". A aplicação não é composta, no Chrome há apenas uma guia sem conteudo.

obs:

  • Aplicações sem o firebase rodam perfeitamente;

  • estou rodando a aplicação no modo profile no VS Code e meu device é "Chrome(javaScript)";

  • Não estou usando o firebase hosting, estou usando um localhost.

código do meu index.html dentro da tag body:

<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>

Isso seria algum erro de configuração?

Se não conseguirem achar uma solução poderiam me mandar um link de um tutorial para configurar flutter e firebase?

Me ajudem por favor!

2 Respostas 2

1

Essa é a seguinte estrutura que seu index.html deve ter para trabalhar com o 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>

Pelo que você nos mostrou, está faltando esse script no teu

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

Em relação aos packages do Flutter uso os seguintes:

• firebase_auth:
• cloud_firestore:

2
  • ok, vou testar aqui. É normal se a aplicação demorar uma tempo considerável?
    – Luan
    22/07/2020 às 13:00
  • @Luan o que seria um "tempo considerável"? Cada um tem um PC diferente, vão existir tempos de compilação diferentes... Se for como você citou "Fica horas compilando" ai é um problema, não é normal. 22/07/2020 às 13:12
-1

Estou fazendo uma aplicação com Flutter APP e WEB e configurei desta forma e deu certo!

NO ARQUIVO main.dart

import 'package:flutter/foundation.dart' show kIsWeb;
import 'dart:core';


//Inicializando o Firebase APP e WEB

  WidgetsFlutterBinding.ensureInitialized();

  if (kIsWeb) {

    await Firebase.initializeApp( options:

    const FirebaseOptions(

      apiKey: "AI....Z",

      appId: "1......T",

      messagingSenderId: "1.....59",

      projectId: "lojavirtual-brninfodev",

    ));

  } else {

    await Firebase.initializeApp();

  }

  FirebaseFirestore.instance.collection('testeIfElse').add({'teste' : 'WEB'});

}

NO ARQUIVO index.html

<script type="module">

  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js";

  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js";

  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-firestore.js";

  import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-analytics.js";


  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  const firebaseConfig = {

    apiKey: "A.........z",

    authDomain: "lojavirtual-brninfodev.firebaseapp.com",

    projectId: "lojavirtual-brninfodev",

    storageBucket: "lojavirtual-brninfodev.appspot.com",

    messagingSenderId: "1........7",

    appId: "1:..............a",

    measurementId: "G-.......G"

  };



  // Initialize Firebase

  const app = initializeApp(firebaseConfig);

  const analytics = getAnalytics(app);

 </script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .