Ir a la consola

Agrega Firebase a tu app de Flutter

Sigue esta guía para agregar los productos de Firebase a una app de Flutter.

Paso 1: Configura tu entorno

  • Instala Flutter para tu sistema operativo específico, además de los siguientes elementos:

    • SDK de Flutter
    • Bibliotecas compatibles
    • Software y SDK específicos para cada plataforma
  • Instala tu editor o IDE preferido, como Android Studio, IntelliJ, Xcode o VS Code.

  • Abre la app de Flutter en el IDE o editor de tu elección.

    • Desarrollo para iOS: La app debe admitir iOS 8 o una versión posterior.
    • Desarrollo para Android: La app debe admitir el nivel de API 16 (Jelly Bean) o una versión posterior.
  • Configura un dispositivo o emulador para ejecutar la app.

    • Desarrollo para Android: Los emuladores deben usar una imagen de emulador con Google Play.
  • Accede a Firebase con tu Cuenta de Google.

Paso 2: Crea un proyecto de Firebase

Para poder agregar Firebase a tu app de Flutter, debes crear un proyecto de Firebase y conectarlo a la app. Consulta la Información sobre los proyectos de Firebase para obtener más detalles sobre el tema.

Paso 3: Configura tu app para usar Firebase

Puedes configurar una o más apps para conectarlas con tu proyecto de Firebase. Para hacerlo, registra el ID específico de la plataforma de tu app en el proyecto. Firebase generará archivos de configuración para la app de forma automática.

Para obtener instrucciones detalladas sobre cómo configurar tu app, revisa los pasos específicos de la plataforma para iOS y Android.

En el directorio superior de la app de Flutter, las carpetas ios y android tienen archivos de configuración específicos de esas plataformas.

Configura una app para iOS

  1. En el centro de la página de descripción general del proyecto en Firebase console, haz clic en el ícono de iOS para iniciar el flujo de trabajo de la configuración.

    Si ya agregaste una app a tu proyecto de Firebase, haz clic en Agregar app para que se muestren las opciones de la plataforma.

  2. Agrega la app a tu proyecto de Firebase:

    1. Ingresa el ID del paquete de la app en el campo ID del paquete de iOS.

      • Abre tu app en Xcode para encontrar el ID del paquete. Luego, accede a la pestaña General en el directorio Runner de nivel superior. El valor del campo Identificador de paquete es el ID del paquete de iOS (por ejemplo, com.yourcompany.yourproject).
    2. Ingresa otra información de la app si el flujo de trabajo de configuración lo solicita (opcional).

    3. Haz clic en Registrar app.

  3. Agrega el archivo de configuración de Firebase para iOS a la app, como se indica a continuación:

    1. Haz clic en Descargar GoogleService-Info.plist a fin de obtener el archivo de configuración de Firebase para iOS (GoogleService-Info.plist).

      Puedes volver a descargar el archivo de configuración de Firebase para iOS cuando quieras.

    2. Transfiere el archivo al directorio Runner/Runner de tu app de Flutter.

  4. Vuelve al flujo de trabajo de configuración de Firebase console y haz clic en Siguiente para omitir los pasos restantes.

  5. Continúa para Agregar complementos de FlutterFire.

