Adicionar o Firebase a seu app Flutter

Siga este guia para adicionar serviços do Firebase a um app Flutter.

Etapa 1: configurar seu ambiente

  • Instale o Flutter no seu sistema operacional específico, incluindo a instalação do seguinte:

    • SDK do Flutter
    • Bibliotecas de suporte
    • Software e SDKs específicos da plataforma
  • Instale o editor ou ambiente de desenvolvimento integrado de sua preferência, como o Android Studio, IntelliJ, Xcode ou VS Code.

  • Abra seu app Flutter no editor ou ambiente de desenvolvimento integrado de sua preferência.

    • Desenvolvimento em iOS: o app precisa segmentar o iOS 8 ou posterior.
    • Desenvolvimento em Android: o app precisa segmentar o nível 14 da API (Jelly Bean) ou posterior.
  • Acesse um dispositivo ou emulador para executar seu app.

    • Desenvolvimento em Android: os emuladores precisam usar uma imagem de emulador no Google Play.
  • Faça login no Firebase usando sua conta do Google.

Etapa 2: criar um projeto do Firebase

Antes de adicionar o Firebase ao seu app Flutter, crie um projeto do Firebase para se conectar ao seu app Flutter.

Para criar um projeto do Firebase:

  1. Acesse o Console do Firebase.

  2. Clique em Adicionar projeto e selecione ou insira o Nome do projeto.

    • Se você tiver um projeto do Google associado ao seu aplicativo, selecione o projeto no menu suspenso Nome do projeto.
    • Se você não tiver um projeto do Google, insira o novo Nome do projeto.
  3. (Opcional) Edite o código do projeto.

    O Firebase atribui automaticamente um código exclusivo ao seu projeto. Ele é exibido em serviços do Firebase visíveis publicamente, por exemplo:

    • URL padrão do Realtime Database: your-project-id.firebaseio.com
    • Nome padrão do intervalo do Cloud Storage: your-project-id.appspot.com
    • Subdomínio padrão do Hosting: your-project-id.firebaseapp.com
  4. Siga as demais etapas de configuração no Console do Firebase e clique em Criar projeto, ou Adicionar Firebase, se estiver usando um projeto atual do Google.

O Firebase provisiona recursos automaticamente para seu projeto. O processo normalmente leva alguns minutos. Quando ele for concluído, você será direcionado para a página de visão geral do seu projeto no Console do Firebase.

Etapa 3: configurar seu app para usar o Firebase

É possível configurar um ou mais apps para se conectar ao seu projeto do Firebase. Para fazer isso, registre o código específico da plataforma do app no seu projeto do Firebase. O Firebase gerará automaticamente arquivos de configuração para seu app.

Para instruções detalhadas sobre como configurar seu app, consulte abaixo as etapas específicas para as plataformas iOS e Android.

No diretório de nível superior do seu app Flutter, os diretórios ios e android mantêm arquivos de configuração específicos da plataforma para iOS e Android.

Configurar um app para iOS

  1. Na página de visão geral do projeto do Firebase, inicie o assistente de configuração do iOS.

  2. Adicione seu app ao projeto do Firebase:

    1. Insira o código do pacote do seu app no campo ID do pacote do iOS.

      • Para encontrar esse código, abra seu app no XCode e acesse a guia Geral no diretório Runner de nível superior. O valor do campo Identificador do pacote é o código do pacote do iOS (por exemplo, com.yourcompany.yourproject).
    2. (Opcional) Insira outras informações do app conforme solicitado pelo assistente de configuração.

    3. Clique em Registrar app.

  3. Adicione o arquivo de configuração do Firebase para iOS ao app:

    1. Clique em Fazer o download do GoogleService-Info.plist para solicitar o arquivo de configuração do Firebase para iOS (GoogleService-Info.plist).

      É possível fazer o download do arquivo de configuração do Firebase para iOS novamente a qualquer momento.

    2. Mova o arquivo para o diretório Runner/Runner do seu app Flutter.

  4. De volta ao assistente de configuração do Console do Firebase, clique em Avançar para pular as etapas restantes.

  5. Continue para Adicionar plug-ins do FlutterFire.

