Adicionar o Firebase ao seu app Flutter


Pré-requisitos

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

  • Configure um dispositivo físico da Apple ou use um simulador para executar seu app.

  • Verifique se o app Flutter se destina às versões de plataforma a seguir ou mais recentes:

    • iOS 13
    • macOS 10.15

  • Instale o Flutter no seu sistema operacional específico, incluindo:

    • 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

Produto Nome do plug-in iOS Android Web Outra da Apple
(como o macOS)		 Windows
Analytics firebase_analytics
beta
App Check firebase_app_check
beta
Authentication firebase_auth
beta beta
Cloud Firestore cloud_firestore
beta beta
Cloud Functions cloud_functions
beta
Cloud Messaging firebase_messaging
beta
Cloud Storage firebase_storage
beta beta
Crashlytics firebase_crashlytics
beta
Data Connect firebase_data_connect
Dynamic Links firebase_dynamic_links
In-App Messaging firebase_in_app_messaging
Firebase Instalações firebase_app_installations
beta
Download de modelos de ML firebase_ml_model_downloader
beta
Performance Monitoring firebase_performance
Realtime Database firebase_database
beta
Remote Config firebase_remote_config
beta
Vertex AI in Firebase firebase_vertexai
beta

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.

Próximas etapas