Configura una app para Android

  1. En el centro de la página de descripción general del proyecto en Firebase console, haz clic en el ícono de Android para iniciar el flujo de trabajo de la configuración.

  2. Agrega la app a tu proyecto de Firebase:

    1. Ingresa el ID de aplicación de tu app en el campo Nombre del paquete de Android.

      • A veces, nos referimos al ID de aplicación como un nombre de paquete.

      • Encuentra este ID de aplicación en el archivo Gradle de tu modulo (nivel de app), generalmente android/app/build.gradle (ejemplo de ID de aplicación: com.yourcompany.yourproject).

    2. Ingresa otra información de la app si el flujo de trabajo de configuración lo solicita (opcional).

    3. Haz clic en Registrar app.

  3. Agrega el archivo de configuración de Firebase para Android a la app, como se indica a continuación:

    1. Haz clic en Descargar google-services.json a fin de obtener el archivo de configuración de Firebase para Android (google-services.json).

      Puedes volver a descargar el archivo de configuración de Firebase para Android cuando quieras.

    2. Transfiere el archivo de configuración al directorio android/app de tu app de Flutter.

  4. Agrega el complemento de google-services a tus archivos Gradle a fin de habilitar los servicios de Firebase en tu app para Android.

    1. Agrega reglas para incluir el complemento de Google Services en el archivo Gradle de nivel de raíz (nivel de proyecto) (android/build.gradle). Además, revisa que tengas el repositorio Maven de Google.

      buildscript {
      
        repositories {
          // Check that you have the following line (if not, add it):
          google()  // Google's Maven repository
        }
      
        // ...
        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. En el archivo Gradle (generalmente android/app/build.gradle) de tu módulo (nivel de app), agrega la siguiente línea a la parte inferior del archivo.

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

      Para obtener más información sobre cómo administrar paquetes y complementos, consulta Usa paquetes.

  5. Continúa para Agregar complementos de FlutterFire.

Paso 4: Agrega complementos de FlutterFire

Flutter utiliza complementos para brindar acceso a una amplia variedad de servicios específicos de cada plataforma, como las API de Firebase. Los complementos incluyen un código específico de plataforma para acceder a los servicios y las API de cada una de las plataformas.

Se puede acceder a Firebase a través de varias bibliotecas distintas, una por cada producto de Firebase (por ejemplo: Realtime Database, Firebase Authentication, Google Analytics para Firebase o Cloud Storage para Firebase). Flutter ofrece un grupo de complementos de Firebase que en conjunto se llama FlutterFire.

Como Flutter es un SDK de varias plataformas, cada complemento de FlutterFire se aplica en iOS y Android. Por lo tanto, si agregas uno de estos complementos a tu app de Flutter, este se usará tanto en la versión para iOS como para Android de tu app de Firebase.

Asegúrate de revisar los documentos de FlutterFire para obtener una lista más actualizada de sus complementos.

  1. Asegúrate de que tu app no está en ejecución ni en el emulador ni en el dispositivo.

  2. Desde el directorio raíz de tu app de Flutter, abre el archivo pubspec.yaml.

  3. Agrega el complemento de FlutterFire para el SDK de Firebase Core.

    dependencies:
      flutter:
        sdk: flutter
      firebase_core: ^0.2.5  # add dependency for Firebase Core
    
  4. Para usar productos específicos de Firebase, agrega los complementos adicionales de FlutterFire.

    En la sección Agregar Analytics, puedes ver un ejemplo de cómo agregar los complementos de FlutterFire a tu app.

  5. Ejecuta la app para verificar la instalación

Listo. La app de Flutter se registró y configuró para usar Firebase.

Agrega Analytics (opcional)

Agregar Google Analytics para Firebase a tu app de Flutter es opcional, pero es una manera relativamente sencilla de verificar si Firebase funciona correctamente con Flutter. Analytics también puede ser muy útil durante el desarrollo y la depuración, además de ayudarte a realizar un seguimiento del desempeño adecuado de tus apps de producción.

  1. Asegúrate de que tu app no está en ejecución ni en el emulador ni en el dispositivo.

  2. En el archivo pubspec.yaml, agrega el complemento de FlutterFire para 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. Ejecuta flutter packages get.

    Para obtener más información sobre cómo administrar paquetes y complementos, consulta Usa paquetes.

App de ejemplo de Analytics

Como todos los paquetes, el complemento firebase_analytics incluye un programa de ejemplo.

  1. Abre una app de Flutter que ya hayas configurado para que use Firebase.

  2. Accede al directorio lib de la app y quita el archivo main.dart existente.

  3. Copia y pega los dos archivos siguientes en el directorio lib de tu app, desde el repositorio del programa de ejemplo de Google Analytics para Firebase:

    • main.dart
    • tabs_page.dart
  4. Ejecuta la app de Flutter.

  5. Ve al proyecto de Firebase de tu app en Firebase console y haz clic en Analytics en el panel de navegación izquierdo.

    • Haz clic en Panel. Si Analytics funciona de forma apropiada, el panel de control mostrará un usuario activo en el panel “Usuarios activos en los últimos 30 minutos” (esto podría tardar en propagarse).

    • Haz clic en DebugView. Habilita la función para ver todos los eventos que generó el programa de ejemplo.

A fin de obtener más información sobre la configuración de Analytics, consulta las guías de introducción para iOS y Android.

Pasos siguientes