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.

    Para o Cloud Messaging em plataformas da Apple, confira os pré-requisitos:

    • Configure um dispositivo físico da Apple.
    • Consiga uma chave de autenticação de notificação push da Apple para sua conta do Apple Developer.
    • Ative as notificações push no Xcode em App > Capabilities.

  • 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

O fluxo de trabalho flutterfire configure faz o seguinte:

  • Solicita que você selecione as plataformas (iOS, Android, Web) compatíveis com o app do Flutter. Para cada plataforma selecionada, a CLI do FlutterFire cria um novo app do Firebase no seu projeto do Firebase.

    Você pode usar um projeto do Firebase ou criar um novo. Se você já tiver apps registrados em um projeto do Firebase, a CLI do FlutterFire vai tentar fazer a correspondência com base na configuração atual do projeto do Flutter.

  • Crie um arquivo de configuração do Firebase (firebase_options.dart) e adicione ele ao diretório lib/.

  • (para Crashlytics ou Performance Monitoring no Android) Adiciona o necessário Plug-ins do Gradle específicos do produto ao app Flutter.


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