Guía sencilla para instalar Firebase en una aplicación Flutter

Primer paso: Cambia tu bundle.id y el nombre de tu aplicación

Cuando conectes tu aplicación Flutter a la base de datos de Firebase, se te pedirá que ingreses tu bundle.id. Esta «URL» actúa como la firma de tu aplicación. Por ejemplo, también se te pedirá cuando publiques tu aplicación en Android o iOS.

Cuando creas tu carpeta de aplicación, se genera un bundle.id por defecto con el formato: com.example.nombre_del_archivo. Puedes dejarlo así si lo deseas, pero es preferible personalizarlo. Generalmente, sigue el formato: com.nombre_de_tu_app.app. Por ejemplo, si tu app se llama «App Flutter», tu bundle.id sería: com.app_flutter.app.

Te recomiendo encarecidamente realizar este paso ANTES de conectar tu aplicación Flutter a Firebase. Aunque es posible reconectar la base de datos con un nuevo bundle.id, es más sencillo asignar el nombre correcto desde el principio.

Para hacerlo, puedes usar el paquete rename, que permite cambiar tu bundle.id en todos los archivos de Flutter de una sola vez. A continuación, se detallan los pasos:

Instala el paquete en tu aplicación.
En la terminal, utiliza el comando dart pub global activate rename.
Luego, ejecuta export PATH="$PATH":"$HOME/.pub-cache/bin" (esto te permitirá usar el comando rename en la consola. Si omites este paso, recibirás un mensaje de error).

Una vez instalado el paquete, puedes usar los siguientes comandos en la terminal:

Obtener el nombre de la aplicación: rename getAppName --targets ios,android,macos,windows,linux
Cambiar el nombre de la aplicación: rename setAppName --targets ios,android,macos,windows,linux --value "NombreDeTuApp"
Obtener el package/bundleId: rename getBundleId --targets ios,android,macos,windows,linux
Cambiar el package/bundleId: rename setBundleId --targets ios,android,macos,windows,linux --value "com.mi_app.app"

Si deseas cambiar el bundle.id solo para una plataforma, especifica únicamente esa y elimina las demás. Por ejemplo, para cambiarlo solo en iOS: rename setBundleId --targets ios --value "com.mi_app.app".

Guía para Instalar Firebase Manualmente

Para instalar Firebase manualmente en tu aplicación Flutter, comienza accediendo al sitio de Firebase. Haz clic en «Get Started» y luego en “Add a project”. Ingresa el nombre que deseas para tu proyecto y, en la siguiente página, desmarca la opción “Enable Google Analytics”.

GA4 te permite medir todas las actividades en tu aplicación (número de usuarios, clics en botones, etc.). Sin embargo, no lo necesitarás hasta que publiques la aplicación. Por lo tanto, para esta guía, te recomendamos que te centres en los fundamentos y desactives esta opción por el momento. Más adelante, podrás instalarlo si es necesario.

Ahora que has creado tu proyecto en Firebase, solo falta conectarlo a tu aplicación para enviar y recibir datos.

Instalación de Firebase/Flutter con iOS

Estos son los pasos para integrar la base de datos Firebase en tu aplicación para iOS:

En Finder, abre la carpeta de tu aplicación, ve a la subcarpeta ios y haz clic en el archivo Runner.xcodeproj.
Una vez que se abra Xcode, haz clic en “Runner” en la esquina superior izquierda. Aparecerá un cuadro de diálogo con el campo Bundle Identifier (en General > Identity), que debes copiar y pegar. Asegúrate de que sea el ID correcto de tu aplicación; si no es así, cámbialo.
Regresa a tu proyecto en Firebase y, en la sección “Add an App”, haz clic en iOS.
Copia tu Bundle Identifier en el primer campo y escribe el nombre de tu aplicación en el segundo. No es necesario añadir el App Store ID hasta que publiques la aplicación.
Una vez registrada la aplicación, se generará un archivo GoogleService-Info.plist, que deberás añadir en Finder. Colócalo en la subcarpeta ios > Runner (NO en RunnerTests).
Para asegurarte de que el archivo ha sido detectado, regresa a Xcode desde la carpeta de la aplicación y verifica que esté en Runner. Si no está, simplemente arrástralo y suéltalo para agregarlo.
Finalmente, para que Firebase funcione, asegúrate de tener la última versión de cocoapods ejecutando brew install cocoapods en la terminal de Visual Studio. También deberás agregar los paquetes firebase_core, firebase_auth y cloud_firestore a tu aplicación para poder utilizar las funciones de Firebase.