Configurar um app para Android

  1. Na página de visão geral do projeto do Firebase, inicie o assistente de configuração do Android.

  2. Adicione seu app ao projeto do Firebase:

    1. Insira o código do aplicativo no campo Nome do pacote do Android.

      • Às vezes, um código do aplicativo é chamado de nome do pacote.

      • Esse código do aplicativo é encontrado no arquivo Gradle do seu módulo (nível do aplicativo), geralmente android/app/build.gradle (código do aplicativo de exemplo: com.yourcompany.yourproject).

    2. (Opcional) Insira outras informações do app conforme solicitado pelo assistente de configuração.

    3. Clique em Registrar app.

  3. Para adicionar o arquivo de configuração do Firebase para Android no app, siga estas etapas:

    1. Clique em Fazer o download do google-services.json para receber o arquivo de configuração do Firebase para Android (google-services.json).

      É possível fazer o download do arquivo de configuração do Firebase para Android novamente a qualquer momento.

    2. Mova o arquivo de configuração para o diretório android/app do seu app Flutter.

  4. Para ativar os serviços do Firebase no seu app para Android, adicione o plug-in google-services aos seus arquivos do Gradle.

    1. No nível raiz (nível do projeto) do seu arquivo Gradle (android/build.gradle), adicione regras para incluir o plug-in do Google Services. Verifique se você tem o repositório Maven do Google também.

      buildscript {
        // ...
        dependencies {
          // ...
          // Add the following line:
          classpath 'com.google.gms:google-services:3.2.1'  // Google Services plugin
        }
      }
      allprojects {
        // ...
        repositories {
          // Check that you have following line (if not, add it):
          google()  // Google's Maven repository
          // ...
        }
      }
      
    2. No módulo (nível do app) do arquivo Gradle (geralmente android/app/build.gradle), adicione a seguinte linha à parte inferior do arquivo.

      dependencies {
        // ...
      }
      
      // ...
      
      // Add the following line to the bottom of the file:
      apply plugin: 'com.google.gms.google-services'  // Gradle plugin
      
    3. Execute flutter packages get.

      Para ver mais informações sobre como gerenciar pacotes e plug-ins, consulte Como usar pacotes.

  5. Continue para Adicionar plug-ins do FlutterFire.

Etapa 4: adicionar plug-ins do FlutterFire

O Flutter usa plug-ins para fornecer acesso a uma ampla variedade de serviços específicos da plataforma, como as APIs do Firebase. Os plug-ins incluem código específico da plataforma para acessar serviços e APIs em cada plataforma.

O Firebase é acessado por meio de várias bibliotecas diferentes, uma para cada serviço do Firebase (por exemplo: banco de dados, autenticação, análise ou armazenamento). O Flutter oferece um conjunto de plug-ins do Firebase, que é chamado coletivamente de FlutterFire.

Como o Flutter é um SDK multiplataforma, cada plug-in do FlutterFire é aplicável tanto para iOS quanto para Android. Então, se você adicionar qualquer plug-in do FlutterFire ao seu app Flutter, ele será usado pelas versões iOS e Android do seu app do Firebase.

Verifique a documentação do FlutterFire para ver a lista mais atualizada de plug-ins do FlutterFire.

  1. Verifique se o app não está sendo executado no emulador ou no dispositivo.

  2. No diretório raiz do seu app Flutter, abra o arquivo pubspec.yaml.

  3. Adicione o plug-in do FlutterFire do SDK do Firebase para Core.

    dependencies:
      flutter:
        sdk: flutter
      firebase_core: ^0.2.5  # add dependency for Firebase Core
    
  4. Adicione plug-ins adicionais do FlutterFire para usar serviços específicos do Firebase.

    A seção a seguir, Adicionar o Analytics, é um exemplo de como adicionar plug-ins do FlutterFire ao seu app.

  5. Execute seu app para verificar a instalação.

Seu app Flutter agora está conectado ao Firebase.

Adicionar o Analytics (opcional)

Adicionar o Google Analytics para Firebase ao app Flutter é opcional, mas é uma maneira relativamente fácil de verificar se o Firebase está funcionando corretamente com o Flutter. Além disso, o Google Analytics pode ser muito útil durante o desenvolvimento e a depuração, além de ajudar a monitorar o sucesso dos seus apps de produção.

  1. Verifique se o app não está sendo executado no emulador ou no dispositivo.

  2. No seu arquivo pubspec.yaml, adicione o plug-in do FlutterFire do Google Analytics para Firebase:

    dependencies:
      flutter:
        sdk: flutter
      firebase_core: ^0.2.5       # This dependency was added during initial configuration.
      firebase_analytics: ^1.0.4  # add dependency for Google Analytics for Firebase
    
  3. Execute flutter packages get.

    Para ver mais informações sobre como gerenciar pacotes e plug-ins, consulte Como usar pacotes.

Exemplo de app do Firebase Analytics

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

  1. Abra um app Flutter que você já [configurou para usar o Firebase](#configure_to_use_firebase.

  2. Acesse o diretório lib do app e exclua o arquivo main.dart existente.

  3. No repositório de programas de exemplo do Google Analytics para Firebase, copie e cole os dois arquivos a seguir 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.

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

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

Para mais informações sobre como configurar o Analytics, consulte os guias de primeiros passos para iOS e Android.

Mais informações sobre o Firebase e o Flutter

Enviar comentários sobre…

Precisa de ajuda? Acesse nossa página de suporte.