Agregar Firebase a tu app de Flutter

Requisitos previos

• Instala el editor o IDE que prefieras.

• Instala Flutter para tu sistema operativo específico, incluidos estos componentes:

  • SDK de Flutter
  • Bibliotecas compatibles
  • Software y SDK específicos para cada plataforma

• Accede a Firebase con tu Cuenta de Google.

Si todavía no tienes una app de Flutter, puedes seguir los pasos del instructivo Get started: Test drive para crear una nueva usando el editor o IDE que prefieras.

Paso 1: Instala las herramientas de línea de comandos obligatorias

1. Si aún no lo hiciste, Instala la CLI de Firebase.

2. Accede a Firebase con tu Cuenta de Google ejecutando el siguiente comando:

   firebase login
   

3. Para instalar la CLI de FlutterFire, ejecuta el siguiente comando desde cualquier directorio:

   dart pub global activate flutterfire_cli
   

Paso 2: Configura tus apps para usar Firebase

Usa la CLI de FlutterFire a fin de configurar tus apps de Flutter para conectarte a Firebase.

Desde el directorio de tu proyecto de Flutter, ejecuta el siguiente comando para iniciar el flujo de trabajo de configuración de la app:

flutterfire configure

Paso 3: Inicializa Firebase en tu app

1. Desde el directorio de tu proyecto de Flutter, ejecuta el siguiente comando para instalar el complemento principal:

   flutter pub add firebase_core
   

2. Desde el directorio de tu proyecto de Flutter, ejecuta el siguiente comando para asegurarte de que la configuración de Firebase de tu app de Flutter esté actualizada:

   flutterfire configure
   

3. En el archivo lib/main.dart, importa el complemento principal de Firebase y el archivo de configuración que generaste antes:

   import 'package:firebase_core/firebase_core.dart';
   import 'firebase_options.dart';
   

4. Además, en tu archivo lib/main.dart, inicializa Firebase con el objeto DefaultFirebaseOptions exportado por el archivo de configuración:

   WidgetsFlutterBinding.ensureInitialized();
   await Firebase.initializeApp(
     options: DefaultFirebaseOptions.currentPlatform,
   );
   runApp(const MyApp());
   

5. Vuelve a compilar tu aplicación de Flutter:

   flutter run
   

Si prefieres usar un proyecto de demostración, puedes iniciar el emulador de Firebase y, en tu archivo lib/main.dart, inicializar Firebase con demoProjectId (debería comenzar con demo-):

  await Firebase.initializeApp(
    demoProjectId: "demo-project-id",
  );

Paso 4: Agrega complementos de Firebase

Puedes acceder a Firebase en tu app de Flutter a través de los distintos complementos de Firebase para Flutter, uno para cada producto de Firebase (por ejemplo, Cloud Firestore, Authentication, Analytics, etcétera).

Como Flutter es un framework multiplataforma, cada complemento de Firebase es aplicable para usar en plataformas web, de Apple y de Android. Por lo tanto, si agregas un complemento de Firebase a tu app de Flutter, el complemento se usará en las versiones para Apple, Android y la Web.

A continuación, te mostramos cómo agregar un complemento de Flutter de Firebase:

1. Desde el directorio de tu proyecto de Flutter, ejecuta el siguiente comando:

   flutter pub add PLUGIN_NAME

2. Desde el directorio de tu proyecto de Flutter, ejecuta el siguiente comando:

   flutterfire configure
   

   Ejecutar este comando garantiza que la configuración de Firebase de tu app de Flutter esté actualizada y que, para Crashlytics y Performance Monitoring en Android, se agreguen los complementos de Gradle necesarios a tu app.

3. Cuando termines, vuelve a crear el proyecto de Flutter:

   flutter run
   

Listo. Las apps de Flutter se registraron y configuraron para usar Firebase.

Complementos disponibles

^{1 Firebase AI Logic antes se llamaba "Vertex AI in Firebase" con el complemento firebase_vertexai.}

Prueba una app de ejemplo con 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 usar Firebase (consulta las instrucciones en esta página).

2. Accede al directorio lib de la app y, luego, borra el archivo main.dart existente.

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

   • main.dart
   • tabs_page.dart

4. Ejecuta la app de Flutter.

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

   1. Haz clic en Panel. Si Analytics funciona correctamente, se mostrará un usuario activo en el panel “Usuarios activos en los últimos 30 minutos” (esta información podría tardar en propagarse).

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

Si quieres obtener más detalles sobre la configuración de Analytics, consulta las guías de introducción para iOS+, Android y la Web.

Notas sobre la compilación de aplicaciones web

Compatibilidad con Trusted Types

El SDK de Firebase para Flutter admite el uso de Trusted Types para ayudar a evitar ataques de XSS basados en el DOM (del cliente). Cuando habilites la aplicación forzosa de Trusted Type en tu app, el SDK de Firebase insertará sus secuencias de comandos en el DOM mediante políticas personalizadas de Trusted Type, denominadas flutterfire-firebase_core, flutterfire-firebase_auth, y así sucesivamente.

Inhabilita la inserción automática del SDK de Firebase JavaScript

De forma predeterminada, el SDK de Flutter para Firebase inserta automáticamente el SDK de Firebase JavaScript cuando se compila para la Web. Si no quieres que el SDK de Firebase JavaScript se inserte automáticamente, puedes hacer lo siguiente:

1. Para ignorar la secuencia de comandos de inserción automática, agrega la siguiente propiedad dentro de una etiqueta <script> en el archivo web/index.html de tu proyecto de Flutter:

   <!-- Add this property inside a <script> tag within your "web/index.html" file in your Flutter project -->
   <!-- Put in the names of all the plugins you wish to ignore: -->
   window.flutterfire_ignore_scripts = ['analytics', 'firestore'];
   

2. Carga la secuencia de comandos de forma manual mediante una de las siguientes alternativas:

   • Agrega el SDK de forma explícita a tu archivo web/index.html, dentro de la devolución de llamada window.addEventListener:

       window.addEventListener('load', async function (ev) {
         window.firebase_firestore = await import("https://www.gstatic.com/firebasejs/12.2.1/firebase-firestore.js");
         window.firebase_analytics = await import("https://www.gstatic.com/firebasejs/12.2.1/firebase-analytics.js");
     
         _flutter.loader.loadEntrypoint().then(function (engineInitializer) {
           // rest of the code
     

   • También puedes descargar el código del SDK de Firebase JavaScript del complemento desde el dominio “gstatic” y guardarlos en un archivo JavaScript para mantenerlos en tu proyecto y cargarlos de forma manual:

       // "web/my-analytics.js" & "web/my-firestore.js" file loaded as a script into your "web/index.html" file: 
       window.addEventListener('load', async function (ev) {
         window.firebase_analytics = await import("./my-analytics.js");
         window.firebase_firestore = await import("./my-firestore.js");
     
         _flutter.loader.loadEntrypoint().then(function (engineInitializer) {
           // rest of the code
     

Próximos pasos

• Obtén experiencia práctica con el Codelab de Firebase para Flutter.

• Prepárate para iniciar la app:

  • Establece alertas de presupuesto para tu proyecto en la consola de Google Cloud.
  • Supervisa el panel Uso y facturación en Firebase console para obtener un panorama general del uso de tu proyecto en varios servicios de Firebase.
  • Revisa la Lista de tareas para el lanzamiento de Firebase.