Instalación de Firebase/Flutter en Android

Estos son los pasos para integrar la base de datos Firebase en tu aplicación Android:

En la página principal de tu proyecto Firebase, haz clic en el botón de Android (en la sección de “Add an App”).
En Visual Studio, ve a la carpeta de tu aplicación en android > app > build.gradle para obtener el applicationId (se encuentra en defaultConfig).
También puedes agregar los certificados de firma SHA-1 y SHA-2 ahora, aunque no se solicitarán hasta que publiques tu aplicación.
Después de añadir toda la información, descarga el archivo google-services.json generado y colócalo en tu aplicación en Visual Studio, siguiendo esta ruta: android > app.
En Visual Studio, ve a android > app > src y abre build.gradle para cambiar el valor de ndkVersion a «26.1.10909125» y el de minSdkVersion a 23, para evitar algunos errores.
Agrega la línea apply plugin: 'com.google.gms.google-services' al final del archivo. Esta línea permitirá leer el archivo de configuración de Firebase. Recuerda guardar los cambios si no tienes la función de auto-guardado activada en Visual Studio.
Luego, regresa al archivo build.gradle en la carpeta android y abre el segundo archivo build.gradle. Añade las líneas de código classpath 'com.google.gms:google-services:4.4.2' y classpath 'com.google.firebase:firebase-crashlytics-gradle:3.0.2' en la sección dependencies, como se muestra en el siguiente ejemplo:

buildscript {
    repositories {
        // ...
    }
    dependencies {
        // ...
        classpath 'com.google.gms:google-services:4.4.2'
        classpath 'com.google.firebase:firebase-crashlytics-gradle:3.0.2'
    }
}

Si omites este paso, Android Studio mostrará un error al ejecutar la aplicación.

8. Una vez hecho esto, abre tu aplicación en Android Studio y permite que se carguen los paquetes. Si aparece una actualización, también es recomendable instalarla. A veces, se requieren múltiples actualizaciones, por lo que deberás cerrar y abrir Android Studio hasta que no se te soliciten más.

9. Finalmente, haz clic en el ícono del elefante en la esquina superior derecha de la barra de menú para probar la conexión a Firebase. Si todo está en orden, habrás instalado Firebase correctamente en tu proyecto Flutter.

Guía para instalar Firebase con la CLI

La segunda forma de instalar Firebase en Flutter es mediante un paquete.

Primero, accede al sitio de Firebase, haz clic en “Get Started” y luego en “Add a project”. Ingresa el nombre que deseas para tu proyecto y, en la página siguiente, desmarca la opción “Enable Google Analytics”.

GA4 te permite medir toda la actividad en tu aplicación (cantidad de usuarios, clics en botones, etc.). Sin embargo, no necesitarás esta función hasta que publiques tu aplicación. Para esta guía, es mejor enfocarse en lo esencial y desactivarla por ahora. Podrás instalarla más adelante si es necesario.

Una vez hecho esto, deberás instalar:

La interfaz de línea de comandos (CLI) de Firebase.
La interfaz de línea de comandos (CLI) de FlutterFire.

Instalación de la CLI de Firebase

Para instalar la CLI de Firebase (Command-Line Interface), ingresa el siguiente comando en el terminal de Visual Studio:

curl -sL https://firebase.tools | bash

Luego, inicia sesión en Firebase con tu cuenta de Google ejecutando:

firebase login

Escribe Y para abrir una página de autenticación y acceder a tu cuenta de Google.

Una vez autenticado, ejecuta el comando:

firebase projects:list

Esto permite verificar que la CLI está correctamente instalada y tiene acceso a tus proyectos. Debe aparecer una lista que muestra tus proyectos de Firebase (no tus aplicaciones, sino los proyectos creados en Firebase).

Instalación de la CLI de FlutterFire

Para instalar la CLI de FlutterFire, sigue estos pasos:

Desde Visual Studio, introduce el comando:

dart pub global activate flutterfire_cli

También puede ser necesario introducir este comando:

export PATH="$PATH":"$HOME/.pub-cache/bin"

Para asegurarte de que la CLI se instaló correctamente, ejecuta el comando:

flutterfire --help

Si todo se ha instalado bien, deberías ver un menú de ayuda.

