Agrega Firebase a tu app creada con Flutter

Sigue esta guía para agregar los servicios 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.
  • Accede a un dispositivo o emulador para ejecutar tu 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.

Sigue estos pasos para crear un proyecto de Firebase:

  1. Dirígete a Firebase console.

  2. Haz clic en Agregar proyecto, luego selecciona o ingresa un Nombre del proyecto.

    • Si hay un proyecto de Google existente asociado con tu app, selecciónalo desde el menú desplegable Nombre del proyecto.
    • Si no hay un proyecto de Google existente, ingresa un nuevo Nombre del proyecto.
  3. (Opcional) Edita el ID del proyecto.

    Firebase asignará de manera automática un ID único a tu proyecto de Firebase. Este identificador se muestra en los servicios de Firebase visibles de forma pública, por ejemplo:

    • URL predeterminada de Realtime Database: your-project-id.firebaseio.com
    • Nombre predeterminado del depósito de Cloud Storage: your-project-id.appspot.com
    • Subdominio predeterminado de Hosting: your-project-id.firebaseapp.com
  4. Sigue los pasos de configuración restantes y, luego, haz clic en Crear proyecto (o Agregar Firebase si usas un proyecto de Google existente).

Firebase aprovisiona los recursos para tu proyecto de forma automática. Este proceso suele tardar algunos minutos. Cuando finalice, verás la página de descripción general del proyecto en Firebase console.

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. Inicia el asistente de configuración de iOS en la página de descripción general del proyecto de Firebase.

  2. Agrega la app a tu proyecto de Firebase:

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

      • Solo 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 del identificador de paquete es el ID del paquete de iOS (por ejemplo, com.yourcompany.yourproject).
    2. (Opcional) Ingresa otra información de la app si el asistente de configuración lo solicita.

    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. Mueve el archivo al directorio Runner/Runner de tu app de Flutter.

  4. Vuelve al asistente 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. Inicia el asistente de configuración de Android en la página de descripción general del proyecto de Firebase.

  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. (Opcional) Ingresa otra información de la app si el asistente de configuración lo solicita.

    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. Mueve 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 {
        // ...
        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 de tu módulo (nivel de app) (generalmente android/app/build.gradle), 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'  // Gradle plugin
      
    3. Ejecuta flutter packages get.

      Para obtener más información sobre cómo administrar paquetes y complementos, consulta Cómo usar 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.

Cada servicio de Firebase cuenta con una biblioteca diferente para poder acceder a la plataforma (por ejemplo: base de datos, autenticación, estadísticas o almacenamiento). 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 principal de Firebase.

    dependencies:
      flutter:
        sdk: flutter
      firebase_core: ^0.2.5  # add dependency for Firebase Core
    
  4. Para usar los servicios 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

Tu app de Flutter debería estar conectada a 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 Cómo usar paquetes.

App de ejemplo de Analytics

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

  1. Abre la app de Flutter que ya [configuraste para usar Firebase](#configure_to_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 al 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 Dashboard. 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.

Más información acerca de Firebase y Flutter

Enviar comentarios sobre…

¿Necesitas ayuda? Visita nuestra página de asistencia.