Adicionar o Firebase ao seu app Flutter

Pré-requisitos

• Instale o editor ou o ambiente de desenvolvimento integrado de sua preferência.

• Instale o Flutter no seu sistema operacional específico e inclua o seguinte:

  • SDK do Flutter
  • Bibliotecas de suporte
  • Software e SDKs específicos da plataforma

• Faça login no Firebase usando sua Conta do Google.

Se você ainda não tem um app Flutter, conclua os Primeiros passos: test drive para criar um novo app Flutter usando o editor ou ambiente de desenvolvimento integrado de sua preferência.

Etapa 1: instalar as ferramentas de linha de comando necessárias

1. Caso ainda não tenha feito isso, instale a CLI Firebase.

2. Faça login no Firebase com sua Conta do Google executando o seguinte comando:

   firebase login
   

3. Instale a CLI do FlutterFire executando o seguinte comando em qualquer diretório:

   dart pub global activate flutterfire_cli
   

Etapa 2: configurar os apps para usar o Firebase

Use a CLI do FlutterFire para configurar seus apps do Flutter e se conectar ao Firebase.

No diretório do projeto do Flutter, execute o seguinte comando para iniciar o fluxo de trabalho de configuração do app:

flutterfire configure

Etapa 3: inicializar o Firebase no app

1. No diretório do projeto do Flutter, execute o seguinte comando para instalar o plug-in principal:

   flutter pub add firebase_core
   

2. No diretório do projeto do Flutter, execute o seguinte comando para garantir que a configuração do app criado com o Flutter do Firebase esteja atualizada:

   flutterfire configure
   

3. No arquivo lib/main.dart, importe o plug-in principal do Firebase e o arquivo de configuração gerado antes:

   import 'package:firebase_core/firebase_core.dart';
   import 'firebase_options.dart';
   

4. Ainda no arquivo lib/main.dart, inicialize o Firebase usando o objeto DefaultFirebaseOptions exportado pelo arquivo de configuração:

   WidgetsFlutterBinding.ensureInitialized();
   await Firebase.initializeApp(
     options: DefaultFirebaseOptions.currentPlatform,
   );
   runApp(const MyApp());
   

5. Recrie o aplicativo do Flutter:

   flutter run
   

Se preferir usar um projeto de demonstração, inicie o Emulador do Firebase e no arquivo lib/main.dart, inicialize o Firebase usando demoProjectId (deve começar com demo-):

  await Firebase.initializeApp(
    demoProjectId: "demo-project-id",
  );

Etapa 4: adicionar plug-ins do Firebase

É possível acessar o Firebase no app do Flutter usando os vários plug-ins do Firebase para o Flutter, um para cada produto do Firebase, como Cloud Firestore, Authentication, Analytics etc.

Como o Flutter é um framework multiplataforma, cada plug-in do Firebase é aplicável a plataformas da Apple, do Android e da Web. Por isso, qualquer plug-in do Firebase adicionado ao seu app do Flutter será usado pelas versões para Apple, Android e Web do seu app.

Veja como adicionar um plug-in do Firebase ao Flutter:

1. No diretório do projeto do Flutter, execute o seguinte comando:

   flutter pub add PLUGIN_NAME

2. No diretório do projeto do Flutter, execute o seguinte comando:

   flutterfire configure
   

   A execução desse comando garante que a configuração do Firebase do seu app criado com o Flutter esteja atualizada e, para o Crashlytics e o Performance Monitoring no Android, adicione os plug-ins necessários do Gradle ao app.

3. Após a conclusão, recrie seu projeto do Flutter:

   flutter run
   

Está tudo pronto! Agora seus apps do Flutter estão registrados e configurados para usar o Firebase.

Plug-ins disponíveis

^{1 Firebase AI Logic era chamado de "Vertex AI in Firebase" com o plug-in firebase_vertexai.}

Testar um aplicativo de exemplo com o Analytics

Como todos os pacotes, o plug-in firebase_analytics vem com um programa de exemplo.

1. Abra um app Flutter que você já configurou para usar o Firebase. Veja instruções nesta página.

2. Acesse o diretório lib do aplicativo e exclua o arquivo main.dart atual.

3. No repositório de programas de exemplo do Google Analytics, copie e cole os dois arquivos abaixo no diretório lib do seu app:

   • main.dart
   • tabs_page.dart

4. Execute seu app Flutter.

5. Acesse o projeto do Firebase do seu app no console do Firebase e clique em Analytics no menu de navegação à esquerda.

   1. Clique em Painel. Se o Analytics estiver funcionando corretamente, o painel mostrará um usuário ativo no painel "Usuários ativos nos últimos 30 minutos". Pode levar algum tempo para que esse painel seja preenchido.

   2. Clique em DebugView. Ative o recurso para ver todos os eventos gerados pelo programa de exemplo.

Saiba mais sobre como configurar o Analytics nos guias para iniciantes para iOS+, Android e Web.

Observações sobre a criação de apps da Web

Suporte a tipos confiáveis

O SDK do Firebase para Flutter oferece suporte ao uso de tipos confiáveis para evitar ataques XSS baseados em DOM (do lado do cliente). Quando você ativa a aplicação de Tipo confiável no app, o SDK do Firebase injeta scripts no DOM usando políticas personalizadas de Tipo confiável chamadas flutterfire-firebase_core, flutterfire-firebase_auth e assim por diante.

Desativar a injeção automática do SDK do Firebase para JavaScript

Por padrão, o SDK do Firebase para Flutter injeta automaticamente o SDK do Firebase para JavaScript ao criar para a Web. Se você não quiser que o SDK do Firebase para JavaScript seja injetado automaticamente, faça o seguinte:

1. Para ignorar o script de injeção automática, adicione a propriedade a seguir dentro de uma tag <script> no arquivo web/index.html no seu projeto do Flutter:

   <!-- Add this property inside a <script> tag within your "web/index.html" file in your Flutter project -->
   <!-- Put in the names of all the plugins you wish to ignore: -->
   window.flutterfire_ignore_scripts = ['analytics', 'firestore'];
   

2. Carregue o script manualmente usando uma das seguintes alternativas:

   • Adicione o SDK explicitamente ao arquivo web/index.html dentro do callback window.addEventListener:

       window.addEventListener('load', async function (ev) {
         window.firebase_firestore = await import("https://www.gstatic.com/firebasejs/12.7.0/firebase-firestore.js");
         window.firebase_analytics = await import("https://www.gstatic.com/firebasejs/12.7.0/firebase-analytics.js");
     
         _flutter.loader.loadEntrypoint().then(function (engineInitializer) {
           // rest of the code
     

   • Ou faça o download do código do SDK do Firebase para JavaScript do plug-in no domínio "gstatic", e salve em um arquivo JavaScript que será mantido no seu projeto e carregado manualmente:

       // "web/my-analytics.js" & "web/my-firestore.js" file loaded as a script into your "web/index.html" file: 
       window.addEventListener('load', async function (ev) {
         window.firebase_analytics = await import("./my-analytics.js");
         window.firebase_firestore = await import("./my-firestore.js");
     
         _flutter.loader.loadEntrypoint().then(function (engineInitializer) {
           // rest of the code
     

Próximas etapas

• Aprenda a usar o Firebase Flutter Codelab na prática.

• Prepare-se para lançar seu aplicativo:

  • Configure os alertas de orçamento para seu projeto no console Google Cloud.
  • Monitore o painel Uso e faturamento no console do Firebase para ter uma visão geral do uso do projeto em vários serviços do Firebase.
  • Consulte a checklist de lançamento do Firebase.