Conectar Firebase a tu aplicación Flutter

FlutterFire puede generar el código Dart necesario para usar Firebase en tu aplicación Flutter ejecutando el siguiente comando:

flutterfire configure

Te pedirá que selecciones el proyecto Firebase que deseas usar, así como las plataformas en las que quieres instalar Firebase (Android, iOS, Mac o Web).

Una vez seleccionadas las plataformas, se crean las carpetas de instalación y Firebase podrá comunicarse con tu aplicación. Finalmente, solo queda añadir los paquetes necesarios para utilizar Firebase con Flutter. Los más comunes son:

flutter pub add firebase_core
flutter pub add firebase_auth
flutter pub add firebase_ui_auth

A veces también es necesario añadir:

flutter pub add cloud_firestore

Esto te permitirá comenzar a utilizar Firebase en tu proyecto Flutter.

Gestionar algunos mensajes de error

Al ejecutar mi proyecto después de seguir todos estos pasos, me encontré con el siguiente mensaje de error:

ERROR:D8: Cannot fit requested classes in a single dex file (# methods: 65717 > 65536) com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives:The number of method references in a .dex file cannot exceed 64K.

La manera de resolver este problema es ir al archivo build.gradle y realizar los siguientes cambios:
Reemplazar minSdkVersion flutter.minSdkVersion por minSdkVersion 21 y justo debajo, añadir la línea multiDexEnabled true .
También puedes reemplazar el valor de ndkVersion por "26.1.10909125".

Otro mensaje de error es:

PlatformException (PlatformException(null-error, Host platform returned null value for non-null return value., null, null))

No estoy completamente seguro de la solución, pero parece que logré resolverlo cambiando el código de:

void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
}
runApp(MyApp());

por

void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(MyApp());
}

(Es necesario añadir “options” junto con la plataforma predeterminada).

Otro error que podría aparecer es:

FAILURE: Build failed with an exception.
What went wrong:Execution failed for task ':app:mapDebugSourceSetPaths'.> Error while evaluating property 'extraGeneratedResDir' of task ':app:mapDebugSourceSetPaths'   > Failed to calculate the value of task ':app:mapDebugSourceSetPaths' property 'extraGeneratedResDir'.      > Querying the mapped value of provider(java.util.Set) before task ':app:processDebugGoogleServices' has completed is not supported

Si aparece este error, simplemente elimina la línea en el archivo build.gradle (si la habías añadido previamente:
apply plugin: 'com.google.gms.google-services'

Encontrar SHA-1 y SHA-2 para Android

Para obtener los valores SHA-1 y SHA-2 necesarios para registrar tu aplicación Android, sigue estos pasos:

En la Terminal de Visual Studio, ve a la carpeta de Android con el comando cd android.
Luego, ingresa gradlew signingReport.

Si aparece un mensaje de error como zsh: command not found: gradlew, escribe en su lugar ./gradlew signingReport.

Posible Error tras Actualización de Android Studio

Si hubo una actualización reciente de Android Studio, es posible que Gradle ya no sea compatible con la última versión de Java. En ese caso, podría aparecer el siguiente mensaje de error:

Execution failed for task ':gradle:compileGroovy'.
> BUG! exception in phase 'semantic analysis' in source unit '/Users/xxxxx/development/flutter/packages/flutter_tools/gradle/src/main/groovy/app_plugin_loader.groovy' Unsupported class file major version 64

Para solucionarlo, abre la carpeta android de tu aplicación en Android Studio y verifica si hay una actualización disponible para Gradle. Si la hay, actualízala a la última versión, luego ejecuta flutter run en Visual Studio y vuelve a realizar los pasos mencionados anteriormente.

Si el mismo error sigue apareciendo, puede ser que haya otra actualización disponible. En este caso, cierra Android Studio y vuelve a abrirlo; si existe una nueva actualización para Gradle, debería aparecer automáticamente.

Si la actualización no se muestra, debes cambiar Gradle manualmente en Visual Studio, en los siguientes archivos:

android > gradle/wrapper > gradle-wrapper.properties
android > build.gradle

Conclusión

Ahora que has instalado Firebase en tu aplicación Flutter, podrás comenzar a almacenar datos y reutilizarlos dentro de tu aplicación. Te muestro cómo hacerlo en mi próximo tutorial.

¿Cómo crear una base de datos Firebase para Flutter? →